AdapTable Version:

Framework:

Cell Summaries

Summary

AdapTable provides comprehensive summary information of selected cells in AG Grid
A table shows summaries of the cells using multiple operations
Developers can add their own custom summary operations which will also be evaluated

AdapTable provides useful summary information about the currently selected cells in AG Grid.

Caution

Cell Summaries are provided only for selected cells in a single numeric column

This summary information is displayable in 3 locations:

the Cell Summary Dashboard Toolbar
the Cell Summary Tool Panel
the Cell Summary Status Bar

Each of these contains 3 UI elements:

DropDown to allow you to choose a Summary Operation (AdapTable stores the most recently selected)
Label showing the summarised value of the currently selected cells (using the Summary Operation)
Info button which opens a popup showing summaries for all the available Summary Operations

Cell Summary Types

There are 2 types of Cell Summaries that can be displayed:

System Summary Operations provided by AdapTable
Custom Summary Operations provided by developers

Adaptable Cell Summaries

AdapTable provides a number of system Summary Operations which are available by default in the Cell Summary UI.

Note

These are all Aggregation Scalar Functions provided by - and evaluated by - AdapTableQL

Operation	Description of Summarised Data
`Sum`	Total of all selected cells
`Average`	Average of all selected cells
`Median`	Middle (value) of all selected cells (when ordered)
`Mode`	Most common cell value
`Distinct`	Count of distinct selected cell values
`Max`	Highest selected Cell Value
`Min`	Lowest selected Cell Value
`Count`	Number of selected cells
`Weighted Avg`	Weighted Average
`Only`	Value of all selected cells if they all match
`Std Deviation`	Shows Standard Deviation for selected cells

Note

The Weighted Average summary requires a defined Weighted Column, see Guide to Weighted Averages for more info

Cell Summary

Fork Fork

