Blazor DataGrid Example - Show or Hide Columns
This sample demonstrates DataGrid's dynamic show or hide columns feature. Toggle the visibility of columns by clicking the switch button.
Click the switch to toggle visibility
Order ID | Customer ID | Order Date | Freight |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 |
| 10002 | ANATR | 4/4/1990 | $3.30 |
| 10003 | ANTON | 11/30/1957 | $4.30 |
| 10004 | BLONP | 10/22/1930 | $5.30 |
| 10005 | BOLID | 2/18/1953 | $6.30 |
| 10006 | ALFKI | 5/15/1991 | $4.60 |
| 10007 | ANATR | 4/4/1990 | $6.60 |
| 10008 | ANTON | 11/30/1957 | $8.60 |
| 10009 | BLONP | 10/22/1930 | $10.60 |
| 10010 | BOLID | 2/18/1953 | $12.60 |
| 10011 | ALFKI | 5/15/1991 | $6.90 |
| 10012 | ANATR | 4/4/1990 | $9.90 |
The Blazor DataGrid column can be dynamically shown or hidden by using the DataGrid's ShowColumnAsync and HideColumnAsync methods.
The columns in this demo can be shown or hidden by clicking the Switch buttons to toggle visibility. The visibility of the column is also toggled based on the HeaderText value.
The visibility of a column is specified by the Visible property. Set the Visible property to false to hide a column during the initial rendering.
More information about the Show and Hide columns feature can be found in this documentation section.