[data grid] Row grouping not working properly and duplicate the grouping column

[igortas]

Steps to reproduce

Link to live example: (required)

https://codesandbox.io/p/sandbox/nostalgic-smoke-z6gy5c?file=%2Fsrc%2FDemo.tsx%3A18%2C6

Steps:

1. Try to run the example
2. added two conditional statements as written in the docs for opt out but not working properly, is duplicating the grouping column

Current behavior

I'm trying to apply grouping, no matter if is with rowGroupingModel prop or per column menu option...
The grouping column is also presentend as duplicate, for the nested children rows

This example is not working properly, and even having custom column or not, I'm having duplicate column

https://v6.mui.com/x/react-data-grid/row-grouping/#grouping-rows-with-custom-cell-renderer

Expected behavior

I'm expecting duplicate row to be hidden/deleted, running this code

 if (
      params.rowNode.type === "group" &&
      params.field === params.rowNode.groupingField
    ) {
      return "";
    }

Context

Grouping per key, nested structure, parent-children relation between items in the table.

Your environment

  System:
    OS: Linux 5.15 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat)
  Binaries:
    Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v22.6.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/icons-material: ^5.16.7 => 5.16.7 
    @mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.173 
    @mui/material: ^5.16.7 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.7 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @mui/x-data-grid:  6.20.4 
    @mui/x-data-grid-premium: ~6.20.4 => 6.20.4 
    @mui/x-data-grid-pro:  6.20.4 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @mui/x-tree-view: ~6.17.0 => 6.17.0 
    @types/react: ^18.3.7 => 18.3.7 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    styled-components:  5.3.11 
    typescript: ^5.5.4 => 5.5.4 

Search keywords: grid, grouping, row

[michelengelen]

Why would you expect the column to be hidden when returning an empty string from the renderCell function? This simply just renders an empty cell.

If you want to hide the column which the rows are being grouped by follow this example: Hide the grouped columns

It utilizes the useKeepGroupedColumnsHidden hook to hide columns that are used as grouping columns!

Since this is expected behavior and not a bug i'll close it, but feel free to comment here or open a new issue if you encounter problems with this!

[igortas]

@michelengelen
This hook was not working for me, because apiRef was undefined, but column visibility model was working and it fixed my problem.

I have one more question, is it possible to preserve pinned columns for the grouping row, or far better, any way I can make the grouping row as single row table?