Skip to content

Data grid - Selection

Selection allows the user to select and highlight a number of rows that they can then take action on.

Row selection

Row selection can be performed with a simple mouse click, or using the keyboard shortcuts. The grid supports single and multiple row selection.

Single row selection

Single row selection is enabled by default with the DataGrid component. To unselect a row, hold the Ctrl key and click on it.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-6420
Soybean Oil
Kenneth Cortez
17,216
D-6594
Corn
Erik Powell
35,709
D-4021
Adzuki bean
Lettie Ball
46,362
D-2570
Oats
Alma Cohen
92,962
D-6050
Coffee C
Maud Rodriquez
46,085
D-6618
Soybean Meal
May Hughes
36,026
D-1890
Oats
Miguel Keller
66,192
D-3123
Adzuki bean
Sophie Drake
2,603
D-9928
Adzuki bean
Matilda Joseph
80,765

Rows per page:

1–10 of 10

<DataGrid {...data} />

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 disableMultipleSelection={true}.
Desk
Commodity
Trader Name
Trader Email
Quantity
D-9204
Soybean Oil
Kyle Harrington
94,120
D-676
Corn
Harvey Townsend
37,254
D-9927
Cocoa
Adelaide Chavez
32,937
D-754
Sugar No.14
Ollie Beck
34,739
D-7051
Rapeseed
Joe Holt
47,936
D-7077
Robusta coffee
Francis Colon
43,134
D-5219
Robusta coffee
Bertie Chapman
38,531
D-8247
Soybean Meal
Claudia Morales
71,320
D-1268
Sugar No.11
Roxie Lee
65,548

1–10 of 100

<DataGridPro {...data} pagination pageSize={10} />

Checkbox selection

To activate checkbox selection set checkboxSelection={true}.

No rows
Desk
Commodity
Trader Name
Trader Email

Rows per page:

0–0 of 0

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

Custom checkbox column

If you provide a custom checkbox column to the grid with the GRID_CHECKBOX_SELECTION_FIELD field, the 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.

No rows
Desk
Commodity
Trader Name
Trader Email

Rows per page:

0–0 of 0

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

Disable selection on click

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

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

Rows per page:

0–0 of 0

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

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:

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

Rows per page:

0–0 of 0

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

Controlled selection

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

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

Rows per page:

0–0 of 0

<DataGrid
  checkboxSelection
  onSelectionModelChange={(newSelectionModel) => {
    setSelectionModel(newSelectionModel);
  }}
  selectionModel={selectionModel}
  {...data}
/>

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 grid cross-checks with the rows prop and only calls onSelectionModelChange 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 grid will call onSelectionModelChange 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 selectionModel prop. The following demo shows the prop in action:

No results found.
Desk
Commodity
Trader Name
Trader Email
Quantity

1–5 of 100

apiRef

The grid exposes a set of methods that enables all of these features using the imperative apiRef.

Signature:
getSelectedRows: () => Map<GridRowId, GridRowModel>
Signature:
isRowSelected: (id: GridRowId) => boolean
Signature:
selectRow: (id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void
Signature:
selectRowRange: (range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => void
Signature:
selectRows: (ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => void
Signature:
setSelectionModel: (rowIds: GridRowId[]) => void

🚧 Range selection

With this feature, you will be able to select ranges of cells across the Grid.

API