Blazor DataGrid Example - Column Chooser Feature Configuration
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
This sample demonstrates the DataGrid column chooser feature, which allows dynamic management of column visibility.
The DataGrid columns can be dynamically shown or hidden using the column chooser functionality. To enable this feature, set the ShowColumnChooser property to true. To prevent specific columns from appearing in the column chooser, set the ShowInColumnChooser property to false in the column definition.
In this demo, click the column chooser icon in the toolbar to open the column chooser menu. Toggle the checkbox for each column to show or hide it in the DataGrid.
For more detailed information about the column chooser feature, refer to the column chooser documentation.