Blazor DataGrid Example - Stacked Headers
Order ID | Order Details | Ship Details | ||
|---|---|---|---|---|
Order Date | Freight | Shipped Date | Ship Country | |
| 10001 | 5/15/1991 | $2.30 | 7/16/1996 | Denmark |
| 10002 | 4/4/1990 | $3.30 | 9/11/1996 | Brazil |
| 10003 | 11/30/1957 | $4.30 | 10/7/1996 | Germany |
| 10004 | 10/22/1930 | $5.30 | 12/30/1996 | Austria |
| 10005 | 2/18/1953 | $6.30 | 12/3/1997 | Switzerland |
| 10006 | 5/15/1991 | $4.60 | 7/16/1996 | Denmark |
| 10007 | 4/4/1990 | $6.60 | 9/11/1996 | Brazil |
| 10008 | 11/30/1957 | $8.60 | 10/7/1996 | Germany |
| 10009 | 10/22/1930 | $10.60 | 12/30/1996 | Austria |
| 10010 | 2/18/1953 | $12.60 | 12/3/1997 | Switzerland |
| 10011 | 5/15/1991 | $6.90 | 7/16/1996 | Denmark |
| 10012 | 4/4/1990 | $9.90 | 9/11/1996 | Brazil |
This sample demonstrates the DataGrid stacked headers feature with column resize capability for hierarchical header organization.
The Blazor DataGrid supports stacked headers, allowing you to create multiple levels of column headers for logical grouping. Create stacked headers by nesting GridColumn components within parent GridColumn components. Column resizing is fully supported for both regular and stacked columns.
In this demo:
- The Order Date and Freight columns are grouped under the Order Details header
- The Shipped Date and Ship Country columns are grouped under the Shipped Details header
This hierarchical structure provides better organization and visual clarity for related data columns.
For more detailed information about stacked headers, refer to the stacked header documentation.