AdapTable Version:

Framework:

Row Summaries

Summary

AdapTable allows users to create Row Summaries in their Layouts
They are Pinned Rows which can be placed at the top or bottom of the Grid
Each Row Summary can contain multiple Aggregations

AdapTable provides Row Summaries which display per-Column Aggregation information.

Note

The Aggregation functions are Aggregation Scalar Functions provided and evaluated by AdapTableQL

Row Summaries can be pinned either at the top or bottom of the Grid.

Row Summaries are stored in a Table Layout enabling users to decide on their usage on a per-Layout basis.

Hint

Layouts can, alternatively include Grand Total Rows to display Aggregation summaries
Grand Total Rows are less powerful or configurable than Row Summaries (but settable via a single boolean prop)

Caution

Row Summaries are not available in Pivot Layouts (but Grand Total Rows are)

Deep Dive

How Row Summaries Work

The full list of Aggregation functions available in Row Summaries is:

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

Row Summary

Fork Fork

This example contains 2 Row Summaries:
- Top Row Summary: Github Stars and Github Watchers both have SUM Aggregations, Created At shows MIN
- Bottom Row Summary: Issue Change shows an Aggregation of AVG and Language has an Aggregation of COUNT

Formatting

By default Column Formatting is automatically applied to Row Summaries (and also to Group Rows).

Note

The Format Column is only applied to cells in the Row Summary which have an Aggregation set

Where not required, this default behaviour can be changed by setting the ExcludeSummaryRows property to false in the RowScope property when defining the Format Column.

Hint

This allows you to create a Format Column that is only rendered in a Row Summary

The RowScope object enables 4 types of rows to be excluded from a Format Column:

Data Rows
Grouped Rows
Summary Rows
Grand Total Rows

Caution

Make sure to set a Column Scope of All columns to ensure the entire row is formatted

Formatted Row Summary

Fork Fork

This example demonstrates formatting Row Summaries
We provide a Top Row Summary with Aggregations for the Language, Github Stars and Github WatchersColumns
We have provided 4 Format Columns, each of which has a different behaviour for Row Summaries:
- Language (showing MODE) has a Fore Color of blue and includes Row Summaries but excludes regular rows
- Github Stars has red italic font and excludes Row Summaries
- Github Watchers has a Fore Color of yellow and includes Row Summaries
- Whole Row Format for Row Summary achieved by excluding regular rows

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Formatted Row Summary',
  initialState: {
    Dashboard: {
      ModuleButtons: ['SettingsPanel'],
      PinnedToolbars: ['Layout'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'week_issue_change',
            'github_stars',
            'github_watchers',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          RowSummaries: [
            {
              Position: 'Top',
              ColumnsMap: {
                language: 'MODE',
                github_watchers: 'SUM',
                github_stars: 'SUM',
              },
            },
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        // Language is Summary Row only
        {
          Name: 'formatColumn-language',
          Scope: {
            ColumnIds: ['language'],
          },
          Style: {
            ForeColor: 'LightBlue',
          },
          RowScope: {
            ExcludeDataRows: true,
          },
        },
        // Github Stars is Not Summary Row
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Style: {
            ForeColor: 'Red',
            FontStyle: 'Italic',
          },
          RowScope: {
            ExcludeSummaryRows: true,
          },
        },
        // Github Watchers is all rows
        {
          Name: 'formatColumn-github_watchers',
          Scope: {
            ColumnIds: ['github_watchers'],
          },
          Style: {
            ForeColor: 'Yellow',
          },
        },
        // Add a row format - just for Row summary
        {
          Name: 'style-all',
          Scope: {
            All: true,
          },
          Style: {
            BackColor: '#555555',
          },
          RowScope: {
            ExcludeDataRows: true,
          },
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
  },
};

Filtered Data

By default Row Summaries show Aggregations for the currently visible (i.e. filtered) data in the Grid.

Hint

If this is not desired behaviour, set IncludeOnlyFilteredRows to false in the Row Summary definition

Filtered Row Summary

Fork Fork

This example contains 2 Row Summaries with the same 4 Aggregations (which we have also formatted)
The only difference is that the Bottom Row Summary has IncludeOnlyFilteredRows set to false
We have set a Column Filter on the Github Stars Column, and also a Grid Filter
Accordingly the 2 Row Summaries show different values (e.g. COUNT for Language Column is 15 at the top and 25 at the bottom)

Try It Out

Clear the Column Filter on the Github Stars Column and the Grid Filter, and note that now the Row Summaries at the top and bottom match up

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Filtered Row Summary',
  initialState: {
    Dashboard: {
      ModuleButtons: ['CellSummary', 'SettingsPanel'],
      PinnedToolbars: ['Layout', 'GridFilter'],
    },

    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'week_issue_change',
            'github_stars',
            'github_watchers',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
          ],
          RowSummaries: [
            {
              Position: 'Top',
              ColumnsMap: {
                github_watchers: 'SUM',
                github_stars: 'SUM',
                week_issue_change: 'AVG',
                language: 'COUNT',
              },
              IncludeOnlyFilteredRows: true,
            },
            {
              Position: 'Bottom',
              ColumnsMap: {
                github_watchers: 'SUM',
                github_stars: 'SUM',
                week_issue_change: 'AVG',
                language: 'COUNT',
              },
              IncludeOnlyFilteredRows: false,
            },
          ],
          Name: 'Standard Layout',
          ColumnFilters: [
            {
              ColumnId: 'github_stars',
              Predicates: [
                {
                  PredicateId: 'Between',
                  Inputs: ['5000', '90000'],
                },
              ],
            },
          ],
          GridFilter: {
            Expression: '[license]="MIT License" OR [github_watchers] > 67500',
          },
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'style-all',
          Scope: {
            All: true,
          },
          Style: {
            BackColor: '#555555',
            FontStyle: 'Italic',
          },
          RowScope: {
            ExcludeDataRows: true,
          },
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
  },
};

Defining in Layouts

Row Summaries can be defined at design-time using the RowSummaries property of the Layout.

Developer Guide

Providing Row Summaries

// 1. Provide 2 Row Summaries:
// Top: SUM Aggregation for Github Stars and Github Watchers
// Bottom: COUNT & AVG Aggregations for Language and Issue Change
const initialState: InitialState = {
  Layout: {
    CurrentLayout: 'Summary Layout',
    Layouts: [
    {
      Name: 'Summary Layout',
      RowSummaries: [
      {
        Position: 'Top',
        ColumnsMap: {
          github_watchers: 'SUM',
          github_stars: 'SUM',
        },
      },
      {
        Position: 'Bottom',
        ColumnsMap: {
          week_issue_change: 'AVG',
          language: 'COUNT',
        },
        IncludeOnlyFilteredRows: false
      },
    ],
    }],
  },
}

Define any Row Summaries

Provide a list of Row Summaries.

Set the Position

Specifiy for each Row Summary its Position:

Top
Bottom

Provide Summary Columns Map

The Columns Map specifies which columns in the Row will display an Aggregation, and of which summary type:

2 properties need to provide for each entry

name of the Column
the Summary Aggregation to use

Sepcify whether to Evaluate All Rows

By default a Row Summary will only include currently filtered rows in its evaluation.

Set IncludeOnlyFilteredRows to false to evalute all Rows.

at run-time through the Table Layout Wizard - which contains a step that allows users to create Row Summaries, choose their position, and select appropriate Aggregations

Row Summaries

(Recorded with AdapTable v18.0)

FAQ

Can we create Row Summaries at run-time? Yes, via the Table Layout Wizard

PreviousCell Summaries NextTechnical Reference

Framework: