65
Views
9
Comments
Table sort on column click in react for fetch from other data source
Question

Anyone know how to get the table sort by column click on react if your table data source is a "Fetch from other sources"?

mvp_badge
MVP
Rank: #112

Hi Jason,

For that you have to add onsort action on your table.

When you add this it will automatically create a new action with initial sort logic and also ceates some local variabe to manage sorting. 

At the end of this action you have to refresh your Fetch Data Action. Abviously your fetch data action has to use these local variables while fetching data to get the correct date from whereever you get fetching it.

Hi Jason,

Adding to what Nikhil suggested, you also need to set the attribute at which you need to do the sorting.

Add the OnSort event.


And Refresh the dataSource at the end.


And also pass the "TableSort" variable to dynamic sorting.



I have also attached the sample oml, where data is fetched from OtherSource and is bind to table.


Hope this helps you.!

Regards,

LK

OtherSourceSort.oml

Hi Jason,

Have you tried using "ListSort" client action which is available under system module and pass your final list to it as source and use the column to sortby.



Hope this helps you,

Kind Regards,

LK

So an update to this - I was able to get it to work by doing the following:

making an onsort action - and doing a listsort then after the list sort save the "fetch from other source" output list to itself.  HOWEVER, if I do the listsort sort by input being the "sortby" input to the action - it doesn't work!  If I hard code the value on the sort it works.  Only change I do is change that hard coded value to "sortby" (no quotes) - the sort no longer works.  I did debug and the sortby value is getting the correct text into it - but the listsort action seems to not like it.

OK - so I found what is going on.  The "By" input to system component listsort ISN'T text.  Its a generic type.  

If you go to a table in react and create the generic list sort action, it makes the input to the client action "By" a type text.  When you go to the listsort action you CAN select sortby to be the input.  However, it doesn't work.  If you go to the by input of listsort and double click it to open the expression editor, you can put in "if(sortby="PI"," and then hit control-space to open up the auto complete I then see the green box and PI which I can select.  For the false I just selected another one.  That works!  So the ultimate fix for this is that OutSystems needs to redo the input to listsosort on their side such that it will take text input and convert that to one of the generic types if the names match up.  That is the only way it will work dynamically.  Otherwise you have to go to each listsort by input and do a bunch of IF statements to convert your text input into one of the generic types.