Topic: MDB Datatables can't sort when onSort is a react hook
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.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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
Piotr Glejzer staff commented 3 years ago
Is this working normally with class component? Its weird becasue it should work with hooks.
Sophie Liu free commented 3 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 3 years ago
Could you please recreate this issue in our Snippets Editor? https://mdbootstrap.com/snippets/
Best regards
Sophie Liu free commented 3 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 3 years ago
@Sophie Liu thank you for drawing our attention to this issue. We will add a task to fix it. Best regards, Magdalena