Get row item on checkbox Selection in React MUI DataGrid

Question

I'm getting Data from API and displaying it using React MUI 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.

Answer 1

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