Skip to content
+

Data Grid - Column visibility

Define which columns are visible.

By default, all the columns are visible. The column's visibility can be switched through the user interface in two ways:

  • By opening the column menu and clicking the Hide menu item.
  • By clicking the Columns menu and toggling the columns to show or hide.

You can prevent the user from hiding a column through the user interface by setting the hideable in GridColDef to false.

In the following demo, the "username" column cannot be hidden.

Press Enter to start editing

Initialize the visible columns

To initialize the visible columns without controlling them, provide the model to the initialState prop.

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

Controlled visible columns

Use the columnVisibilityModel prop to control the visible columns. You can use the onColumnVisibilityModelChange prop to listen to the changes to the visible columns and update the prop accordingly.

<DataGrid
  columnVisibilityModel={{
    // Hide columns status and traderName, the other columns will remain visible
    status: false,
    traderName: false,
  }}
/>
Press Enter to start editing

Column visibility panel

The column visibility panel allows the user to control which columns are visible in the Data Grid.

The panel can be opened by:

  • Clicking the Columns button in the toolbar.
  • Clicking the Manage columns button in the column menu.
Press Enter to start editing

Disable the column visibility panel

Sometimes, the intention is to disable the columns panel or control the visible columns programmatically based on the application state. To disable the column visibility panel, set the prop disableColumnSelector={true} and use the columnVisibilityModel prop to control the visible columns.

<DataGrid disableColumnSelector columnVisibilityModel={columnVisibilityModel} />

In the following demo, the columns panel is disabled, and access to columns id, quantity, and filledQuantity is only allowed for the Admin type user.

Customize the list of columns in columns management

To show or hide specific columns in the column visibility panel, use the slotProps.columnsManagement.getTogglableColumns prop. It should return an array of column field names.

// stop `id`, `__row_group_by_columns_group__`, and `status` columns to be togglable
const hiddenFields = ['id', '__row_group_by_columns_group__', 'status'];

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

<DataGrid
  slots={{
    toolbar: GridToolbar,
  }}
  slotProps={{
    columnsManagement: {
      getTogglableColumns,
    },
  }}
/>;
Press Enter to start editing

To disable Show/Hide All checkbox or Reset button in the footer of the columns management component, pass disableShowHideToggle or disableResetButton to slotProps.columnsManagement.

<DataGrid
  slots={{
    toolbar: GridToolbar,
  }}
  slotProps={{
    columnsManagement: {
      disableShowHideToggle: true,
      disableResetButton: true,
    },
  }}
/>

Customize action buttons behavior when search is active

By default, the Show/Hide All checkbox toggles the visibility of all columns, including the ones that are not visible in the current search results.

To only toggle the visibility of the columns that are present in the current search results, pass toggleAllMode: 'filteredOnly' to slotProps.columnsManagement.

<DataGrid
  slotProps={{
    columnsManagement: {
      toggleAllMode: 'filteredOnly',
    },
  }}
/>
Press Enter to start editing

API