-1

I have multiple column to show in a datagrid which but all of them can't fit into the screen so I want to show some column by default and other other but user can toggle them true through Column option field in toolbar: GridToolbar filters.

I am using react for so I even tried the return column approach where I had my columns in a usestate and I have a list of default column array so user I can use to filter out the columns but in this approach the the options in the column are the once which are already displaced so user do not get the option to toggle the hidden one.

The default column option should be like this but if I try to do it using my approach the column option is

enter image description here

enter image description here

Which is not the thing that I want!

Pinak faldu
  • 79
  • 1
  • 7

1 Answers1

1

You can use the columnVisibilityModel to control which columns are shown at the start:

<DataGrid
    initialState={{
        columns: {
            columnVisibilityModel: {
                // Hide columns blog and tiktok, the other columns will remain visible
                blog: false,
                tiktok: false,
             },
        },
    }}
/>

See the reference for more details: https://mui.com/x/react-data-grid/column-visibility/#initialize-the-visible-columns

Bilal Shafi
  • 166
  • 1
  • 10