Get row item on checkbox Selection in MUI X Data Grid

Question

I'm getting Data from API and displaying it using React MUI X DataGrid. I have enabled check box selection and I want to get the specific cell items of the selected row and save them in a list.

For Example in the image below, if I click on the checkbox for the 1st row I want to get the "current location" added in a list and then if I click on the 2nd row I want current location of 2nd row added in the existing list.

Below is my current code

<DataGrid
   rows={rows}
   columns={columns}
   checkboxSelection     
   onSelectionModelChange={itm => console.log(itm)}
/>

But I'm getting output like this

I'm very new to React and I'm not sure how to get current Location's value for the selected rows and add it to a list.

NearHuscarl · Accepted Answer · 2021-09-17T03:30:19.867

47

You can only access the row ids inside onSelectionModelChange callback. If you want to get the whole row objects, use the original rows data and filter the others based on the selected ids.

Note: DataGrid stores each row ID in string internally so if the ID from your original row data is number you may want to convert it toString() before comparing.

rows={rows}
onSelectionModelChange={(ids) => {
  const selectedIDs = new Set(ids);
  const selectedRowData = rows.filter((row) =>
    selectedIDs.has(row.id.toString());
  );
  console.log(selectedRowData);
}}

Live Demo

edited Sep 17 '21 at 03:30

answered Mar 01 '21 at 15:23

NearHuscarl

66,950
18
261
230

And how to add selected row item data in a list? – Maryam Mar 01 '21 at 18:10
@Maryam you mean add selected row data programmatically at the start? – NearHuscarl Mar 02 '21 at 03:03
Basically, after displaying the data in a Grid, I have to call an API (post request) on a button click and I have to pass the selected row data in the body of that API call in the form of the list. For Example, if I select 5 rows I want "Current Location" for those 5 rows to be added to a list so that I can pass them in my API call. – Maryam Mar 02 '21 at 03:17
@Maryam I updated the answer and demo for you specific question. – NearHuscarl Mar 02 '21 at 03:36
I'm getting error at this line const selectedRowData = data.rows.filter((row) "Cannot find name 'data'. " – Maryam Mar 02 '21 at 03:54
@Maryam replace the `data.rows` in my code example with your data that you pass to `DataGrid` rows props. From the code in your question it should be `rows` instead of `data.rows` – NearHuscarl Mar 02 '21 at 03:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229374/discussion-between-maryam-and-nearhuscarl). – Maryam Mar 02 '21 at 04:06
Just add a note in my answer for your trouble @Maryam – NearHuscarl Mar 02 '21 at 06:25
`onSelectionModelChange` is not useful that much since on deselection (upper 'check all' checkbox click when some items are checked) it just returns an empty array so it's difficult to determine which rows were deselected. – Oleksiy May 10 '21 at 18:56
@NearHuscarl Do you have any knowledge of a issue with using `selectionModel` to set a group of selected check boxes on initial render? It would fine on my local but on our prod it errors with a type error of `r = undefined` and `e.current.getRow(...) undefined` – Ryan Carville May 19 '21 at 23:41
@Alexey you can store the previous `selectionModel` and find out which ones are deselected if the user hits unselect all. – NearHuscarl May 20 '21 at 09:04
@NearHuscarl Sure, but that's an additional logic that should take into consideration cases with server-side pagination when selection should be kept across multiple pages. – Oleksiy May 20 '21 at 09:38
1

This works 100%! – ReactPotato Sep 30 '21 at 06:18
how to make row unselected after row selection operation performed successfully? – Sandeep Jain Dec 27 '22 at 11:52
i have a model open when the checkbox click but when i uncheck that time also open the model. any solution. `row._id} rows={rows} columns={columns} checkboxSelection onRowSelectionModelChange={(data) => { setPostData(data); setOpen(true); }} />` – asela daskon Jun 30 '23 at 02:54

score 14 · Answer 2 · answered Aug 05 '22 at 14:21

14

A simple solution

const onRowsSelectionHandler = (ids) => {
    const selectedRowsData = ids.map((id) => rows.find((row) => row.id === id));
    console.log(selectedRowsData);
  };

My DataGrid Object

<DataGrid
  rows={rows}
  columns={columns}        
  disableSelectionOnClick
  onSelectionModelChange={(ids) => onRowsSelectionHandler(ids)}
  />

answered Aug 05 '22 at 14:21

Sajeel Hassan

314
3
8

3

This works 100%! – Ava Sep 14 '22 at 09:32
1

2023 its still works – Sarotobi Apr 19 '23 at 04:11

hasharnashar · Answer 3 · 2023-05-05T08:03:47.183

10

This wasn't working for me until I realised onSelectionModelChange is now onRowSelectionModelChange in MUI DataGrid (using "@mui/x-data-grid": "^6.2.1")

For someone like me who has a hard time deciphering docs before coming to stackoverflow I had to figure this out the hard way i.e. by reading docs.

edited May 05 '23 at 08:03

answered May 05 '23 at 05:48

hasharnashar

113
1
8

yes you are right but there is another issue when you uncheck the checkbox and check again both ways triggering the event. I'm using onRowSelectionModelChange to open a model window. – asela daskon Jun 29 '23 at 12:58

Get row item on checkbox Selection in MUI X Data Grid

3 Answers3

Live Demo

Linked