[DataGridPremium] useGridRootProps.js:7 Uncaught Error: MUI: useGridRootProps should only be used inside the DataGrid/DataGridPro component.

[jschweitzer70]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I bought a "Premium" license and the demo is not working for me. [Order #45775] (June 15, 2022)

It throws me the following error, previously reported for "pro" licenses, where they didn't find the problem either.

useGridRootProps.js:7 Uncaught Error: MUI: useGridRootProps should only be used inside the DataGrid/DataGridPro component.

Expected behavior 🤔

https://mui.com/x/react-data-grid/#commercial-version

It works fine, as it works in the published demo of MUIX

Steps to reproduce 🕹

import * as React from 'react';
import { LicenseInfo } from '@mui/x-license-pro';
import Box from '@mui/material/Box';
import {
    DataGridPremium,
    GridToolbar,
    useGridApiRef,
    useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

LicenseInfo.setLicenseKey('xxxxxxxx'); //not show

export default function DataGridPremiumDemo() {
    const { data, loading } = useDemoData({
        dataSet: 'Commodity',
        rowLength: 100,
        visibleFields: [
            'commodity',
            'quantity',
            'filledQuantity',
            'status',
            'isFilled',
            'unitPrice',
            'unitPriceCurrency',
            'subTotal',
            'feeRate',
            'feeAmount',
            'incoTerm',
        ],
    });

    const apiRef = useGridApiRef();

    const initialState = useKeepGroupedColumnsHidden({
        apiRef,
        initialState: {
            ...data.initialState,
            rowGrouping: {
                ...data.initialState?.rowGrouping,
                model: ['commodity'],
            },
            sorting: {
                sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
            },
        },
    });

    return (
        <Box sx={{ height: 520, width: '100%' }}>
            <DataGridPremium
                {...data}
                apiRef={apiRef}
                loading={loading}
                disableSelectionOnClick
                initialState={initialState}
                components={{ Toolbar: GridToolbar }}
            />
        </Box>
    );
}

Context 🔦

I only need to use the demo collapsible table, for a long data set. It is the reason why we purchased the premium license. We expected it to work.

[Order #45775] (June 15, 2022)

Your environment 🌎

System: OS: Windows 10 10.0.19042 Binaries: Node: 14.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.44) npmPackages: @emotion/react: ^11.9.3 => 11.9.3 @emotion/styled: ^11.9.3 => 11.9.3 @mui/base: 5.0.0-alpha.66 @mui/icons-material: ^5.3.1 => 5.3.1 @mui/lab: ^5.0.0-alpha.66 => 5.0.0-alpha.66 @mui/material: ^5.8.5 => 5.8.5 @mui/private-theming: 5.3.0 @mui/styled-engine: 5.3.0 @mui/styled-engine-sc: ^5.3.0 => 5.3.0 @mui/styles: ^5.3.0 => 5.3.0 @mui/system: 5.3.0 @mui/types: 7.1.0 @mui/utils: 5.3.0 @mui/x-data-grid: ^5.3.0 => 5.3.0 @mui/x-data-grid-generator: ^5.3.0 => 5.3.0 @mui/x-data-grid-premium: ^5.12.3 => 5.12.3 @mui/x-data-grid-pro: 5.12.3 @mui/x-license-pro: 5.12.3 @types/react: 17.0.38 react: ^18.1.0 => 18.1.0 react-dom: ^18.1.0 => 18.1.0 styled-components: ^5.3.3 => 5.3.3

Order ID 💳 (optional)

[Order #45775] (June 15, 2022)

[jschweitzer70]

Update the dependencies, according to the following. However the problem continues. Please support as it is a paid component and we hope that you comply with the agreement that what is sold works.

System: OS: Windows 10 10.0.19042 Binaries: Node: 14.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.44) npmPackages: @emotion/react: ^11.9.3 => 11.9.3 @emotion/styled: ^11.9.3 => 11.9.3 @mui/base: 5.0.0-alpha.66 @mui/icons-material: ^5.3.1 => 5.3.1 @mui/lab: ^5.0.0-alpha.66 => 5.0.0-alpha.66 @mui/material: ^5.8.5 => 5.8.5 @mui/private-theming: 5.3.0 @mui/styled-engine: 5.3.0 @mui/styled-engine-sc: ^5.3.0 => 5.3.0 @mui/styles: ^5.3.0 => 5.3.0 @mui/system: 5.3.0 @mui/types: 7.1.0 @mui/utils: 5.3.0 @mui/x-data-grid: ^5.12.3 => 5.12.3 @mui/x-data-grid-generator: ^5.12.3 => 5.12.3 @mui/x-data-grid-premium: ^5.12.3 => 5.12.3 @mui/x-data-grid-pro: ^5.12.3 => 5.12.3 @mui/x-license-pro: 5.12.3 @types/react: 17.0.38 react: ^18.1.0 => 18.1.0 react-dom: ^18.1.0 => 18.1.0 styled-components: ^5.3.3 => 5.3.3

[cherniavskii]

Hey @jschweitzer70 The code you provided seems to work just fine - see this demo: https://codesandbox.io/s/datagridpremiumdemo-demo-mui-x-forked-79jl4q?file=/demo.tsx

Can you provide a demo reproducing the issue?

[jschweitzer70]

Hello, The sample code, exposed in the MUI-X demo, appears to contain a bug.

The problem is with the toolbar, and it was generated because the "GridToolbar" was being imported from grid-premium (it should be inside grid-pro). Make the changes and now the demo works correctly. import { GridToolbar } from '@mui/x-data-grid-pro';

import { DataGridPremium, useGridApiRef, useKeepGroupedColumnsHidden, } from '@mui/x-data-grid-premium';

[jschweitzer70]

Correction is made

[cherniavskii]

The sample code, exposed in the MUI-X demo, appears to contain a bug.

@jschweitzer70 can you link a demo that needs to be updated? I don't see it in our codebase

[jschweitzer70]

import * as React from 'react';
import { LicenseInfo } from '@mui/x-license-pro';
import Box from '@mui/material/Box';
import { GridToolbar } from '@mui/x-data-grid-pro';
import {
    DataGridPremium,
    useGridApiRef,
    useKeepGroupedColumnsHidden,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';

LicenseInfo.setLicenseKey('xxxxx');

export default function DataGridPremiumDemo() {
    const { data, loading } = useDemoData({
        dataSet: 'Commodity',
        rowLength: 100,
        visibleFields: [
            'commodity',
            'quantity',
            'filledQuantity',
            'status',
            'isFilled',
            'unitPrice',
            'unitPriceCurrency',
            'subTotal',
            'feeRate',
            'feeAmount',
            'incoTerm',
        ],
    });

    console.log(data)

    const apiRef = useGridApiRef();

    const initialState = useKeepGroupedColumnsHidden({
        apiRef,
        initialState: {
            ...data.initialState,
            rowGrouping: {
                ...data.initialState?.rowGrouping,
                model: ['commodity'],
            },
            sorting: {
                sortModel: [{ field: '__row_group_by_columns_group__', sort: 'asc' }],
            },
        },
    });

    return (
        <Box sx={{ height: 520, width: '100%' }}>
            <DataGridPremium
                {...data}
                apiRef={apiRef}
                loading={loading}
                disableSelectionOnClick
                initialState={initialState}
                components={{ Toolbar: GridToolbar }}
            />
        </Box>
    );

[cherniavskii]

@jschweitzer70 Did you take the code above from our examples? If so, can you share a link to it?

Also, importing GridToolbar from @mui/x-data-grid-pro seems to work just fine. See working demo: https://codesandbox.io/s/datagridpremiumdemo-demo-mui-x-forked-c7uwhg?file=/demo.tsx

[jschweitzer70]

@cherniavskii; It is in the Premium plan section (the source) of the grouped records table.

https://mui.com/x/react-data-grid/

[cherniavskii]

That demo looks good - all imports are from @mui/x-data-grid-premium package.

[jschweitzer70]

Dear, however, in our environment when importing the toolbar from import { GridToolbar } from '@mui/x-data-grid-premium'; throws an error.

The way to fix it is to import the toolbar from the pro component { GridToolbar } from '@mui/x-data-grid-pro'.

[cherniavskii]

Did you resolve the issue on your side? Since we cannot reproduce it, there's no action points on our side then.

[MPietraszkiewicz]

i have the same problem i am switching from grid to premium grid and i need to download toolbar from pro, only then it works.

[cherniavskii]

Hey @MPietraszkiewicz could you open a new issue with a minimal example reproducing the problem? Thank you!

[darrenbarklie]

To clarify @cherniavskii's hint above, I had imported DataGrid and not DataGridPro whilst trying to use "X" features, rendering this Uncaught Error. Aligning all imports from "@mui/x-data-grid-pro" resolved my issue.

[benjitastic]

Agreed with others. This is very confusing.

I purchased a Premium license and including the GridToolbar like this causes the error mentioned in this issue:

import {
  DataGridPremium,
  GridToolbar,
} from '@mui/x-data-grid-premium';

To solve this I need to import GridToolbar from @mui/x-data-grid-pro like this:

import { GridToolbar } from '@mui/x-data-grid-pro';
import {
  DataGridPremium,
} from '@mui/x-data-grid-premium';

This is unclear in the documentation and seems to be inconsistent or at least an exception that I cannot import something from x-data-grid-premium and instead have to import it from x-data-grid-pro even though I am using DataGridPremium.

Recommend updating docs to indicate how to use GridToolbar when using Premium (or better yet, make GridToolbar avialable in x-data-grid-premium since it seems odd that a feature is available in pro but not premium module).

[cherniavskii]

@benjitastic could you open an issue with a minimal example? I cannot reproduce it with the latest version of the Premium package - see this demo: https://codesandbox.io/s/friendly-hertz-xf4xcu?file=/demo.tsx

[benjitastic]

Thanks for the quick reply @cherniavskii. I cannot reproduce it in the sandbox. Issue is occurring inside my next js project (mira bootlab dashboard).

I just upgraded from next 12.2.0 to 12.3.0 and from React 17.0.2 to 18.2.0 and now the issue is resolved. I also upgraded a number of other packages to the latest. Strange that importing GridToolbar from @mui/x-data-grid-pro was the fix before -- I am really not sure why.

Hopefully that info is helpful for anybody else who stumbles on this issue thread.

[n0one42]

Same problem here. And this is even in their demo. Here is how to reproduce this: https://github.com/mui/material-ui/issues/38185

[diagarciaar]

I have a similar problem, worse because if I import the gridToolbar pro and premium management when I try to generate filters or export it generates an error explained in handling different datagrid versions. ` import { DataGridPremium, GridExceljsProcessInput, useGridApiRef, FilterColumnsArgs, } from '@mui/x-data-grid-premium'; import { GridToolbar } from '@mui/x-data-grid-pro';

        <DataGridPremium
          apiRef={apiRef}
          components={{ Toolbar: GridToolbar }}         

          columns={columns}  
          rows={dataFiltered}
          pageSizeOptions={[50, 100]}
          onPaginationModelChange={setPaginationModel}
          pagination
          checkboxSelection={checkboxSelection}
          paginationModel={paginationModel}
          onRowSelectionModelChange={(item: any) => {
            handleValidation(item);
          }}

        />

`

[cherniavskii]

@diagarciaar Could you open a new issue with a reproduction example? Thank you!

[oussamachah2020]

``Hello, i'm using mui pro cause i need the drag and drop functionnality plus i want to add an EditToolbar for adding a new record but i get the same error as @jschweitzer70

here is my code:

import * as React from "react";
import { DataGridPro, GridRowOrderChangeParams } from "@mui/x-data-grid-pro";
import {
  fetchEtapes,
  updateEtape,
  updateEtapeByDragAndDrop,
} from "../Loaders/etape";
import { client } from "../lib/appwrite";
import {
  GridColDef,
  GridRowModes,
  GridRowModesModel,
  GridRowsProp,
  GridToolbarContainer,
} from "@mui/x-data-grid";
import * as moment from "moment-timezone";
import { Etape } from "../types/etapeType";
import SaveIcon from "@mui/icons-material/Save";
import CancelIcon from "@mui/icons-material/Close";
import { Button } from "@mui/material";
import { randomId } from "@mui/x-data-grid-generator";
import AddIcon from "@mui/icons-material/Add";
import { GridToolbar } from "@mui/x-data-grid-pro";

function updateRowPosition(
  initialIndex: number,
  newIndex: number,
  rows: Array<Etape>
) {
  console.log(initialIndex, newIndex);

  const rowsClone = [...rows];
  const row = rowsClone.splice(initialIndex, 1)[0];
  rowsClone.splice(newIndex, 0, row);

  return rowsClone;
}

interface EditToolbarProps {
  setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void;
  setRowModesModel: (
    newModel: (oldModel: GridRowModesModel) => GridRowModesModel
  ) => void;
}

const columns: GridColDef[] = [
  { field: "titre", headerName: "Titre", flex: 1, editable: true },
  {
    field: "date_creation",
    headerName: "Date de création",
    flex: 1,
    renderCell(params) {
      return (
        <p>{`${moment(params.value).format("YYYY-MM-DD")} - ${moment(
          params.value
        ).format("HH:mm:ss")}`}</p>
      );
    },
  },
  {
    field: "derniere_modification",
    headerName: "Dérniere modification",
    flex: 1,
    renderCell(params) {
      return (
        <p>{`${moment(params.value).format("YYYY-MM-DD")} - ${moment(
          params.value
        ).format("HH:mm:ss")}`}</p>
      );
    },
  },
  {
    field: "id_code",
    headerName: "ID Code",
    flex: 1,
    editable: true,
  },
  {
    field: "rank",
    headerName: "Rank",
    flex: 1,
  },
];

export default function RowOrderingGrid() {
  const [rows, setRows] = React.useState<Etape[]>([]);
  const [loading, setLoading] = React.useState(false);
  const [rowModesModel, setRowModesModel] = React.useState<GridRowModesModel>(
    {}
  );

  function EditToolbar(props: EditToolbarProps) {
    const { setRows, setRowModesModel } = props;

    const handleClick = () => {
      const id = randomId();
      setRows((oldRows) => [
        ...oldRows,
        { id, titre: "", id_code: "", isNew: true },
      ]);
      setRowModesModel((oldModel) => ({
        ...oldModel,
        [id]: { mode: GridRowModes.Edit, fieldToFocus: "titre" },
      }));
    };

    return (
      <GridToolbarContainer>
        <Button color="primary" startIcon={<AddIcon />} onClick={handleClick}>
          Add record
        </Button>
      </GridToolbarContainer>
    );
  }

  const handleRowEditStop = (params: any, event: any) => {
    console.log(params, event);
    updateEtape(params.field, event.target.value, params.id);
  };

  const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
    setRowModesModel(newRowModesModel);
  };

  const handleEditClick = (id: string) => () => {
    console.log(id);
    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
  };

  const handleSaveClick = (id: string) => () => {
    console.log(id);
    setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
  };

  const handleCancelClick = (id: string) => () => {
    setRowModesModel({
      ...rowModesModel,
      [id]: { mode: GridRowModes.View, ignoreModifications: true },
    });

    const editedRow = rows.find((row) => row.$id === id);
    if (editedRow!.isNew) {
      setRows(rows.filter((row) => row.$id !== id));
    }
  };

  function loadFromBackend() {
    fetchEtapes()
      .then((res) => {
        setRows(res.sort((a, b) => a.rank - b.rank));
      })
      .catch((err) => {
        console.error(err);
      });
  }

  React.useEffect(() => {
    loadFromBackend();
  }, []);

  React.useEffect(() => {
    const unsubscribe = client.subscribe(
      "databases.default-db.collections.etape.documents",
      (response) => {
        if (response) {
          loadFromBackend();
        }
      }
    );

    return () => {
      unsubscribe();
    };
  }, [rows]);

  const handleRowOrderChange = async (params: GridRowOrderChangeParams) => {
    setLoading(true);
    const { oldIndex, targetIndex } = params;

    const newRows = updateRowPosition(oldIndex, targetIndex, rows);

    for (let i = 0; i <= newRows.length - 1; i++) {
      try {
        await updateEtapeByDragAndDrop({ ...newRows[i], rank: i + 1 });
      } catch (error) {
        console.error(error);
      }
    }

    setLoading(false);
  };

  return (
    <div style={{ height: 500, width: "100%" }}>
      <DataGridPro
        loading={loading}
        rows={rows}
        columns={columns}
        rowReordering
        editMode="row"
        rowModesModel={rowModesModel}
        onRowModesModelChange={handleRowModesModelChange}
        onRowEditStop={handleRowEditStop}
        getRowId={(row) => row.$id}
        pagination
        pageSizeOptions={[5, 10]}
        onRowOrderChange={handleRowOrderChange}
        slots={{
          toolbar: EditToolbar,
        }}
        slotProps={{
          toolbar: { setRows, setRowModesModel },
        }}
      />
    </div>
  );
}