Example of Column Chooser Template in Blazor DataGrid Component
The DataGrid column chooser template feature is demonstrated in this sample.
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
Order Details
Order ID
Order Date
Ship Details
Freight
Shipped Date
Ship Country
Ship City
The column chooser feature allows the Blazor DataGrid columns to be shown/hidden dynamically. Set the ShowColumnChooser property as true to enable the column chooser.
In this demo, the GridColumnChooserSettings component's Template and FooterTemplate are used to customize the content and footer of the column chooser dialog.
More information about the Column chooser template feature can be found in this documentation section.