Blazor DataGrid Composite Columns
Group related Blazor DataGrid columns under a shared header - also known as column bands, column groups or multi-level headers.
Column bands linkLink to this section
Nest columns in the Columns of a parent column and the parent becomes a header that spans them.
The nested columns keep sorting, filtering and footer templates, and the same child columns can repeat under different parents.
Set the Width of the parent column and its child columns share it.
Employee | Q3 | Q4 | Total | |||
|---|---|---|---|---|---|---|
Orders | Freight | Orders | Freight | Orders | Freight | |
| Andrew Fuller | 8 | ¤251.64 | 6 | ¤509.92 | 14 | ¤761.56 |
| Anne Dodsworth | 2 | ¤294.39 | 3 | ¤238.45 | 5 | ¤532.84 |
| Janet Leverling | 7 | ¤347.39 | 11 | ¤532.64 | 18 | ¤880.03 |
| Laura Callahan | 11 | ¤888.86 | 7 | ¤342.18 | 18 | ¤1,231.04 |
| Margaret Peacock | 15 | ¤793.70 | 16 | ¤1,174.89 | 31 | ¤1,968.59 |
| Michael Suyama | 9 | ¤311.29 | 5 | ¤270.40 | 14 | ¤581.69 |
| Nancy Davolio | 11 | ¤723.69 | 12 | ¤855.10 | 23 | ¤1,578.79 |
| Robert King | 3 | ¤132.21 | 8 | ¤532.11 | 11 | ¤664.32 |
| Steven Buchanan | 4 | ¤65.66 | 6 | ¤1,239.45 | 10 | ¤1,305.11 |
Composite data cells linkLink to this section
By default a parent column is a header only. Set AllowCompositeDataCells="true" to make the data cells follow the header layout:
a parent column with a Property or Template shows its own value in a cell that spans its child columns,
and each record takes one table row per header level. Columns without children span all of them.
Photo | Employee | Address | |||
|---|---|---|---|---|---|
Job Title | Hire Date | City | Postal Code | Country | |
 | Nancy Davolio | 507 - 20th Ave. E. Apt. 2A | |||
| Sales Representative | 05/01/2012 | Seattle | 98122 | USA | |
 | Andrew Fuller | 908 W. Capital Way | |||
| Vice President, Sales | 08/14/2012 | Tacoma | 98401 | USA | |
 | Janet Leverling | 722 Moss Bay Blvd. | |||
| Sales Representative | 04/01/2012 | Kirkland | 98033 | USA | |
 | Margaret Peacock | 4110 Old Redmond Rd. | |||
| Sales Representative | 05/03/2013 | Redmond | 98052 | USA | |
Frequently asked questions
How do I create grouped or multi-level column headers?
Nest child columns inside a parent RadzenDataGridColumn; the parent renders as a spanning header above its children.
Does the DataGrid support banded columns?
Yes. A parent RadzenDataGridColumn with only a Title and child Columns is a band header, and the same child columns can repeat under different bands.
How do I show a value in a parent column cell?
Set AllowCompositeDataCells to true; a parent column with a Property or Template then renders its value in a data cell that spans its child columns.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT
On this page