Blazor DataGrid Example - Column Chooser Template Customization
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.