Column Ordering (DnD) Feature Guide
Whether you just want to change the default column order in your table or let columns be reordered by dragging and dropping, Mantine React Table has a simple API for this.
Relevant Table Options
Relevant Column Options
More Info Links
|1||TanStack Table Column Ordering Docs|
Change the Default Column Order
By Default, Mantine React Table will order the columns in the order they are defined in the
columnsdefinition. And Display Columns such as Actions, Selection, Expansion, etc., get added to either the beginning or the end of the table. You can customize all of this by defining your own
columnOrderState and passing it either to the
The Column Order State is an array of string column ids, that come from the ids or accessorKeys that you defined in your column definitions.
Manage Column Order State
If you need to manage the
columnOrderstate yourself, you can do so in the
statetable option and
onColumnOrderChangecallback, but you will also need to initialize the
Enable Column Ordering with Drag and Drop
Mantine React Table has a built-in drag and drop feature to reorder columns. This feature is enabled by passing the
The ability for a column to have a drag and drop handle can be specified by setting the
enableColumnOrderingoption on the column.
|Dylan||Murray||261 Erdman Ford||East Daphne||Kentucky|
|Raquel||Kohler||769 Dominic Grove||Columbus||Ohio|
|Ervin||Reinger||566 Brakus Inlet||South Linda||West Virginia|
|Brittany||McCullough||722 Emie Stream||Lincoln||Nebraska|
|Branson||Frami||32188 Larkin Turnpike||Charleston||South Carolina|
1-5 of 5
View Extra Storybook Examples
Note: Drag and Drop is not currently supported on mobile touch devices.