Data Grid - Selection
Selection allows the user to select and highlight a number of rows that they can then take action on.
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 is enable by default with the
To unselect a row, hold the CTRL key and click on it.
DataGridPro, you need to disable multiple row selection with
To select multiple rows on the
DataGridPro component, hold the CTRL key while selecting rows.
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.
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:
The grid exposes a set of methods that enables all of these features using the imperative apiRef.
⚠️ Only use this API when you have no alternative. Always start from the declarative API that the grid exposes.
Returns an array of the selected rows.
getSelectedRows: () => Map<GridRowId, GridRowData>
Determines if a row is selected or not.
isRowSelected: (id: GridRowId) => boolean
Change the selection state of a row.
selectRow: (id: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void
Change the selection state of multiple rows.
selectRows: (ids: GridRowId, isSelected?: boolean, resetSelection?: boolean) => void
Updates the selected rows to be those passed to the
Any row already selected will be unselected.
setSelectionModel: (rowIds: GridRowId) => void