This example selects some cells in the Github Stars column (using methods in AdapTable's Grid API)
It displays the Sum of their values in the Cell Summary Toolbar, Tool Panel and Status Bar

Try It Out

Select different cell ranges and different Summary Operations in the Cell Summary dashboard and see the results
Alternatively right-click and select Cell Summary to open a popup with different summary functions
Switch between the 2 Layouts and note that Cell Summaries are available in both Table and Pivot Layouts

Pivot Layouts

Cell Summaries are also available in Pivot Layouts.

Note

Cell Summaries will operate on selected cells in both Pivot Columns and Pivot Aggregation Columns

Summarising Pivot Cells

Fork Fork

This example selects some cells in the pivoted MIT License / Github Stars column
Despite it being a automated pivot column, the sum of the selected cells appears in the Cell Summary Toolbar and Status Bar

Try It Out

Switch to the Pivot Agg Layout (which shows Pivot Aggregations but no Pivot Columns) and select some cells

Custom Cell Summaries

Developers can add their own custom summaries to provide bespoke information about selected cells.

Note

Custom Summaries will be added to the Summary Operations shipped by AdapTable and available for selection

This is done via the cellSummaryOperations property in Cell Summary Options.

cellSummaryOperations

CellSummaryOperation[]

Custom Cell Summary Operations

CellSummaryOperation[]

These are Custom Cell Summary Operations which are provided by design-time users.

They will be added to the set of Summaries shipped by AdapTable.

The CustomCellSummaryOperation object is defined as follows:

Property	Description
operationFunction	Function to run when a summary result is required
operationName	Name of the Operation - will be displayed in the Cell Summary components

The operationFunction receives a CellSummaryOperationContext object and can return any value:

operationFunction: (operationContext: cellsummaryoperationcontext) => any;

The operationContext property (of type CustomCellSummaryOperationContext) provides the selected cell information:

Property	Description
selectedCellInfo	Currently selected cells
selectedColumn	Currently selected Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

The Comparer can be used like this:

const adaptableOptions: AdaptableOptions = {
    cellSummaryOptions: {
      cellSummaryOperations: [
       {
        operationName: 'Most Stars',
        operationFunction: (operationContext: CellSummaryOperationContext) => {
          const selectedDataSortedByStars =
            operationContext?.selectedCellInfo?.gridCells
              .map(gridCell => gridCell.rowNode.data)
              .sort((a, b) => b.github_stars - a.github_stars);
          return selectedDataSortedByStars?.[0].name;
        },
      }],
    },
};

Each custom operation contains a summary function that will be invoked by AdapTable when it is required.

Custom Cell Summaries

Fork Fork

This example contains a custom cell Summary called Most Stars
It returns the Name column value for the row in the selected cell range which has the highest Github Stars column value

Expand to see the Custom Cell Summaries

cellSummaryOptions: {
  cellSummaryOperations: [
    {
      operationName: 'Most Stars',
      operationFunction: (operationContext: CellSummaryOperationContext) => {
        const selectedDataSortedByStars =
          operationContext?.selectedCellInfo?.gridCells
            .map(gridCell => gridCell.rowNode.data)
            .sort((a, b) => b.github_stars - a.github_stars);
        if (!selectedDataSortedByStars.length) {
          return '';
        }
        return selectedDataSortedByStars?.[0].name;
      },
    },
  ],
},

Try It Out

Select a few date cells in the Grid and then pick MIN from the Cell Summary dropdown

import {CustomCellSummaryOperationContext} from '@adaptabletools/adaptable';
import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom Summary',
  cellSummaryOptions: {
    customCellSummaryOperations: [
      {
        operationName: 'Most Stars',
        operationFunction: (
          operationContext: CustomCellSummaryOperationContext
        ) => {
          const selectedDataSortedByStars =
            operationContext?.selectedCellInfo?.gridCells
              .map(gridCell => gridCell.rowNode.data)
              .sort((a, b) => b.github_stars - a.github_stars);

          if (!selectedDataSortedByStars.length) {
            return '';
          }

          return selectedDataSortedByStars?.[0].name;
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['CellSummary', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['CellSummary'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'ColumnFilter', 'CellSummary'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-date',
          Scope: {
            DataTypes: ['date'],
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'yyyy/MM/dd',
            },
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'license',
            'github_watchers',
            'github_stars',
            'pushed_at',
            'updated_at',
            'topics',
            'created_at',
            'language',
            'has_wiki',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Formatting Cell Summaries

AdapTable will format Cell Summary values by evaluating the following list of rules (in the order given):

any Display Formats which have been provided for the Column (either by developers or end users)
a bespoke value supplied for the numericDisplayFormat property in Cell Summary Options
using the default format of 2 fraction digits

numericDisplayFormat

NumberFormatterOptions

Format to use for Cell Summary values

NumberFormatterOptions

Provides a value to use when displaying Cell Summary results.

Note

If not provided, AdapTable's default of 2 integer digits is used
Any bespoke Display Format's for the Column take precedence over this property

The value returns a NumberFormatterOptions object either directly, or via a function.

The NumberFormatterOptions object is defined as follows:

Property	Description
Abs	Returns absolute value of cell value
Ceiling	Returns smallest integer greater than cell value
Content	Replaces cell value with supplied value (that can contain Template Literals)
Empty	Show nothing in cell (but underlying value remains)
Floor	Returns largest integer cell value
FractionDigits	Number of digits to show in Fractions (up to 20)
FractionSeparator	Separator to use in fractions
IntegerDigits	Number of digits to show for Integers (up to 20)
IntegerSeparator	Separator to use in Integers
Multiplier	Multiplier to use on cell value
Parentheses	Shows negative numbers in parentheses
Prefix	Prefix to use before cell value
Round	Rounds cell value
Suffix	Suffix to use after cell value
Truncate	Truncates cell value

Hard-coded value

This implementation returns a NumberFormatterOptions directly (which will be used for all summaries):

cellSummaryOptions: {
  numericDisplayFormat: {
    FractionDigits: 0,
    Prefix: ' [',
    Suffix: ']',
  }
}

Function

The function receives an AdaptableColumnContext object which simply contains the column to evaluate:

Property	Description
column	The current Column
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

cellSummaryOptions: {
  numericDisplayFormat: (context: AdaptableColumnContext) => {
    return context.column.columnId == 'github_watchers'
      ? {FractionDigits: 0, Prefix: '[', Suffix: ']'}
      : {IntegerDigits: 5};
  },
}

Cell Summary Formatting

Fork Fork

This example provides a custom Display Format for the Github Stars Column which is reflected in the Cell Summary (we select some cells using AdapTable's Grid API)
We also provide an implementation for numericDisplayFormat property in Cell Summary Options which is used when cells in other columns are selected

Try It Out

Select cells in the Github Watchers column and note that the numericDisplayFormat property's value is used

Ticking Cell Summaries

AdapTable will update Cell Summaries in real time as the selected cell values change.

Cell Summary Ticking Data

Fork Fork

This example selects a group of cells in the Github Stars column and mimics ticking data by periodically updating the column
We see the Cell Summary update as the values in Selected Cells tick

Displaying Cell Summaries

(Recorded with AdapTable v14.0)

FAQ

Can we add our own Summary Operations? Yes, you can provide them in cellSummaryOperationDefinitions property of Cell Summary Options

Can we use Cell Summaries in Pivot Layouts? Yes, this was was introduced in Version 20 of AdapTable

PreviousSummarising NextRow Summaries

Framework: