Material UI Data Grid first column fixed

Question

Is it possible to make first column fixed when scrolling horizontally in Material Data Grid? I tried with selecting first child and applying position: sticky but it didn't work.

Answer 1

To set pinned columns via initialState, pass an object with the following shape to this prop:

interface GridPinnedColumns {
  left?: string[]; // Optional field names to pin to the left
  right?: string[]; // Optional field names to pin to the right
}

This feature is availabe in the Data Grid Pro only. more you can see here https://mui.com/components/data-grid/columns/#column-pinning

Answer 2

Maybe it's a Pro feature or I'm misunderstanding the question, but it's as simple as adding

pinnedColumns: {left: ['actions']}

to an initialState prop in the DataGrid div. So, like this:

<DataGrid 
    initialState={{
        pinnedColumns: { left: ['actions'] },
    }}
/>

" 'actions' " of course being the headerName/column of whatever you want to pin and "left" the direction. If you have more than one to pin, or want to pin multiple to different sides, simply add them after with commas between each.

<DataGridPro
  rows={rows}
  columns={columns}
  checkboxSelection
  initialState={{
    pinnedColumns: {
      left: [GRID_CHECKBOX_SELECTION_COL_DEF.field],
      right: ['actions', 'title', 'director', '...'],
    },
  }}
/>