Blazor Smart.Table Column Hierarchy

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup the Blazor Smart.Table

Follow the Get Started with Smart.Table guide to set up the component.

Column Hierarchy

Smart.Table supports column header hierarchy. You can use it by setting the ColumnGroups (IEnumerable<ITableColumnGroup>) property of the table.
It sets a list of column groups that constitute the column header hierarchy:

    List<TableColumnGroup> columnGroups = new List<TableColumnGroup>()
    {
        new TableColumnGroup()
        {
            Label = "User Info",
            Name = "userInfo"
        },
        new TableColumnGroup()
        {
            Label = "Product Info",
            Name = "productInfo",
            ParentGroup = "purchaseInfo"
        },
        new TableColumnGroup()
        {
            Label = "Purchase Info",
            Name = "purchaseInfo"
        }
    };
        

Example

Here is a full example of Table with Column Hierarchy:

    @using Smart.Blazor.Demos.Data
    @inject RandomDataService dataService

    <Table DataSource="dataRecords" ColumnReorder="true" FreezeHeader="true" Columns="@columns" ColumnGroups="@columnGroups" />

    @code {   
        private List<DataRecord> dataRecords;
    
        List<TableColumn> columns = new List<TableColumn>()
        {
            new TableColumn()
            {
                DataField = "Id",
                Label = "Id",
                DataType = TableColumnDataType.Number,
                ColumnGroup = "productInfo"
            },
            new TableColumn()
            {
                DataField = "FirstName",
                Label = "First Name",
                DataType = TableColumnDataType.String,
                ColumnGroup = "userInfo"
            },
            new TableColumn()
            {
                DataField = "LastName",
                Label = "Last Name",
                DataType = TableColumnDataType.String,
                ColumnGroup = "userInfo"
            },
            new TableColumn()
            {
                DataField = "ProductName",
                Label = "Product Name",
                DataType = TableColumnDataType.String,
                ColumnGroup = "purchaseInfo"
            },
            new TableColumn()
            {
                DataField = "Quantity",
                Label = "Quantity",
                DataType = TableColumnDataType.Number,
                ColumnGroup = "productInfo"
            },
            new TableColumn()
            {
                DataField = "Price",
                Label = "Price",
                DataType = TableColumnDataType.Number,
                ColumnGroup = "productInfo"
            },
            new TableColumn()
            {
                DataField = "Total",
                Label = "Total",
                DataType = TableColumnDataType.Number,
                ColumnGroup = "productInfo"
            }
        };
      
        List<TableColumnGroup> columnGroups = new List<TableColumnGroup>()
        {
            new TableColumnGroup()
            {
                Label = "User Info",
                Name = "userInfo"
            },
            new TableColumnGroup()
            {
                Label = "Product Info",
                Name = "productInfo",
                ParentGroup = "purchaseInfo"
            },
            new TableColumnGroup()
            {
                Label = "Purchase Info",
                Name = "purchaseInfo"
            }
        };
      
        protected override void OnInitialized()
        {
            base.OnInitialized();
            dataRecords = dataService.GenerateData(50);
        }
    }

      

Result: