Get the selected values in a datagrid with material ui

Question

I have a datagrid with several elements and I would like to retrieve the checked datas. I saw in the element document that there is a controlled selection but I can't get it to work. I'll put my current code below, thanks in advance!

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';

const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'firstName', headerName: 'First name', width: 130 },
    { field: 'lastName', headerName: 'Last name', width: 130 },
    {
      field: 'age',
      headerName: 'Age',
      type: 'number',
      width: 90,
    },
    {
      field: 'fullName',
      headerName: 'Full name',
      description: 'This column has a value getter and is not sortable.',
      sortable: false,
      width: 160,
      valueGetter: (params) =>
        `${params.getValue('firstName') || ''} ${
          params.getValue('lastName') || ''
        }`,
    },
  ];
  
  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ];

export default function App() {
    const [select, setSelection] = React.useState([]);
    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid 
                rows={rows} 
                columns={columns}
                pageSize={25}
                checkboxSelection 
                hideFooterPagination 
                onSelectionChange={(newSelection) => {
                    setSelection(newSelection.rows);
                }}
            />
            <h1>{select}</h1>
        </div>
    );
}

Answer 1

If you log your select state you can see that the state is being set according to what is selected. onSelectionChange callback newSelection parameter already contains what you seek.

The main issue with your code is <h1>{select}</h1>. While select is indeed an array and arrays are valid React children, each of your array element contains an object (e.g., firstName, lastName), therefore it won't work with that setup.

You may iterate over the array and print each individual array element object property value.

Example below is printing out firstName:

return (
  <div style={{ height: 400, width: "100%" }}>
    <h1>{select.map((val) => val.firstName)}</h1>
    <DataGrid
      rows={rows}
      columns={columns}
      pageSize={25}
      checkboxSelection
      hideFooterPagination
      onSelectionChange={(newSelection) => {
        setSelection(newSelection.rows);
      }}
    />
  </div>
);

Answer 2

The documentation was updated, and I updated this example: answer from this topic, now according to the documentation selectionModel contains an array of id selected rows