[data grid] Duplicating columns when grouping.

[RomanMain]

[data grid] Duplicating columns when grouping.

[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,
    },
  }}
/>

[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.

[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.