datatable sorting improvements


Topic: datatable sorting improvements

CarrierLog pro premium priority asked 6 days ago

Expected behavior datatables need to be able to sort columns by values that are different than the formatted display values. For example, when displaying dates, I want to format them in standard "American" format - MM/DD/YYYY, but they need to sort by actual date value, or by an ISO string of the date. I found several old forum posts about this issue, but no satisfactory solutions.

This is not just an issue for dates. The basic datatable example at https://mdbootstrap.com/docs/standard/data/datatables/ actually has the same issue when sorting by Salary. The sorted (descending) values are $90,580 -> $86,000 -> $470,600 -> etc...

Actual behavior Dates formatted as MM/DD/YYYY sort as if they were strings. All columns sort based on their formatted values.

Resources (screenshots, code snippets etc.) I can suggest two approaches to solving this issue (maybe someone else has other suggestions): 1) An optional sort-value attribute for each "cell" in the datatable that the built-in sort function would use when sorting. 2) The ability to specify a custom sort function for a column


Kamila Pieńkowska staff answered 5 days ago

In the datatable, field type and format are not defined anywhere, so all fields are treated as strings or number and sorted this way. You can use the option `serverSide and do a custom sort if you need more advanced sorting.

Here is an example of a very simple server site setup. You can use any custom sorting method, and you can use different methods for different columns. https://mdbootstrap.com/docs/standard/data/datatables/#section-server-side-update


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: -
  • Device:
  • Browser:
  • OS:
  • Provided sample code: No
  • Provided link: Yes