Blazor DataGrid Example - Column Chooser Template
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
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
This sample demonstrates the DataGrid column chooser template feature for customizing the column selection dialog.
The column chooser template allows you to customize the appearance and content of the column chooser dialog. To enable the column chooser, set the ShowColumnChooser property to true.
In this demo, the GridColumnChooserSettings component's Template property customizes the main content of the column chooser dialog, and the FooterTemplate property customizes the footer section.
For more detailed information about the column chooser template feature, refer to the column chooser documentation.
Looking for the full Blazor DataGrid component overview, features, pricing, and documentation? Visit our Blazor DataGrid component page.