[question] How to add a row in a grid with Server-side data?

[creativecomposer]

The problem in depth

Background

In our React web application, we use the MUI DataGridPremium to Create, Read, Update, and Delete rows.
Since we have a large number of records, we want to use the unstable_dataSource prop, so that we could use the server-side filtering, sorting, and pagination.

Typically, without the unstable_dataSource prop, we could add rows as shown in the following example.

import * as React from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { randomInt, randomUserName } from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

const columns: GridColDef[] = [
  { field: 'id' },
  { field: 'username', width: 150 },
  { field: 'age', width: 80, type: 'number' },
];

let idCounter = 0;
const createRandomRow = () => {
  idCounter += 1;
  return { id: idCounter, username: randomUserName(), age: randomInt(10, 80) };
};

export default function UpdateRowsProp() {
  const [rows, setRows] = React.useState(() => [
    createRandomRow(),
    createRandomRow(),
    createRandomRow(),
    createRandomRow(),
  ]);

  const handleAddRow = () => {
    setRows((prevRows) => [...prevRows, createRandomRow()]);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Stack direction="row" spacing={1}>
        <Button size="small" onClick={handleAddRow}>
          Add a row
        </Button>
      </Stack>
      <Box sx={{ height: 400, mt: 1 }}>
        <DataGridPremium rows={rows} columns={columns} />
      </Box>
    </Box>
  );
}

Question

Could you please explain how to add a row to the grid when the rows are fetched using unstable_dataSource prop?
It looks like the rows and unstable_dataSource are mutually exclusive. Therefore, we did not find a way to do this.

Your environment

`npx @mui/envinfo`

  Browser: Chrome
  
$ npx @mui/envinfo
Need to install the following packages:
@mui/[email protected]
Ok to proceed? (y)
                                                                                                                                                                                     
  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.58
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/core-downloads-tracker:  5.16.7
    @mui/icons-material: ^5.14.8 => 5.15.3
    @mui/lab: ^5.0.0-alpha.162 => 5.0.0-alpha.162
    @mui/material: ^5.16.7 => 5.16.7
    @mui/private-theming:  6.1.3
    @mui/styled-engine:  6.1.3
    @mui/styled-engine-sc: ^5.12.0 => 5.14.12
    @mui/system: ^6.1.3 => 6.1.3
    @mui/types:  7.2.18
    @mui/utils:  5.16.6
    @mui/x-data-grid:  7.19.0
    @mui/x-data-grid-premium: ^7.19.0 => 7.19.0
    @mui/x-data-grid-pro:  7.19.0
    @mui/x-internals:  7.18.0
    @mui/x-license:  7.18.0
    @types/react:  18.2.47
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    styled-components: ^5.3.11 => 5.3.11
    typescript: ^5.1.6 => 5.3.3

Search keywords: server-side
Order ID: 82117