[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Column Summaries

The Ignite UI for Blazor Data Table / Data Grid supports column summaries. In some cases, your end users may be overwhelmed by the amount of data displayed in the grid, and often may be looking for a summary of the data. Your end users may also want to derive additional information from the data of a specific column. Summaries help your end users achieve this, and you can enable them by setting the SummaryScope property.

Blazor Column Summaries Example

Summary Scope Property

The Blazor data grid supports 4 summary settings that you can configure using the SummaryScope property. These are listed and described below:

Root: This will display a grand total for all rows in the grid for the column the summary is applied to.
Groups: This is specific to grouped rows and shows the grand total for all rows in a particular group.
Both: This will use the Groups and Root options simultaneously.
None: This will disable summaries for the grid.

Group Summary Display Mode Property

The Blazor data grid supports configuration of the locations that summaries are displayed. You can configure this by using the GroupSummaryDisplayMode property. The different options for this property are listed and described below:

List: This will render the group summaries in a flat list in the spanning group header.
Cells: This will render the group header as cells, and the summary values will be rendered inside the cells, aligned with their corresponding column. The grid will only display a single summary per column using this option.
RowTop: This will render the group summaries as summary rows at the top of the group.
RowBottom: This will render the group summaries as summary rows at the bottom of the group.
None: This will disable group summary rendering.

Code Snippets

<IgbDataGrid Height="500px" Width="100%"
    @ref="DataGridRef"
    SummaryScope="DataSourceSummaryScope.Root"
    GroupSummaryDisplayMode="GroupSummaryDisplayMode.RowTop"
    AutoGenerateColumns="false"
    IsGroupCollapsable="true"
    GroupHeaderDisplayMode="DataSourceSectionHeaderDisplayMode.Combined"
    DataSource="DataSource">
    <IgbTextColumn Field="ProductName" Width="130" HeaderText="Product" />
    <IgbNumericColumn Field="BundlePrice" PositivePrefix="$" Width="120" ShowGroupingSeparator="true" HeaderText="Price" />
    <IgbNumericColumn Field="OrderItems" Width="140" HeaderText="Orders" />
    <IgbNumericColumn Field="OrderValue" Width="160" ShowGroupingSeparator="true" HeaderText="Order Totals" PositivePrefix="$" />
    <IgbTextColumn Field="Country" Width="170" HeaderText="Ship Country" />
</IgbDataGrid>

@code {
    private IgbDataGrid grid;
    private IgbDataGrid DataGridRef
    {
        get { return grid; }
        set
        {
            grid = value;
            this.OnDataGridRef();
            StateHasChanged();
        }
    }

    private void OnDataGridRef()
    {
        var productCount = new ColumnSummaryDescription() { Field = "ProductName", Operand = SummaryOperand.Count };
        var priceMin = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Min };
        var priceMax = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Max };
        var orderSum = new ColumnSummaryDescription() { Field = "OrderItems", Operand = SummaryOperand.Sum };
        var orderValueAvg = new ColumnSummaryDescription() { Field = "OrderValue", Operand = SummaryOperand.Average };

        this.DataGridRef.SummaryDescriptions.Add(productCount);
        this.DataGridRef.SummaryDescriptions.Add(priceMin);
        this.DataGridRef.SummaryDescriptions.Add(priceMax);
        this.DataGridRef.SummaryDescriptions.Add(orderSum);
        this.DataGridRef.SummaryDescriptions.Add(orderValueAvg);
    }
}

Blazor Column Summaries