[data grid] Unexpected Application Error in GridDetailPanelToggleCell about mui-x HOT 8 OPEN

We tried to create a demo... The issue doesn't show in codesandbox though, probably for the same reason it doesn't show in our development environment; it only shows with a production build/on our test machines. But here is the codesandbox that was created from altering the MUI demo code sandbox for the detail panel:
https://codesandbox.io/p/sandbox/competent-breeze-w4pr2z?file=%2Fsrc%2FDemo.js%3A73%2C12

It is a simple example to show what we are trying to do... in our scenario, if there is none of a particular type of item in the list, then we do not want to show the column for the expansion panel - shown in the demo as a check for a particular name:
getDetailPanelContent={hasName ? getDetailPanelContent : null}
so the value for the getDetailPanelContent prop is null if there are none of a particular item in the list...

Is there is different/recommended way to do this?

from mui-x.

Hi @conerye
This looks like a race condition.
Can you try upgrading the Data Grid to the latest v6 release? Can you still reproduce the issue?

from mui-x.

Also, could you create a demo that would mimic your Data Grid setup? Thanks!

from mui-x.

I upgraded to version 6.19.9 and tried this scenario on our test environment again... Now every time I refresh there's no option for a detail panel expansion and clicking the row gives an app error. I was seeing this occasionally before but it's on every refresh post upgrade.

from mui-x.

The way you pass in the getter function is slightly incorrect.
The function has to be called on every row, so you would be returning your detail panel.

Try refactoring to include the check and return null if the check fails:

const getDetailPanelContent = React.useCallback(
  ({ row }) => {
    if (row.customer === "Matheus") return null
    return <DetailPanelContent row={row} />
  },
  [],
);

... in the data grid props:

<DataGridPro
  columns={columns}
  rows={rows}
  getDetailPanelHeight={getDetailPanelHeight}
  getDetailPanelContent={getDetailPanelContent}
/>

That way you can ensure that the function is always callable and returns the desired result.
Like this the button is also disabled when no content is available.

Does that work for you?

from mui-x.

@conerye

here is the codesandbox that was created from altering the MUI demo code sandbox for the detail panel:
codesandbox.io/p/sandbox/competent-breeze-w4pr2z?file=%2Fsrc%2FDemo.js%3A73%2C12

I downloaded the sandbox and ran it locally in production mode (npm run build && npx server -s build) – I can't reproduce the issue.
Is the setup close to what you do? Do you also render a data grid inside the detail panel?

from mui-x.

Changing our code, as michelengelen suggested, so that getDetailPanelContent always has a callable function and then refactoring the function to include the check and return null if the check fails, does work and we are not able to reproduce the Unexpected Application error with the code this way. The difference is that now the detail panel expansion column shows even when there are no rows in the table that meet the criteria for the detail panel expansion -> all rows have the expansion icon disabled. So, the Unexpected Application problem is resolved, BUT we would like to know if there is a way to hide the detail panel expansion column in this scenario (no rows will ever have the detail panel)?

from mui-x.

@conerye ... you would need to have an additional check for that:
Basically the same as before, but when the condition is falsey the value for getDetailPanelContent needs to be null/undefined:

const needsDetailPanel = rows.some((row) => row.customer === 'Michel');

return (
  <Box sx={{ width: '100%', height: 400 }}>
    <DataGridPro
      columns={columns}
      rows={rows}
      getDetailPanelHeight={getDetailPanelHeight}
      getDetailPanelContent={needsDetailPanel ? getDetailPanelContent : undefined}
    />
  </Box>
);

That way the grid will know that there is not detail panel and does not render the toggle

from mui-x.