Grand Total Rows

Summary

AdapTable Layouts can include a Grand Total Row which displays aggregated information

Layouts can include a Grand Total Row which will display the totals for all Aggregated Cells.

Note

Grand Total Rows use whichever aggFunc is being applied in the Column being aggregated
Unlike "normal" aggregations, Grand Total Rows display even if Row Grouping is not applied

This is done via the GrandTotalRow property which can be set to one of 6 values:

Hint

The GrandTotalRow property is in the LayoutBase object, and therefore available in both Table and Pivot Layouts

top - row is displayed at top of grid
bottom - row is displayed at bottom of grid
pinnedTop - row is pinned to the top of grid
pinnedBottom - row is pinned to the bottom of grid
true - equivalent to pinnedTop
false - row is not displayed (same as null)

Hint

Row Summaries are a more powerful and configurable alternative (but available only in Table Layouts)

Aggregations: Grand Total Row

Fork Fork

This demo provides 3 Layouts all of which have 3 Aggregated Columns - Github Stars (sum), Github Watchers (sum) and Issue Change (min) - and a Grand Total Row
- Grouped Layout - the Grid is Row Grouped and the Grand Total Row is at the top
- Pivot Layout - the Grid is Pivoted and the Grand Total Row is at the bottom
- Standard Layout - the Grid has now Row Groups and the Grand Total Row is pinned to the top

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Aggregation Grand Total Row',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'week_issue_change',
              AggFunc: 'min',
            },
          ],
          SuppressAggFuncInHeader: true,
          GrandTotalRow: 'pinnedTop',
          TableColumns: [
            'name',
            'github_watchers',
            'github_stars',
            'week_issue_change',
            'updated_at',
            'license',
            'created_at',
          ],
        },
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'week_issue_change',
              AggFunc: 'min',
            },
          ],
          SuppressAggFuncInHeader: true,
          GrandTotalRow: 'top',
          TableColumns: [
            'name',
            'github_watchers',
            'github_stars',
            'week_issue_change',
            'updated_at',
            'license',
            'created_at',
          ],
        },
        {
          Name: 'Pivot Layout',
          PivotColumns: [],
          PivotGroupedColumns: ['language'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'week_issue_change',
              AggFunc: 'min',
            },
          ],
          GrandTotalRow: 'bottom',
        },
      ],
    },
  },
};

Formatting

By default, Grand Total Rows will be included in all Column Formatting and Styling.

This behaviour can be changed by configuring the RowScope property when defining the Format Column.

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

Data Rows
Grouped Rows
Summary Rows
Grand Total Rows - the focus of this page

Hint

Use the ExcludeDataRows option to create a Format Column that is only rendered in a Grand Total Row

Aggregations: Grand Total Row Formatting

Fork Fork

This demo contains a Grand Total Row with 3 Aggregated Columns, and 3 Format Columns each with a different RowScope:
- Github Watchers includes Grand Total Row but excludes Data Rows
- Github Stars excludes Grand Total Row but includes Data Rows
- Issue Change includes both Grand Total Row and Data Rows

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Aggregation Grand Total Row Formatting',
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['Layout']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Table Layout',
      Layouts: [
        {
          Name: 'Table Layout',
          //    RowGroupedColumns: ['language'],
          TableAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'week_issue_change',
              AggFunc: 'sum',
            },
          ],
          SuppressAggFuncInHeader: true,
          GrandTotalRow: 'top',
          TableColumns: [
            'name',
            'github_watchers',
            'github_stars',
            'week_issue_change',
            'updated_at',
            'license',
            'created_at',
          ],
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-github_watchers',
          Scope: {
            ColumnIds: ['github_watchers'],
          },
          Style: {
            ForeColor: 'LightBlue',
            FontWeight: 'Bold',
            Alignment: 'Center',
          },
          RowScope: {
            ExcludeDataRows: true,
          },
        },
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Style: {
            ForeColor: 'LightGreen',
            FontWeight: 'Bold',
          },
          RowScope: {
            ExcludeTotalRows: true,
          },
        },
        {
          Name: 'formatColumn-week_issue_change',
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Style: {
            ForeColor: 'Red',
            FontWeight: 'Bold',
            Alignment: 'Center',
          },
        },
      ],
    },
  },
};

PreviousAggregations NextWeighted Averages

Framework: