Hey Wapplers (if it’s not a term, it might be by the time I’m done asking all of my questions!)
I was following Brian’s (@Hyperbytes) tutorial on adding sortable headers to a Bootstrap table (https://wapplerunwrapped.online/videoplayer.php?id=2) which in his case, uses a Server Connect SQL Query as the data source, and it got me wondering if I could do the same thing from the App Connect side using an API Data Source. Is this crazy talk or possible?
As far far as I know it’s not possible, and it has been requested by users. Would be a great addition indeed.
There is an app that does this very well by the way, it’s called https://parabola.io/. The way they transform raw data to understandable tables is truly user friendly. Something the wappler team maybe can take a look at for ideas.
Hey Nevil ,
Thank you sir! Yes, I am quite familiar with Parabola. I am an early user of it and it is a great service.
No it can’t, the sorting is implemented by dynamically sending parameters to the server action which then orders the data query accordingly
Unless your api supported some kind to sort and direction parameters to the API call then i don’t think it could be implemented.
If it did, it may be possible to do something via the state manager but it is not going to be straight forward.
Doing it via a server API connection would also have the same limitations.
HOWEVER you could do some degree of sort manipulation by funnelling the API output through a data view and using the sort parameter within that to change the sort order. Probably would need a dynamically changed variable bound to the sort parameter.
I confess i have never tried it but it’s looks to be perfectly feasible to me.
Yes of course this is possible - just load your data in a data view (is a client side app connect component) and use the data view for sorting and filtering.
Even the bootstrap4 table generator and paginators fully support the data views for display and paging.
The big advantage with accessing the data through data view is that you have it all client side and can filter and sort really fast without any server calls.
This works even with data sets with few thousand records.
If you do higher that that, like 5k+ you should consider server side paging and filtering first.
@George and @Hyperbytes : thank you gentlemen!
So given this direction, I did some experimenting today and I would like to share my steps for the benefit of anyone else who needs to do this but doesn’t know how. It took me a minute to get my head wrapped around the necessary components and configuration to support this, but as with all things Wappler, once it “clicked” it all seemed very logical. Shall we…?
Step 1: Setup your API Data Source
Not much explanation required here. Link it up to which ever API you like and make sure you are getting data back.
Step 2: Setup Session Storage Manager
This is critical, as this will be needed in order to store the sort information from the Bootstrap 4 Table which is then passed over to the Data View in Step 3. Click on Define Session Storage Items and create 2 variables to contain information about the column to sort on and the direction to sort in. When you create your Bootstrap Table in Step 4, it is going to ask you for this information:
Step 3: Setup your Data View
So this is where the magic is happening. The Data View is receiving it’s input from the the Session Storage Manager (which is receiving it’s input everytime the user’s clicks on the table headers to change the sort). So in order for the Data View to do this, we need to set it’s data source as the API Data Source we created in Step 1 and add 2 Dynamic Attributes: Sort On and Sort Direction, which are linked to the 2 variables we created above in Step 2. These variables will be used in Step 4.
Step 4: Add the Bootstrap Table
And this last step wires it all together:
And if you want to earn some extra credit, you can add paging too!
Step 5: Add Page Offset Variable to Session Manager
Alright, so if you are going to page this bad boy you need someplace to store the input for the page number right? So go back to the Session Storage Manager we setup in Step 2 and add a variable to contain this information: paging_offset:
Step 6: Create a Dynamic Attribute for Page Offset in Data View
Now we need to link our Data View to the variable we just created by adding the Dynamic Attribute Page
Now that we’ve got this, we can add the pagination!
Step 7: Run the Bootstrap 4 Paging Generator
And now we wire it all up, making sure that we use our Data View as the Paging Source, toggle ON the State Manager and point it to the Offset Parameter we created in Step 5
Cool huh?
Well done Mason! I see you are having a great “AHA, WOW” moment, now that you are grasping the real power of Wappler 
Such How-To guides are really useful for the community indeed! So keep them posting, as you make more discoveries in your Wappler journey.
Btw you can also post them straight to the #docs category. It is a special Wiki category (and subcategories) that feeds the official Wappler docs
So by posting there you are helping people on he forum but also enriching the official docs.
We can always use some help there as well!
Thank you @George 
I am happy to contribute to the community in any way that I can and will continue to share insights as I gain them.
awesome brotha
Not sure how I missed this excellent tutorial before - very useful - thank you, Mason!
Would it also be possible to filter the results from the dataview?
Thanks, Brian
Thank you for this tip. I was able to set it up and it will sort text fields or strings perfectly. However, numbers gets out of whack.
I set the API schema as number for that field.
Is there some of other step or config I am missing to get the sorting of numbers to be correct?
Thank you,
