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.

username
age
desk
@MUI
38
D-546
@MUI-X
25
D-042

Rows per page:

1–2 of 2

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,
      },
    },
  }}
/>
Desk
Commodity
Trader Name
Trader Email
Quantity
Filled Quantity
Is Filled
Unit Price
D-7497
Soybean Oil
Manuel Leonard
67,677
3.729 %
no
8.93
D-278
Cotton No.2
Ruth Byrd
69,290
10.67 %
no
31.19
D-8320
Soybean Oil
Georgie Ferguson
44,253
59.6 %
no
85.78
D-550
Milk
Cordelia Park
11,890
88.41 %
no
77.07
D-6266
Oats
Georgie Bennett
29,591
11.602 %
no
84.7
D-6630
Robusta coffee
Marc Price
30,720
64.411 %
no
14.46
D-4136
Frozen Concentrated Orange Juice
Winifred Tucker
28,254
74.241 %
no
76.05

Rows per page:

1–20 of 20

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,
  }}
/>
Desk
Commodity
Trader Name
Trader Email
Quantity
Filled Quantity
Is Filled
Unit Price
D-336
Soybeans
Isabella Houston
39,857
99.24 %
no
2.6
D-9740
Cocoa
Lettie Rose
47,570
51.741 %
no
5.91
D-4029
Sugar No.11
Erik White
17,721
44.309 %
no
71.27
D-1130
Frozen Concentrated Orange Juice
Glen Francis
87,596
2.351 %
no
78.67
D-809
Sugar No.11
Bill Hale
37,848
86.269 %
no
73.81
D-6739
Soybeans
Martin Becker
76,913
79.96 %
no
14.68
D-1216
Sugar No.14
Isabella Dixon
59,361
2.561 %
no
32.11

Rows per page:

1–20 of 20

Press Enter to start editing

Column visibility panel

The column visibility panel can be opened through the grid toolbar. To enable it, you need to add Toolbar: GridToolbar to the grid components prop.

The user can then choose which columns are visible using the Columns button.

Desk
Commodity
Trader Name
Trader Email
Quantity
Filled Quantity
Is Filled
Status
D-8181
Soybeans
Fanny Peters
33,106
24.449 %
no
Rejected
D-7393
Adzuki bean
Henrietta Lowe
57,777
82.341 %
no
Partially Filled
D-2499
Soybeans
Ada Schwartz
19,552
6.47 %
no
Partially Filled
D-6336
Corn
Alexander Myers
77,220
61.3 %
no
Open
D-1702
Wheat
Donald Lambert
69,973
25.9 %
no
Rejected
D-5008
Sugar No.11
Curtis Schwartz
49,797
56.1 %
no
Open
D-1984
Rough Rice
Lucile Carpenter
1,999
68.334 %
no
Rejected
D-4175
Soybean Oil
Allie Boyd
40,045
22.23 %
no
Open

Rows per page:

1–10 of 10

Press Enter to start editing

Column hide property (deprecated)

Before the introduction of the columnVisibilityModel, the columns could be hidden by setting the hide property in GridColDef to true. This method still works but will be removed on the next major release.

username
desk
@MUI
D-546
@MUI-X
D-042

Rows per page:

1–2 of 2

Press Enter to start editing