Description
Summary
In DataGridPremium v8, it’s not possible to fully control column ordering after the initial render.
initialState.columns.orderedFields only applies when the grid mounts.
onColumnOrderChange only provides moved column, oldIndex, targetIndex, but doesn’t return the full new column order.
There’s no controlled prop to manage column ordering like there is for sortModel, filterModel, or rowGroupingModel.
It would be very helpful to have a controlled prop ( (e.g. columnOrder) for column ordering to allow persisting and restoring column order from external state, just like other models. Can anyone recommend a workaround for this? Any help is appreciated.
Examples
<DataGridPremium
columns={columns}
rows={rows}
columnOrder={['foo1', 'foo2', 'foo3']} // example controlled prop
onColumnOrderChange={(newOrder) => setColumnOrder(newOrder)}
...
/>
Motivation
I’m trying to persist column ordering in external state (e.g. Redux, localStorage, or database) so that when users return to the app, their previous column order is restored automatically. This allows users to customize column layouts and have their preferences remembered across sessions, similar to how sorting, filtering, grouping, and density models can already be persisted.
Search keywords: datagrid column order persistence datagridpremium columnOrder orderedFields control controlled column ordering column order redux persistence mui x column order state datagrid columnOrderChange datagrid column ordering api persist column ordering mui