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
The Ignite UI for Web Components 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.
<!DOCTYPE html><html><head><title>DataGridColumnSummaries</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options horizontal"><spanclass="options-label">Summary Scope:</span><selectclass="options-label"default-value="Root"id="onSummaryScopeChanging"><option>Root</option><option>Groups</option><option>Both</option><option>None</option></select><spanclass="options-label" >Group Summary Display Mode:</span><selectclass="options-label"default-value="RowBottom"id="onGroupSummaryDisplayModeChanging"><option>List</option><option>Cells</option><option>RowTop</option><option>RowBottom</option><option>None</option></select></div><igc-data-gridid="grid"height="calc(100% - 3rem)"width="100%"summary-scope="Root"group-summary-display-mode="RowTop"auto-generate-columns="false"is-group-collapsable="true"group-header-display-mode="combined"is-column-options-enabled="true"default-column-min-width="100"
><igc-numeric-columnfield="ProductID"header-text="ID"horizontal-alignment="center" ></igc-numeric-column><igc-text-columnfield="ProductName"header-text="Product"width="*>160"></igc-text-column><igc-numeric-columnpositive-prefix="$"field="BundlePrice"show-grouping-separator="true"header-text="Price" ></igc-numeric-column><igc-numeric-columnfield="OrderItems"header-text="Order Items"width="*>135"></igc-numeric-column><igc-numeric-columnfield="OrderValue"show-grouping-separator="true"header-text="Order Totals"positive-prefix="$"width="*>195"></igc-numeric-column><igc-date-time-columnfield="OrderDate"header-text="Order Date"horizontal-alignment="right"width="*>180"></igc-date-time-column><igc-numeric-columnfield="Profit"show-grouping-separator="true"header-text="Profit"positive-prefix="$"width="*>165"></igc-numeric-column><igc-text-columnfield="Countries"header-text="Country"width="*>115"></igc-text-column></igc-data-grid></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Summary Scope Property
The Web Components 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.
The Web Components 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.
In some situations, you may want to expand the default set of summaries. For example, if you were looking to show the number of times a particular value in a column appears, a custom summary would be required for this.
The snippets below demonstrate how to display a Count for number of "USA" values appear in the column.
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 belowthis.grid.summaryDescriptions.add(countries);
}
onProvideCalculator(s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) {
e.calculator = new CustomDomestic();
}
// Custom Calculator - calculates the count for all USA.classCustomDomesticextendsSummaryCalculator{
getdisplayName(): string {
return"USA";
}
public usCountries: number;
public beginCalculation(a: IDataSource, b: string): void {
super.beginCalculation(a,b);
this.usCountries = 0;
}
public endCalculation(): ISummaryResult {
returnnew DefaultSummaryResult(this.propertyName, SummaryOperand.Custom, this.usCountries)
}
public aggregate(a: any): void {
if (a.Countries === "USA")
{
this.usCountries++;
}
}
}
ts