DataGrid - Using locked columns
The <DataGrid /> supports locked columns by specifying the column.locked prop, or its uncontrolled version, column.defaultLocked. The columns can be locked to the start or to the end of the <DataGrid />viewport.
Possible values are:
  • true - the column is locked to the start. Same as 'start'
  • 'start' - the column is locked to the start.
  • 'end' - the column is locked to the end.
  • false - the column is not locked. Any falsy value can go here. (In fact, any value that is different from the three values above)
If you're using the controlled column.locked prop and the grid is configured to support column reordering (reorderColumns=true), when columns move from locked to unlocked (or the other way around), make sure you update the value for column.locked by using onColumnLockedChange({ column, locked }).
If you don't want to update the locked state for columns manually, use the uncontrolled column.defaultLocked instead.