Topic: MDB Datatables can't sort when onSort is a react hook

Sophie Liu free asked 4 years ago


Expected behavior

Expected behavior is for the table to have one 'sort' arrow highlighted at a time, and for the table to sort when a column header is clicked.

Actual behavior

When 'onSort' is set to a react useState hook passed to the component containing the datatable from the parent component, the table renders unsorted, with a highlighted sort icon in the header of every column, and the table does not sort when clicked.

Resources (screenshots, code snippets etc.)

enter image description here


Piotr Glejzer staff commented 4 years ago

Is this working normally with class component? Its weird becasue it should work with hooks.


Sophie Liu free commented 4 years ago

I'm not sure what you meant by that question, but both parent and child components are functional components. The method passed to 'onSort' works beautifully when it's an ordinary method (ie. console.log('works')), but the problems arise as soon as the method passed to 'onSort' is a hook (specifically, the "setValue" method returned by useState()). The problem also exists when a non-hook method which executes the hook method inside it is passed to 'onSort'.


Mikołaj Smoleński staff commented 4 years ago

Could you please recreate this issue in our Snippets Editor? https://mdbootstrap.com/snippets/

Best regards


Sophie Liu free commented 4 years ago

Hello, my mistake, everything works if the data passed to the table is a state hook. Thank you so much for your help.

Edit: Sorting now works, however I'm now discovering a small bug. The purpose of having 'onSort' be a state hook is to be able to switch to a different table, and keep the sort settings the same. When the current table is set to sort 'desc', the new table is sorted appropriately, however the 'asc' arrow is highlighted, and when the column header is clicked, the 'desc' arrow highlights and the table sorts 'desc' ie. the same sort it had before.

Snippet demonstrating this: https://mdbootstrap.com/snippets/react/sophie_liu/2386284


Magdalena Dembna staff commented 4 years ago

@Sophie Liu thank you for drawing our attention to this issue. We will add a task to fix it. Best regards, Magdalena



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.27.0
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No