Example of Column Chooser in Blazor DataGrid Component
The DataGrid with column chooser feature is demonstrated in this sample. To open the column chooser, click the column chooser icon in the toolbar, and then select columns to hide or show from the checkbox list.
Order ID | Customer ID | Order Date | Freight | Shipped Date | Ship Country | Ship City |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 | 7/16/1996 | Denmark | Berlin |
| 10002 | ANATR | 4/4/1990 | $3.30 | 9/11/1996 | Brazil | Madrid |
| 10003 | ANTON | 11/30/1957 | $4.30 | 10/7/1996 | Germany | Cholchester |
| 10004 | BLONP | 10/22/1930 | $5.30 | 12/30/1996 | Austria | Marseille |
| 10005 | BOLID | 2/18/1953 | $6.30 | 12/3/1997 | Switzerland | Tsawassen |
| 10006 | ALFKI | 5/15/1991 | $4.60 | 7/16/1996 | Denmark | Berlin |
| 10007 | ANATR | 4/4/1990 | $6.60 | 9/11/1996 | Brazil | Madrid |
| 10008 | ANTON | 11/30/1957 | $8.60 | 10/7/1996 | Germany | Cholchester |
| 10009 | BLONP | 10/22/1930 | $10.60 | 12/30/1996 | Austria | Marseille |
| 10010 | BOLID | 2/18/1953 | $12.60 | 12/3/1997 | Switzerland | Tsawassen |
| 10011 | ALFKI | 5/15/1991 | $6.90 | 7/16/1996 | Denmark | Berlin |
| 10012 | ANATR | 4/4/1990 | $9.90 | 9/11/1996 | Brazil | Madrid |
Choose Column
- Select All
- Order ID
- Customer ID
- Order Date
- Freight
- Shipped Date
- Ship Country
- Ship City
The DataGrid columns can be dynamically shown/hidden by using the column chooser functionality. Set the ShowColumnChooser property to true to enable the column chooser. You can also prevent the display of a column in column chooser by setting ShowInColumnChooser to false in the columns definition.
When the user clicks the column chooser icon in the toolbar in this demo, the column chooser menu appears. By changing the state of the checkbox, the user can show or hide the columns.
More information about the Column chooser feature can be found in this documentation section.