In the app I’m building, I use Xano as backend. In one of the pages, there is a table which is populated by a collection (say a list of residents).
Since the table has more than 2000 records I use pagination, thus at a single point of time, only 12 records will be returned.
I have to add sort (icon) in the header/title for a few columns (like resident name, the place where they live). When the sort icon is clicked, it should toggle between ascending and descending and perform the sort.
I checked a couple of posts and read about few approaches. But they’re all a year old. Are there are any updates to such a sorting feature in WeWeb? Couldn’t find any resources as such.
I’ll start with the methods mentioned in those posts, still it’d be better if there are any easy to follow resources/documentation.
@Sambhavi For what I know you need to configure it by your self. As you use external pagination (other post), you also need to add external sorting in Xano. You can find the documentation about this on the Xano website.
As for the icon, you need to create the logic your self. What i do is the following.
Global workflow for sorting and switching asc to desc
create text variables (sortBy/orderBy)
input parameter of the global workflow is: sortByCol (text)
action 1: change variable (orderBy): if var:sortByCol != var:sortBy then “asc” else switch(var:orderBy,“asc”,“desc”,“desc”,“asc”). This ensures that a sort on another column starts with asc, otherwise it uses the opposite orderBy option.
for each column you add a workflow onClick: name it "sort by [column name]
in this workflow you call the global workflow, in the sortByCol parameter you type the name of the column exactly as Xano returns it.
after implenting external sorting in Xano, the data collection in Weweb should have two more inputs (orderBy, sortBy), bind the text variables you created as mentioned above accordingly.
Icon:
Add an icon you want to use for asc (in each column you want to sort
set a state on the icon called “desc”. The condition of this state: var:orderBy == “desc”.
select this state and choose the icon you want to use for desc
I also use conditional rendering. To only show the icon when the var:sortBy is the column you are sorting. If Xano returns a key: ‘name’, then when I click on the header of the name column var:sortBy will be ‘name’ and then only the icon in the header of that column will be displayed because it is displayed when var: sortBy == “name”.
Note: it’s not possible to use external sorting on addon fields in Xano. I you need to sort on related field, you need to use joins and evals in Xano.
Thanks for the video. I did watch it and I guess it should help me set things up. In fact, I posted another one on the pagination issue that I’m facing. Hopefully following your video closely should help me fix that too.
I will have to re-watch it tomorrow and give it a try. Will post my updates once I see it working/face any issues.
