Skip to content

🎉 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}.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-7052
Soybean Meal
Gussie Lane
81,051
D-5322
Robusta coffee
Eugene Watkins
10,920
D-6997
Soybeans
Rosalie Myers
17,262
D-1103
Milk
Grace Sutton
13,870
D-4769
Coffee C
Marc Pope
50,236
D-9439
Milk
Danny Lane
30,433
D-2127
Cocoa
Shawn Kelly
13,381
D-938
Cocoa
Estelle Harris
71,550
D-6242
Robusta coffee
Adele Palmer
47,592
D-2636
Soybean Meal
Lizzie Houston
22,541

Rows per page:

100

1-10 of 10

<DataGrid {...data} />

Multiple row selection

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

Desk
Commodity
Trader Name
Trader Email
Quantity
D-3043
Sugar No.14
Clarence McDonald
95,261
D-8202
Robusta coffee
Kyle Richards
4,321
D-3297
Wheat
Frank Washington
94,465
D-3804
Soybeans
Tom Palmer
2,199
D-4852
Coffee C
Mollie Hammond
55,607
D-9633
Cotton No.2
Bertha Collins
43,428
D-4924
Cotton No.2
Franklin Curtis
2,537
D-3918
Soybeans
Olive Cook
18,292
D-6598
Milk
Dale Burton
10,065
D-2282
Frozen Concentrated Orange Juice
Marian Barker
26,265
Total Rows: 10
<DataGridPro {...data} />

Checkbox selection

To activate checkbox selection set checkboxSelection={true}.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-6212
Oats
Robert Palmer
71,174
D-4806
Robusta coffee
Aiden Brown
70,136
D-616
Soybean Oil
Shane Sparks
12,438
D-6233
Cocoa
Ora Hawkins
17,579
D-8121
Sugar No.11
Harry Hart
80,908
D-8029
Wheat
David Walton
14,782
D-8896
Rapeseed
Jared Hudson
17,677
D-3726
Adzuki bean
Irene Stephens
62,613
D-3698
Soybeans
Lula Vega
34,522
D-6747
Soybeans
Landon Schneider
28,762

Rows per page:

100

1-10 of 10

<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

Rows per page:

100

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:

100

0-0 of 0

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

Controlled selection

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

Rows per page:

100

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