MUI DataGrid. Rows preselection

I'm working with NextJS and React.

Trying to get the MUI DataGrid to work. I can show data on my page, but I would like to preselect a few rows in the grid.

I have the following example page:

// app/employees/page.tsx
'use client';

import { Container, Typography } from '@mui/material';
import { DataGrid, GridRowSelectionModel } from '@mui/x-data-grid';
import React from 'react';

const employees = [
    { id: 1, firstName: 'John', lastName: 'Doe', email: 'john.doe@example.com', mobilePhone: '123-456-7890' },
    { id: 2, firstName: 'Jane', lastName: 'Smith', email: 'jane.smith@example.com', mobilePhone: '234-567-8901' },
    { id: 3, firstName: 'Alice', lastName: 'Johnson', email: 'alice.johnson@example.com', mobilePhone: '345-678-9012' },
    { id: 4, firstName: 'Bob', lastName: 'Brown', email: 'bob.brown@example.com', mobilePhone: '456-789-0123' },
    { id: 5, firstName: 'Charlie', lastName: 'Davis', email: 'charlie.davis@example.com', mobilePhone: '567-890-1234' },
];

const EmployeePage: React.FC = () => {
    const preselectedIds = [2, 4]; // Array of IDs for preselected rows

    if (!employees || employees.length === 0) {
        return (
            <Container>
                <Typography variant="h4" gutterBottom>
                    No Employees Available
                </Typography>
            </Container>
        );
    }


    return (
        <Container>
            <Typography variant="h4" gutterBottom>
                Employee List
            </Typography>
            <DataGrid
                rows={employees}
                columns={[
                    { field: 'id', headerName: 'ID', width: 90 },
                    { field: 'firstName', headerName: 'First Name', width: 150 },
                    { field: 'lastName', headerName: 'Last Name', width: 150 },
                    { field: 'email', headerName: 'Email', width: 200 },
                    { field: 'mobilePhone', headerName: 'Mobile Phone', width: 150 },
                ]}
                checkboxSelection
                disableRowSelectionOnClick
                rowSelectionModel={preselectedIds} // Correctly set the initial row selection
                pageSizeOptions={[5]}

            />
        </Container>
    );
};

export default EmployeePage;

But no matter what I try, I'm unsuccessful. In this instance, I get the error

Type 'number[]' is missing the following properties from type 'GridRowSelectionModel': type, idsts(2739)
DataGridProps.d.ts(698, 3): The expected type comes from property 'rowSelectionModel' which is declared here on type 'IntrinsicAttributes & Omit<Partial<DataGridPropsWithDefaultValues<{ id: number; firstName: string; lastName: string; email: string; mobilePhone: string; }>> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<...>, DataGridForcedPropsKey> & { ...; } & RefAttributes<...>'

I have been trying to find info in the MUI documentation on how to do this, but so far unsuccessfully. Is it possible at all to do this?

Tried ChatGPT and other LLMs, but they can't find the correct solution either.

Is there a better alternative to MUI DatGrid?

No need for alternative ) MUI is a great solution already

You just missed one key point, proper type for rowSelectionModel

• number[] -> useState<GridRowSelectionModel>
  

Here is working interactive solution (without all decor, just solution in codesandbox)

Or just see code snippet below

import * as React from "react";
import { DataGrid, GridRowSelectionModel } from "@mui/x-data-grid";

const rows = [
  {
    id: 1,
    firstName: "John",
    lastName: "Doe",
    email: "john.doe@example.com",
    mobilePhone: "123-456-7890",
  },
  {
    id: 2,
    firstName: "Jane",
    lastName: "Smith",
    email: "jane.smith@example.com",
    mobilePhone: "234-567-8901",
  },
  {
    id: 3,
    firstName: "Alice",
    lastName: "Johnson",
    email: "alice.johnson@example.com",
    mobilePhone: "345-678-9012",
  },
  {
    id: 4,
    firstName: "Bob",
    lastName: "Brown",
    email: "bob.brown@example.com",
    mobilePhone: "456-789-0123",
  },
  {
    id: 5,
    firstName: "Charlie",
    lastName: "Davis",
    email: "charlie.davis@example.com",
    mobilePhone: "567-890-1234",
  },
];

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  { field: "firstName", headerName: "First Name", width: 150 },
  { field: "lastName", headerName: "Last Name", width: 150 },
  { field: "email", headerName: "Email", width: 200 },
  { field: "mobilePhone", headerName: "Mobile Phone", width: 150 },
];

export default function EmployeePage() {
  /**
   * Solution here
   */
  const [selectionModel, setSelectionModel] =
    React.useState<GridRowSelectionModel>({
      type: "include",
      ids: new Set([2, 4]),
    });

  return (
    <DataGrid
      rows={rows}
      columns={columns}
      checkboxSelection
      rowSelectionModel={selectionModel}
      onRowSelectionModelChange={(newSelection) => {
        setSelectionModel(newSelection);
      }}
    />
  );
}