Get row item on checkbox Selection in React MUI DataGrid

user_11089070 0
Viewed 25749

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.

enter image description here

Below is my current code

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

But I'm getting output like this

enter image description here

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.

react-tsx material-ui reactjs datagrid
2 Answers

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

Edit 66424752/get-row-item-on-checkbox-selection-in-react-material-ui-data-grid

user_94494260

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)}
  />
user_107453770
Related