Blazor DataGrid Example - Stacked Headers
This example shows the DataGrid component with stacked headers and the resize feature. In this example, multiple levels of column headers are shown.
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 |
The Blazor DataGrid columns can be stacked/grouped in order to show multiple levels of column headers. It is possible to accomplish this by nesting the GridColumn component within another GridColumn component. The Column Resizing is enabled for normal and stacked columns.
In this demo, the columns Order Date, Freight are grouped under Order Details and the columns Shipped Date, Ship Country are grouped under Shipped Details.
More information about the column Stacked header can be found in this documentation section.