When I try to use useKeepGroupedColumnsHidden in MUI's DataGrid, it is throwing the error props.apiRef.current.subscribeEvent is not a function

Question

When I add the following code snippet to my react component:

  const apiRef = useGridApiRef();
  const initialState = useKeepGroupedColumnsHidden({
    apiRef,
    initialState: {
      rowGrouping: {
        model: ['datetime'],
      },
    },
  });

it gives the error props.apiRef.current.subscribeEvent is not a function

This github discussion says to fix the issue is to use DataGrid Pro/Premium, but am indeed importing the objects from the premium import:

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

codesandbox: https://codesandbox.io/s/festive-satoshi-fmszwu?file=/demo.tsx

score 0 · Answer 1 · answered Apr 03 '23 at 17:23

I figured it out, I was not passing in apiRef to the DataGridPremium component

Before (not working, throwing props.apiRef.current.subscribeEvent is not a function):

  <DataGridPremium
    rows={rows}
    columns={columns}
    initialState={initialState}
  />

After (working):

  <DataGridPremium
    rows={rows}
    columns={columns}
    initialState={initialState}
    apiRef={apiRef}
  />

When I try to use useKeepGroupedColumnsHidden in MUI's DataGrid, it is throwing the error props.apiRef.current.subscribeEvent is not a function

1 Answers1