Aggregate

Aggregate represents the arithmetic or sum of all values in a data table or index list.

Component status

Design

Implemented

Web component

Is documented

Status

Healthy

Figma component

Storybook

Principles

Use when

  1. there is a need to express the numerical amount, arithmetic sums, or total number of displayed records in the table or structured lists.
  2. it needed to indicate with text how many records there are on the current page among the total records in structured lists.

Behaviors

General usage

aggregate-usage-do

When describing the total number of things on any index page, refer to them as a tally .

aggregate-usage-do-2

Tallies are supported with meta texts where the total amount or aggregation of the table is displayed.

aggregate-usage-do-3

It can be used showing the total number of records on a index pages or data tables.

aggregate-types-do-4

While it’s necessary to describe how many records are currently displaying, this can also be an aggregation.

Placement

Total number of records, sums of the table, or the range of total records displayed on the page can be placed side by side, and these elements should be positioned in the bottom right corner of the index or table.

While using with the pagination, be cautious with the placement with each other, and pagination should always be left-aligned.

Figma source