Blazor DataGrid Example - Show or Hide Columns
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 |
This sample demonstrates the DataGrid dynamic column visibility feature.
The Blazor DataGrid supports dynamic column visibility management through dedicated methods. Toggle column visibility by using the ShowColumnAsync and HideColumnAsync methods.
In this demo:
- Click switch buttons to toggle column visibility dynamically
- Columns are shown or hidden based on their HeaderText value
- The visibility state changes immediately in the grid
To hide a column during initial DataGrid rendering, set the Visible property to false in the column definition.
This feature is useful for providing users with customizable grid views, allowing them to focus on the columns most relevant to their tasks.
For more detailed information about showing and hiding columns, refer to the show or hide columns documentation.