[question] Data Grid checkbox column customization

[HyoilKim]

Order ID

67616

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

First, I'm not using the latest version. Really Sorry

1. I'd like to add checkbox in a specific column with DataGridPremium. I've read Custom checkbox column and applied. However, I got an error message. FYI, normal DataGrid works for me

2. Can I customize the checkbox column? I'd like to add text beside the checkbox. It seems that headerName and field don't work

useGridApiContext.js:6 Uncaught Error: MUI: Could not find the data grid context.
It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.
This can also happen if you are bundling multiple versions of the data grid.
    at useGridApiContext (useGridApiContext.js:6:1)
    at GridHeaderCheckbox (GridHeaderCheckbox.js:29:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at updateForwardRef (react-dom.development.js:16816:1)
    at beginWork (react-dom.development.js:18645:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)
    at performUnitOfWork (react-dom.development.js:22154:1)

'import * as React from 'react';
import { DataGridPremium, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid-premium'
import { useDemoData } from '@mui/x-data-grid-generator';

export default function CheckboxSelectionCustom() {
 ...
const columns = useMemo(
      () => {
            ...GRID_CHECKBOX_SELECTION_COL_DEF,
            // field: 'test',
            // headerName: 'test',
            width: 100,
          }])

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPremium 
            checkboxSelection 
            columns={columns}
            rows={toJS(rows)} />
    </div>
  );
}```

### Your environment 🌎

<details>
  <summary>@mui/envinfo@2.0.9 </summary>

System: OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa) Binaries: Node: 16.15.1 - /usr/local/bin/node Yarn: 1.22.19 - /usr/bin/yarn npm: 8.17.0 - /usr/local/bin/npm Browsers: Chrome: 114.0.5735.106 npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.81 @mui/icons-material: ^5.8.0 => 5.8.0 @mui/material: ^5.8.0 => 5.8.0 @mui/private-theming: 5.8.0 @mui/styled-engine: 5.8.0 @mui/system: 5.8.0 @mui/types: 7.1.3 @mui/utils: 5.13.1 @mui/x-data-grid: 5.8.0 => 5.8.0 @mui/x-data-grid-generator: ^6.6.0 => 6.6.0 @mui/x-data-grid-premium: ^6.6.0 => 6.6.0 @mui/x-data-grid-pro: 6.6.0 @mui/x-date-pickers: ^5.0.11 => 5.0.12 @mui/x-license-pro: ^6.0.4 => 6.0.4 @types/react: 17.0.35 => 17.0.35 react: ^16.10.2 => 16.14.0 react-dom: ^16.10.2 => 16.14.0 typescript: ^4.4.4 => 4.4.4

</details>

[DanailH]

He @HyoilKim thanks for raising this. Unfortunately, we would need a bit more information before we can help. First, the link you provided - Custom checkbox column - doesn't work so I'm not sure what you are trying to apply. Second - the default checkbox column type is internal and you can't alter it. You can customize the cell of the checkbox column itself tho.

[HyoilKim]

Hi @DanailH

I've reproduced my error in here. Could you look at it?

FYI, I've updated the link

[HyoilKim]

[HyoilKim]

When I update @mui/x-data-grid to the latest one, the error disappears. However. it's not easy to update because of backward compatibility. Is there any workaround?

{
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@mui/icons-material": "latest",
    "@mui/material": "latest",
    "@mui/x-data-grid": "latest",
    "@mui/x-data-grid-generator": "^6.6.0",
    "@mui/x-data-grid-premium": "^6.6.0",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "react": "latest",
    "react-dom": "latest",
    "typescript": "latest"
  },

[HyoilKim]

this works as well

"@mui/x-data-grid": "^6.6.0",
"@mui/x-data-grid-generator": "^6.6.0",
"@mui/x-data-grid-premium": "^6.6.0",

[HyoilKim]

It doesn't work with @mui/x-data-grid": "^5.8.0"

[MBilalShafi]

Did you update the version for all the grid packages? I tried setting these versions for the respective packages and the error seems to go away:

"@mui/x-data-grid": "^5.8.0",
"@mui/x-data-grid-generator": "^5.8.0",
"@mui/x-data-grid-premium": "^5.8.0",

Check out in this fork of your example.

Does that resolve your concern?

[HyoilKim]

It's weird. When I downgraded them, it didn't work. However, when I apply those versions to my code, the issue still exists. So, I've changed react and react-dom versions of the fork to make them idential with my code, and another issue appears again. Is it related to the original issue?

[HyoilKim]

I am also considering upgrading the x-data-grid version

(+There are too many conflicts...)

[HyoilKim]

@MBilalShafi Gentle reminder :)

[HyoilKim]

When I change "react": "^16.10.2" and "react-dom": "^17.10.2" to the latest version, the issue is resolved

[MBilalShafi]

So, I've changed react and react-dom versions of the fork to make them idential with my code, and another issue appears again. Is it related to the original issue?

No, it's related to the createRoot function not available in React v16 as it was introduced in a later React version. Did you consider using ReactDOM.render instead?

It's weird. When I downgraded them, it didn't work.

What error did you face? Was it the similar one or a different one? Can you try reproducing the error in the codesandbox fork and share here?

[HyoilKim]

Thank you for the reply. Even though the issue disappears in the codesandbox for now, my code still has the issue. I'm going to try to reproduce

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.