[!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

A Tabela de Dados/Grade de Dados do Ignite UI for Blazor oferece suporte a resumos de colunas. Em alguns casos, os usuários finais podem ficar sobrecarregados com a quantidade de dados exibidos na grade e, muitas vezes, podem estar procurando um resumo dos dados. Seus usuários finais também podem querer derivar informações adicionais dos dados de uma coluna específica. Os resumos ajudam os usuários finais a conseguir isso, e você pode habilitá-los definindo a SummaryScope propriedade.

Blazor Column Summaries Example

Summary Scope Property

A grade de dados Blazor dá suporte a 4 configurações de resumo que você pode definir usando a SummaryScope propriedade. Estes estão listados e descritos abaixo:

Root: Isso exibirá um total geral para todas as linhas na grade da coluna à qual o resumo é aplicado.
Groups: Isso é específico para linhas agrupadas e mostra o total geral de todas as linhas em um grupo específico.
Both: Isso usará as Groups opções e Root simultaneamente.
None: Isso desativará os resumos da grade.

Group Summary Display Mode Property

A grade de dados Blazor dá suporte à configuração dos locais em que os resumos são exibidos. Você pode configurar isso usando a GroupSummaryDisplayMode propriedade. As diferentes opções para esta propriedade estão listadas e descritas abaixo:

Lista: Isso renderizará os resumos do grupo em uma lista simples no cabeçalho do grupo abrangente.
Células: Isso renderizará o cabeçalho do grupo como células, e os valores de resumo serão renderizados dentro das células, alinhados com suas colunas correspondentes. A grade exibirá apenas um único resumo por coluna usando esta opção.
RowTop: Isso renderizará os resumos do grupo como linhas de resumo no topo do grupo.
RowBottom: Isso renderizará os resumos do grupo como linhas de resumo na parte inferior do grupo.
Nenhum: isso desabilitará a renderização do resumo do grupo.

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