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.
<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}.
<DataGridPro {...data} pagination pageSize={10} /><Button
sx={{ mb: 2 }}
onClick={() => setCheckboxSelection(!checkboxSelection)}
>
Toggle checkbox selection
</Button>
<div style={{ height: 400 }}>
<DataGrid checkboxSelection={checkboxSelection} {...data} />
</div>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.
<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:
<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.
<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:
apiRef
The grid exposes a set of methods that enables all of these features using the imperative apiRef.
⚠️ Only use this API as the last option. Give preference to the props to control the grid.
getSelectedRows()
Returns an array of the selected rows.
Signature:
getSelectedRows: () => Map<GridRowId, GridRowModel>isRowSelected()
Determines if a row is selected or not.
Signature:
isRowSelected: (id: GridRowId) => booleanselectRow()
Change the selection state of a row.
Signature:
selectRow: (id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => voidselectRowRange()
Change the selection state of all the selectable rows in a range.
Signature:
selectRowRange: (range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) => voidselectRows()
Change the selection state of multiple rows.
Signature:
selectRows: (ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) => voidsetSelectionModel()
Updates the selected rows to be those passed to the rowIds argument.
Any row already selected will be unselected.
Signature:
setSelectionModel: (rowIds: GridRowId[]) => void🚧 Range selection
⚠️ This feature isn't implemented yet. It's coming.
👍 Upvote issue #208 if you want to see it land faster.
With this feature, you will be able to select ranges of cells across the Grid.