[data grid] The `column groups` do not appear in the data grid of my Next.js application

[b3ernardo]

Steps to reproduce

Link to live example: https://codesandbox.io/s/qfq3v9?file=/src/Demo.tsx

Steps:

1. Create a Next.js application (I'm using Next.js 14)
2. Copy and paste this code (it is the official example here: https://mui.com/x/react-data-grid/column-groups/, I just added 'use client')

   
   'use client'

import * as React from 'react'

import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid'

const columns: GridColDef[] = [ { field: 'id', headerName: 'ID', width: 90 }, { field: 'firstName', headerName: 'First name', width: 150 }, { field: 'lastName', headerName: 'Last name', width: 150 }, { field: 'age', headerName: 'Age', type: 'number', width: 110 } ]

const rows = [ { age: 14, firstName: 'Jon', id: 1, lastName: 'Snow' }, { age: 31, firstName: 'Cersei', id: 2, lastName: 'Lannister' }, { age: 31, firstName: 'Jaime', id: 3, lastName: 'Lannister' }, { age: 11, firstName: 'Arya', id: 4, lastName: 'Stark' }, { age: null, firstName: 'Daenerys', id: 5, lastName: 'Targaryen' }, { age: 150, firstName: null, id: 6, lastName: 'Melisandre' }, { age: 44, firstName: 'Ferrara', id: 7, lastName: 'Clifford' }, { age: 36, firstName: 'Rossini', id: 8, lastName: 'Frances' }, { age: 65, firstName: 'Harvey', id: 9, lastName: 'Roxie' } ]

const columnGroupingModel: GridColumnGroupingModel = [ { children: [{ field: 'id' }], description: '', groupId: 'Internal' }, { children: [ { children: [{ field: 'lastName' }, { field: 'firstName' }], groupId: 'Full name' }, { field: 'age' } ], groupId: 'Basic info' } ]

export default function Page() { return ( <div style={{ height: 400, width: '100%' }}> <DataGrid checkboxSelection disableRowSelectionOnClick columnGroupingModel={columnGroupingModel} columns={columns} rows={rows} />

[michelengelen]

Hey @b3ernardo I did just check it on next.js (v14) myself and does work as intended:

Code:

'use client'

import * as React from 'react'

import { DataGrid, GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid'

const columns: GridColDef[] = [
    { field: 'id', headerName: 'ID', width: 90 },
    {
        field: 'firstName',
        headerName: 'First name',
        width: 150
    },
    {
        field: 'lastName',
        headerName: 'Last name',
        width: 150
    },
    {
        field: 'age',
        headerName: 'Age',
        type: 'number',
        width: 110
    }
]

const rows = [
    { age: 14, firstName: 'Jon', id: 1, lastName: 'Snow' },
    { age: 31, firstName: 'Cersei', id: 2, lastName: 'Lannister' },
    { age: 31, firstName: 'Jaime', id: 3, lastName: 'Lannister' },
    { age: 11, firstName: 'Arya', id: 4, lastName: 'Stark' },
    { age: null, firstName: 'Daenerys', id: 5, lastName: 'Targaryen' },
    { age: 150, firstName: null, id: 6, lastName: 'Melisandre' },
    { age: 44, firstName: 'Ferrara', id: 7, lastName: 'Clifford' },
    { age: 36, firstName: 'Rossini', id: 8, lastName: 'Frances' },
    { age: 65, firstName: 'Harvey', id: 9, lastName: 'Roxie' }
]

const columnGroupingModel: GridColumnGroupingModel = [
    {
        children: [{ field: 'id' }],
        description: '',
        groupId: 'Internal'
    },
    {
        children: [
            {
                children: [{ field: 'lastName' }, { field: 'firstName' }],
                groupId: 'Full name'
            },
            { field: 'age' }
        ],
        groupId: 'Basic info'
    }
]

export default function Page() {
    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid
                checkboxSelection
                disableRowSelectionOnClick
                columnGroupingModel={columnGroupingModel}
                columns={columns}
                rows={rows}
            />
        </div>
    )
}

❯ cat package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@mui/material": "^5.15.15",
    "@mui/x-data-grid": "^7.5.1",
    "@mui/x-data-grid-generator": "^7.5.1",
    "@mui/x-data-grid-premium": "^7.5.1",
    "@mui/x-data-grid-pro": "^7.5.1",
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "typescript": "^5"
  }
}

as you can see here it does show the groups just fine:

Could you please double-check your implementation?

[b3ernardo]

Thanks for your comment. I tested it by creating a new Next.js project, and it worked. But going back to my original project, it doesn't work. I updated the libraries, and it still didn't work. I'll need to spend more time figuring out what's going on.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@b3ernardo: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.