Sort headers in bootstrap 4 table responsive


i have started with my second page, a bootstrap 4 responsive table with search.

I followed steps to create sortable headers here:

# Adding sortable headers and text searching to your bootstrap table

Everythings looks correct, but the columns won’t sort.

Any idea what step i might have missed?



the URL does change upon sorting:

but data is not.

Are you sure you did not forget to select the query parameters as values for server connect sort and direction parameters?
In App Structure select your Server Connect component, the you will see its parameters in the properties panel. Bind the query parameters there.

1 Like

thank you for helping me out. i think i did bind them:


and now the sorting works perfect.

1 Like

Because you have used sorting please just check out the bindings to make sure you use the .defaul('') data formatter. Productivity Tips & Tricks look at tip 1 as I do not think this was an issue at the time of Brian creating that tutorial video.

1 Like

thank you for the link.
i am sorry, but where do i have to check for the .default() data formatter?

is it something i have to add with my App tree?

Nah, just on your bindings themselves.

Lets say your table looks like

<td dmx-text="yourBinding.defaul('')"></td>

Here are some screenshots to assist

1 Like

really? i have to add those for each column?
looks like some extra steps…needed?

It is not needed to use this.
It may cause sorting issues if some of your database table columns is returning null values. That’s why Paul suggest adding this to such columns.

1 Like

No it is an either OR situation.

You either use binding like {{binding.default(’’)}}

OR in your case your bindings are attached to the dmx-text parameter so you just add the .default(’’) after the parameter like

<td dmx-text="customer.defaul('')"></td>
1 Like