跳转到内容

🎉 v5 is out! Head to the documentation to get started.

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 enable by default with the DataGrid component. To unselect a row, hold the CTRL key and click on it. For the DataGridPro, you need to disable multiple row selection with disableMultipleSelection={true}.

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

每页行数:

100

0-0 的 0

<DataGrid {...data} />

Multiple row selection

To select multiple rows on the DataGridPro component, hold the CTRL key while selecting rows.

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity
<DataGridPro {...data} />

Checkbox selection

To activate checkbox selection set checkboxSelection={true}.

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

每页行数:

100

0-0 的 0

<DataGrid checkboxSelection {...data} />

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

每页行数:

100

0-0 的 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

每页行数:

100

0-0 的 0

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

Controlled selection

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

每页行数:

100

0-0 的 0

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

apiRef

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.

Signature:
getSelectedRows: () => Map<GridRowId, GridRowData>
Signature:
selectRow: (id: GridRowId, isSelected?: boolean, allowMultiple?: boolean) => void
Signature:
selectRows: (ids: GridRowId[], isSelected?: boolean, deselectOtherRows?: boolean) => void
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.

API