Skip to content
+

Data Grid - Cell selection

Cell selection allows the user to select individual cells or a range of cells.

The Data Grid has, by default, the ability to select rows. On the Data Grid Premium, you can also enable the ability to select cells with the cellSelection prop.

<DataGridPremium cellSelection />

To select a single cell, click on it or, with the cell focused, press Shift+Space. Multiple cells can be selected by holding Ctrl while clicking the cells. A cell can be deselected by also clicking it while Ctrl is pressed.

To select all cells within a range, you can use one of the interactions available:

  • Mouse drag: Click on a cell, then drag the mouse over another cell and release it
  • Shift + click: Click on a cell and, while holding Shift, click on another cell—if a third cell is clicked the selection will restart from the last clicked cell
  • Shift + arrow keys: Using the arrow keys, focus on a cell, then hold Shift and navigate to another cell—if Shift is released and pressed again, the selection will restart from the last focused cell

The following demo allows to explore the cell selection feature. It has row selection disabled, but it's possible to set both selections to work in parallel.

Press Enter to start editing

Controlled cell selection

You can control which cells are selected with the cellSelectionModel prop. This props accepts an object whose keys are the row IDs that contain selected cells. The value of each key is another object, which in turn has column fields as keys, each with a boolean value to represent their selection state. You can set true to select the cell or false to deselect a cell. Removing the field from the object also deselects the cell.

// Selects the cell with field=name from row with id=1
<DataGridPremium cellSelectionModel={{ 1: { name: true } }} />

// Unselects the cell with field=name from row with id=1
<DataGridPremium cellSelectionModel={{ 1: { name: false } }} />

When a new selection is made, the callback passed to the onCellSelectionModelChange prop is called with the updated model. Use this value to update the current model.

The following demo shows how these props can be combined to create an Excel-like formula field.

Customize range styling

When multiple selected cells make a range, specific class names are applied to the cells at the edges of this range. The class names applied are the following:

  • MuiDataGrid-cell--rangeTop: applied to all cells of the first row of the range
  • MuiDataGrid-cell--rangeBottom: applied to all cells of the last row of the range
  • MuiDataGrid-cell--rangeLeft: applied to all cells of the first column of the range
  • MuiDataGrid-cell--rangeRight: applied to all cells of the last column of the range

You can use these classes to create CSS selectors targeting specific corners of each range. The demo below shows how to add a border around the range.

Press Enter to start editing

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.

Signature:
getCellSelectionModel: () => GridCellSelectionModel
Signature:
getSelectedCellsAsArray: () => GridCellCoordinates[]
Signature:
isCellSelected: (id: GridRowId, field: GridColDef['field']) => boolean
Signature:
selectCellRange: (start: GridCellCoordinates, end: GridCellCoordinates, keepOtherSelected?: boolean) => void
Signature:
setCellSelectionModel: (newModel: GridCellSelectionModel) => void