Sorting Feature Guide
Mantine React Table supports almost any sorting scenario you may have. Client-side sorting is enabled by default, but you can opt to implement your own server-side sorting logic, or even replace the default client-side sorting with your own implementation.
Relevant Table Options
Relevant Column Options
Relevant State Options
More Info Links
|1||TanStack Table Sorting Docs|
Sorting can be disabled globally by setting the
enableSortingtable option to
false. This will disable sorting for all columns. You can also disable sorting for individual columns by setting the
enableSortingcolumn option to
You can sort by a column or multiple columns by default by setting the
sortingstate option in either the
Default Sorting Features
Client-side sorting is enabled by default. When sorting is toggled on for a column, the table will be sorted by an
alphanumericsorting algorithm by default.
Multi-sorting is also enabled by default, which means a user can sort by multiple columns at once. This can be accomplished by clicking on a column header while holding down the
shiftkey. The table will then be sorted by the previously sorted column, and then by the newly clicked column. Or if you want multi-sorting to be the default click behavior without the need to hold
shift, you can set the
isMultiSortEventtable option to
() => true.
You can limit the number of columns that can be sorted at once by setting the
maxMultiSortColCounttable option, or you can disable multi-sorting entirely by setting the
enableMultiSorttable option to
By default, users can remove a sort on a column by clicking through the sort direction options or selecting "Clear Sort" from the column actions menu. You can disable this feature by setting the
enableSortingRemovaltable option to
By default, columns with
stringdatatypes will sort alphabetically in ascending order, but columns with
numberdatatypes will sort numerically in descending order. You can change the default sort direction per column by specifying the
sortDescFirstcolumn option to either
false. You can also change the default sort direction globally by setting the
sortDescFirsttable option to either
1-9 of 9
By default, Mantine React Table will use an
alphanumericsorting function for all columns.
There are 6 built-in sorting functions that you can choose from:
basic. You can learn more about these built-in sorting function in the TanStack Table Sorting API docs.
Add Custom Sorting Functions
If none of these sorting functions meet your needs, you can add your own custom sorting functions by specifying more sorting functions in the
Change Sorting Function Per Column
You can now choose a sorting function for each column by either passing a string value of the built-in sorting function names to the
sortingFncolumn option, or by passing a custom sorting function to the
Manual Server-Side Sorting
If you are working with large data sets, you may want to let your back-end apis handle all of the sorting and pagination processing instead of doing it client-side. You can do this by setting the
manualSortingtable option to
true. This will disable the default client-side sorting and pagination features, and will allow you to implement your own sorting and pagination logic.
manualSortingis set to
true, Mantine React Table assumes that your
datais already sorted by the time you are passing it to the table.
If you need to sort your data in a back-end api, then you will also probably need access to the internal
sortingstate from the table. You can do this by managing the
sortingstate yourself, and then passing it to the table via the
statetable option. You can also pass a callback function to the
onSortingChangetable option, which will be called whenever the
sortingstate changes internally in the table
Remote Sorting Example
Here is the full Remote Data example showing how to implement server-side sorting, filtering, and pagination with Mantine React Table.
No records to display
0-0 of 0
View Extra Storybook Examples