[data grid] The user should not hide all columns; at least one column should be displayed

[vadaviya638]

Steps to reproduce

No response

Current behavior

• When the user clicks on the 'Hide Column' option, the table becomes blank, and the user cannot see any data. If the user wants to view or modify the table data, they need to refresh the page, after which the table data will be displayed

screen-capture.48.webm

• you already did in other props , i mention below

screen-capture.49.webm

Expected behavior

at least one column display

Context

No response

Your environment

No response

Search keywords: datagrid

[michelengelen]

Thanks @vadaviya638 for opening an issue for this problem.
I could confirm that the grid will enter a state where the user has no means to show columns again, so I would consider this a bug.

I'll add this to the board!

[mparsakia]

Hi @michelengelen, thanks for updating this issue. Is there a guide on extending or overriding the behavior of the built-in MUI Columns Menu we can use as a workaround for now? Ideally we could clone the built-in one MUI uses and just add some custom logic.

[michelengelen]

Hey @mparsakia
This example code would enable you to build your custom columns management panel:

import * as React from 'react';
import { DataGrid, GridPanelWrapper, GridSlots } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const CustomColumnsPanel: GridSlots['columnsPanel'] = (props) => {
  console.log(props);
  return <GridPanelWrapper {...props}>COLUMNS MANAGEMENT</GridPanelWrapper>;
};

export default function CustomToolbarGrid() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        slots={{
          columnsPanel: CustomColumnsPanel,
        }}
      />
    </div>
  );
}

But this would mean a ton of custom implementation.
For access to the gridApi you would need to add to the custom component:

const apiRef = useGridApiContext();

[mparsakia]

Would be a way to just import (or clone) and modify the existing MUI Columns menu while we wait on a fix? If possible, it shouldn't be too hard to shoe in some checks if trying to hide the last existing column.

[michelengelen]

As mentioned in #14395 it would be a good idea to show an overlay like we do for having no rows.

[mm105]

any updates regarding this issue?

[manumena]

Is there some docs where we can see how the GridPanelWrapper should be created and what should it contain? I can make a list of column names with checkboxes but how would they interact with the DataGrid?