MUI DataGrid replace Pagination - validateDOMNesting(...): <td> cannot appear as a child of <div>

Question

I'm replacing the pagination in the DataGrid component made by Material-UI and get the following console error: Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>

I don't think I'm doing anything special so I'm wondering what the problem actually is. Am I using the wrong pagination component?

Here's a CodeSandbox that reproduces the problem.

I partly use the v5 of MUI, React and Typescript.

import { TablePagination } from "@mui/material";
import { DataGrid, GridColumns } from "@mui/x-data-grid";

export default function App() {
  const columns: GridColumns = [
    {
      field: "foo"
    }
  ];

  const rows = [
    {
      id: "bar"
    }
  ];

  return (
    <div style={{ height: 500 }}>
      <DataGrid
        columns={columns}
        rows={rows}
        components={{ Pagination: TablePagination }}
        componentsProps={{
          pagination: {
            count: 1,
            page: 0,
            onPageChange: () => {},
            rowsPerPage: 10,
            rowsPerPageOptions: [10, 25, 50, 100],
            onRowsPerPageChange: () => {},
            labelRowsPerPage: "Zeilen pro Seite",
            labelDisplayedRows: () => `Seite ${1} von ${1}`,
            nextIconButtonProps: {
              disabled: true
            }
          }
        }}
      />
    </div>
  );
}

Answer 1

TablePagination default component is td

mui-datagrid uses divs rather than the table / tr / td tag so you have to say the component is a div :

    componentsProps={{
      pagination: {
        count: 1,
        page: 0,
        component: "div", // here
        onPageChange: () => {},
        rowsPerPage: 10,
        rowsPerPageOptions: [10, 25, 50, 100],
        onRowsPerPageChange: () => {},
        labelRowsPerPage: "Zeilen pro Seite",
        labelDisplayedRows: () => `Seite ${1} von ${1}`,
        nextIconButtonProps: {
          disabled: true
        }
      }
    }}