[data grid] Duplicating columns when grouping.

[RomanMain]

The problem in depth

When grouping a specific column, we have automatically generated new columns that are added to the filtering list and the “manage columns” section. Their names are completely duplicated. Is there some option to prevent these duplicate columns from appearing in these lists?

https://stackblitz.com/run?file=Demo.js

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: grouping, duplicate columns
Order ID: 82865

[michelengelen]

Hey @RomanMain and thanks for raising this issue.
It is indeed not entirely intuitive and I guess even a bug, right @MBilalShafi ?

For a workaround (and maybe for additional filtering if needed) you can use the slotProps.filterPanel.filterFormProps.filterColumns method:

const filterColumns = ({ columns }: FilterColumnsArgs) => {
  return columns.filter((column) => column.type !== 'custom').map((column) => column.field);
};

...

<DataGridPremium
  {...data}
  apiRef={apiRef}
  initialState={initialState}
  onRowSelectionModelChange={handleRowSelectionModelChange}
  rowSelectionModel={rowSelectionModel}
  checkboxSelection
  hideFooter
  slotProps={{
    filterPanel: {
      filterFormProps: {
        filterColumns,
      },
    },
  }}
/>

In this specific case we can just filter by column.type !== 'custom' since those will filter all auto generated columns by default.

I will still put this on our board to see if the current behavior is intended.
If you need additional assistance please feel free to reach out! Thanks again! 🙇🏼

[RomanMain]

Thanks for the quick response @michelengelen! This works for the filter list, but how can I remove this in the "Manage columns" panel as well? I can’t see a slotProps similar to this in the documentation.

[michelengelen]

Thanks for the quick response @michelengelen! This works for the filter list, but how can I remove this in the "Manage columns" panel as well? I can’t see a slotProps similar to this in the documentation.

No problem ... I did forget to include that.
There actually is a recipe that shows how to do this in the docs: Customize the list of columns in panel

Important

The slotProp got changed in v7
v6 => slotProps.columnsPanel.getTogglableColumns
v7 => slotProps.columnsManagement.getTogglableColumns

TLDR;

const getTogglableColumns = (columns: GridColDef[]) => {
  return columns.filter((column) => column.type !== 'custom').map((column) => column.field);
};

...

<DataGridPremium
  {...data}
  apiRef={apiRef}
  initialState={initialState}
  onRowSelectionModelChange={handleRowSelectionModelChange}
  rowSelectionModel={rowSelectionModel}
  checkboxSelection
  hideFooter
  slotProps={{
    filterPanel: {
      filterFormProps: {
        filterColumns,
      },
    },
    columnsManagement: {
      getTogglableColumns,
    },
  }}
/>

[MBilalShafi]

Hey @RomanMain,

As @michelengelen mentioned, the Customize the list of columns in panel seems exactly what you are looking for. The demo depicts how to hide the status column, and the grouped column from the columns panel (v6) and columns management panel (v7).

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.