Programmatically preselecting a row in Material-UI's data grid(React)

user_15192028 0
Viewed 3605

I am currently creating a React web application and am using a DataGrid from google's Material-UI. The grid renders based on a selection of a select list(i.e if the select list is of fruits, and the user selects apples, a related DataGrid will render with info about apples. If the user selects another fruit, another related datagrid will render, similar to a Master/Detail relationship).

Since DataGrid offers row selection, I would like to have the first row preselected every time the grid renders, including when the user first enters the page. Currently, the grid renders without any rows selected, and requires the user to click on a row in order to make a selection. I saw on that controlled selection may be possible(https://material-ui.com/components/data-grid/selection/#controlled-selection) although the documentation doesn't explain this in great detail.

I also tried a hack from stackOverflow(Can I initialize the checkbox selection in a material-ui DataGrid?) but that did not seem to work either. I feel like this feature is easier to implement than i am making it out, and should be included out of the box. Thank you in advance!

Edit: Adding a sample code for reference.

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

export default function SingleRowSelectionGrid() {
  
const [selectedRowID, setSelectedRowID] = useState(0);


  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,
    },

  ];

  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 },
  ];



  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid 
                rows={rows} 
                columns={columns}
                onSelectionChange={(selectedRow) => {
                        setSelectedRowID(selectedRow.rowIds[0])}}
                  
      />
    </div>
  );
}
material-ui reactjs row datagrid javascript
3 Answers

You need to use the selectionModel prop in the DataGrid component.

...
      <DataGrid
        checkboxSelection
        rows={rows} 
        columns={columns}
        onSelectionChange={(newSelection) => {
          setSelection(newSelection.rowIds);
        }}
        selectionModel={selectedRows}
      />
...
user_107020100

Based on your code, and looking at the Material-UI DataGrid documentation, it looks like you are missing the checkboxSelection property.

Try this and see if it works:

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
  }
];

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 SingleRowSelectionGrid() {
  const [selectedRows, setSelection] = React.useState([]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection
        rows={rows} 
        columns={columns}
        onSelectionChange={(newSelection) => {
          setSelection(newSelection.rowIds);
        }}
      />
      {
          selectedRows.map(row =>
              <span>{row}<span>
          )
      }
    </div>
  );
}
user_54193580

Today I had a similar problem. The above mentioned methods work, unless you're fetching data/rows from different sources like ParentPage/State & API. In this code, list is passed by another page as state, so it's instant, while movies are fetched from API, so it takes longer. The problem is when content passed to selectionModel prop, there are no rows/movies to be rendered. I think then Material-UI Data Grid sets content = []. The solution is in the code.

export default function ListItem() {
  const location = useLocation();
  const { dispatch } = useContext(ListsContext);
  const [list, setList] = useState(location.state.list);
  const { movies, dispatch: dispatchMovies } = useContext(MoviesContext);
  const [content, setContent] = useState(list.content); 
 

 useEffect(() => {
   getMovies(dispatchMovies).then((elem) => setContent(list.content));
   }, [dispatchMovies, list]);

 <DataGrid
   rows={movies}
   disableSelectionOnClick
   columns={columns}
   rowsPerPageOptions={[10]}
   checkboxSelection
   onSelectionModelChange={(item) => {setContent(item);}}
   selectionModel={content}
   />
user_120957910
Related