Server-Side Row Model - Calculated Columns

Summary

Scalar (ie. single row) Calculated Columns work when using the Server-Side Row Model
Aggregated (i.e. multi row) Calculated Columns require the calculated to be performed on the server

Calculated Columns can work automatically when using AG Grid's Server-Side Row Model.

However this does depend on the complexity of the Calculation:

Standard Calculated Columns

Standard Calculated Columns operate as normal in the Server-Side Row Model.

Note

This is because they use Standard Expressions which operate on a single row and are evalated as the row is rendered.

Aggregated Calculated Columns

The more complex type of Calculated Columns (Aggregated , Cumulative and Quantile) do not work out of the box when using the Server-Side Row Model.

Note

This is because they use Aggregated Expressions which work on multiple rows, and not all will be present on the client.

When this is the case, you will need to evaluate the Expression on the Server and return the value to AdapTable to render.

SSRM - Calculated Columns

Fork Fork

This demo includes 3 Calculated Columns - Total, Most, Points
All are standard (i.e. single-row) Calculated Columns and all work out of the box when using Server-Side Row Model

import {AdaptableOptions} from '@adaptabletools/adaptable';

export const adaptableOptions: AdaptableOptions = {
  primaryKey: 'id',
  adaptableId: 'SSRM Calculated Columns',
  initialState: {
    Dashboard: {
      PinnedToolbars: ['Layout'],
    },
    Theme: {
      CurrentTheme: 'dark',
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'athlete',
            'gold',
            'silver',
            'bronze',
            'totalMedals',
            'mostMedals',
            'points',
            'country',
            'sport',
            'year',
          ],
          ColumnSizing: {
            athlete: {Width: 175},
            bronze: {Width: 100},
            country: {Width: 125},
            gold: {Width: 100},
            silver: {Width: 100},
            sport: {Width: 175},
            year: {Width: 115},
          },
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          ColumnId: 'totalMedals',
          Query: {
            ScalarExpression: '[gold] + [silver] + [bronze] ',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
            Filterable: true,
            Resizable: true,
            Sortable: true,
          },
          FriendlyName: 'Total',
        },
        {
          ColumnId: 'mostMedals',
          Query: {
            ScalarExpression:
              'max([gold], [silver],[bronze]) = [gold] ? "Gold" : max([gold], [silver],[bronze]) = [silver] ? "Silver": "Bronze"',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
            Filterable: true,
            Resizable: true,
            Sortable: true,
          },
          FriendlyName: 'Most',
        },
        {
          ColumnId: 'points',
          Query: {
            ScalarExpression: '([gold] * 3) + ([silver] * 2) + ([bronze] * 1)',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
            Filterable: true,
            Resizable: true,
            Sortable: true,
          },
          FriendlyName: 'Points',
        },
      ],
    },
  },
};

PreviousFormatting & Styling NextSearching

Framework: