Data Grid - Row selection

Row selection allows the user to select and highlight a single or multiple rows that they can then take action on.

Single row selection

Single row selection comes enabled by default. You can select a row by clicking it, or using the keyboard shortcuts. To unselect a row, hold the Ctrl key and click on it.

<DataGrid {...data} />

<DataGrid {...data} />

Press Enter to start editing

Multiple row selection

On the DataGridPro component, you can select multiple rows in two ways:

To select multiple independent rows, hold the Ctrl key while selecting rows.
To select a range of rows, hold the SHIFT key while selecting rows.
To disable multiple row selection, use disableMultipleRowSelection={true}.

<DataGridPro
  {...data}
  pagination
  initialState={{
    ...data.initialState,
    pagination: {
      paginationModel: {
        pageSize: 10,
      },
    },
  }}
/>

<DataGridPro
  {...data}
  pagination
  initialState={{
    ...data.initialState,
    pagination: {
      paginationModel: {
        pageSize: 10,
      },
    },
  }}
/>

Press Enter to start editing

Disable row selection on click

You might have interactive content in the cells and need to disable the selection of the row on click. Use the disableRowSelectionOnClick prop in this case.

<DataGrid checkboxSelection disableRowSelectionOnClick {...data} />

<DataGrid checkboxSelection disableRowSelectionOnClick {...data} />

Press Enter to start editing

Disable selection on certain rows

Use the isRowSelectable prop to indicate if a row can be selected. It's called with a GridRowParams object and should return a boolean value. If not specified, all rows are selectable.

In the demo below only rows with quantity above 50000 can be selected:

<DataGrid
  {...data}
  isRowSelectable={(params: GridRowParams) => params.row.quantity > 50000}
  checkboxSelection
/>

<DataGrid
  {...data}
  isRowSelectable={(params: GridRowParams) => params.row.quantity > 50000}
  checkboxSelection
/>

Press Enter to start editing

Controlled row selection

Use the rowSelectionModel prop to control the selection. Each time this prop changes, the onRowSelectionModelChange callback is called with the new selection value.

<DataGrid
  checkboxSelection
  onRowSelectionModelChange={(newRowSelectionModel) => {
    setRowSelectionModel(newRowSelectionModel);
  }}
  rowSelectionModel={rowSelectionModel}
  {...data}
/>

<DataGrid
  checkboxSelection
  onRowSelectionModelChange={(newRowSelectionModel) => {
    setRowSelectionModel(newRowSelectionModel);
  }}
  rowSelectionModel={rowSelectionModel}
  {...data}
/>

Press Enter to start editing

Checkbox selection

To activate checkbox selection set checkboxSelection={true}.

<Button
  sx={{ mb: 2 }}
  onClick={() => setCheckboxSelection(!checkboxSelection)}
>
  Toggle checkbox selection
</Button>
<div style={{ height: 400 }}>
  <DataGrid checkboxSelection={checkboxSelection} {...data} />
</div>

<Button
  sx={{ mb: 2 }}
  onClick={() => setCheckboxSelection(!checkboxSelection)}
>
  Toggle checkbox selection
</Button>
<div style={{ height: 400 }}>
  <DataGrid checkboxSelection={checkboxSelection} {...data} />
</div>

Press Enter to start editing

Custom checkbox column

If you provide a custom checkbox column to the data grid with the GRID_CHECKBOX_SELECTION_FIELD field, the data grid will not add its own.

We strongly recommend to use the GRID_CHECKBOX_SELECTION_COL_DEF variable instead of re-defining all the custom properties yourself.

In the following demo, the checkbox column has been moved to the right and its width has been increased to 100px.

<DataGrid {...data} checkboxSelection columns={columns} />

<DataGrid {...data} checkboxSelection columns={columns} />

Press Enter to start editing

Usage with server-side pagination

Using the controlled selection with paginationMode="server" may result in selected rows being lost when the page is changed. This happens because the data grid cross-checks with the rows prop and only calls onRowSelectionModelChange with existing row IDs. Depending on your server-side implementation, when the page changes and the new value for the rows prop does not include previously selected rows, the data grid will call onRowSelectionModelChange with an empty value. To prevent this, enable the keepNonExistentRowsSelected prop to keep the rows selected even if they do not exist.

<DataGrid keepNonExistentRowsSelected />

By using this approach, clicking in the Select All checkbox may still leave some rows selected. It is up to you to clean the selection model, using the rowSelectionModel prop. The following demo shows the prop in action:

apiRef

The grid exposes a set of methods that enables all of these features using the imperative apiRef. To know more about how to use it, check the API Object section.

getSelectedRows()

Returns an array of the selected rows.

Signature:

getSelectedRows: () => Map<GridRowId, GridRowModel>

isRowSelectable()

Determines if a row can be selected or not.

Signature:

isRowSelectable: (id: GridRowId) => boolean

isRowSelected()

Determines if a row is selected or not.

Signature:

isRowSelected: (id: GridRowId) => boolean

selectRow()

Change the selection state of a row.

Signature:

selectRow: (id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void

setRowSelectionModel()

Updates the selected rows to be those passed to the rowIds argument. Any row already selected will be unselected.

Signature:

setRowSelectionModel: (rowIds: GridRowId[]) => void

selectRowRange()

Change the selection state of all the selectable rows in a range.

Signature:

selectRowRange: (range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => void

selectRows()

Change the selection state of multiple rows.

Signature:

selectRows: (ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => void