[!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.
Web Components Column Summaries
A Tabela de Dados/Grade de Dados do Ignite UI for Web Components 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.
Web Components Column Summaries Example
Summary Scope Property
A grade de dados Web Components 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 opçõesGroupseRootsimultaneamente.None: isso desabilitará os resumos da grade.
Group Summary Display Mode Property
A grade de dados Web Components 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
<igc-data-grid
summary-scope="Root"
group-summary-display-mode="RowTop"
auto-generate-columns="false"
is-group-collapsable="true"
group-header-display-mode="combined"
default-column-min-width="100">
<igc-text-column field="ProductName" header-text="Product"></igc-text-column>
<igc-numeric-column positive-prefix="$" field="BundlePrice" show-grouping-separator="true" header-text="Price" ></igc-numeric-column>
<igc-numeric-column field="OrderItems" header-text="Order Items"></igc-numeric-column>
<igc-numeric-column field="OrderValue" show-grouping-separator="true" header-text="Order Totals" positive-prefix="$"></igc-numeric-column>
<igc-text-column field="Countries" header-text="Ship Country"></igc-text-column>
</igc-data-grid>
import { IgcColumnGroupDescription } from 'igniteui-webcomponents-grids';
import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-grids'
import { SummaryOperand, SummaryCalculator, DefaultSummaryResult, IDataSource, ISummaryResult } from 'igniteui-webcomponents-core';
connectedCallback() {
// Count Operand
const productCount = new IgcColumnSummaryDescription();
productCount.field = "ProductName";
productCount.operand = SummaryOperand.Count;
this.grid.summaryDescriptions.add(productCount);
// Min Operand with formatting
const priceMin = new IgcColumnSummaryDescription();
priceMin.field = "BundlePrice";
priceMin.operand = SummaryOperand.Min;
priceMin.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
this.grid.summaryDescriptions.add(priceMin);
// Max Operand and formatting
const priceMax = new IgcColumnSummaryDescription();
priceMax.field = "BundlePrice";
priceMax.operand = SummaryOperand.Max;
priceMax.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
this.grid.summaryDescriptions.add(priceMax);
// Sum Operand
const orderSum = new IgcColumnSummaryDescription();
orderSum.field = "OrderItems";
orderSum.operand = SummaryOperand.Sum;
this.grid.summaryDescriptions.add(orderSum);
// Average Operand and formatting
const orderValueAvg = new IgcColumnSummaryDescription();
orderValueAvg.field = "OrderValue";
orderValueAvg.operand = SummaryOperand.Average;
orderValueAvg.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
this.grid.summaryDescriptions.add(orderValueAvg);
}
Custom Summaries
Em algumas situações, você pode querer expandir o conjunto padrão de resumos. Por exemplo, se você estivesse procurando mostrar o número de vezes que um valor específico em uma coluna aparece, um resumo personalizado seria necessário para isso.
Os snippets abaixo demonstram como exibir uma Contagem para o número de valores "EUA" que aparecem na coluna.
import { IgcProvideCalculatorEventArgs } from 'igniteui-webcomponents-core';
onLoad() {
const countries = new IgcColumnSummaryDescription();
countries.field = "Countries";
countries.operand = SummaryOperand.Custom;
countries.provideCalculator = this.onProvideCalculator; //refer to class below
this.grid.summaryDescriptions.add(countries);
}
onProvideCalculator(s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) {
e.calculator = new CustomDomestic();
}
// Custom Calculator - calculates the count for all USA.
class CustomDomestic extends SummaryCalculator
{
get displayName(): string {
return "USA";
}
public usCountries: number;
public beginCalculation(a: IDataSource, b: string): void {
super.beginCalculation(a,b);
this.usCountries = 0;
}
public endCalculation(): ISummaryResult {
return new DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries)
}
public aggregate(a: any): void {
if (a.Countries === "USA")
{
this.usCountries++;
}
}
}