AdapTable Version:

Framework:

Providing Column Types

Summary

Column Types are provided by Developers using the type property in the AG Grid Column Def
They are leveraged by AdapTable, in particular, for 4 important use cases:
- To define Scope so that all Columns which share a type are treated as a group (i.e. given a Column Format)
- Identify "special" (e.g. Calculated, FreeText and Action) Columns so AG Grid properties can be applied
- To hide a Column so it is never visible in the Grid
- To create Pivot Total Columns

Column Types are supplied via the type property in an AG Grid Column Schema definition.

Hint

The type property accepts an array as well as a single value
This allows developers to provide their own types as well as those which AdapTable and / or AG Grid expect

There are 2 main use cases where Column Types are used in AdapTable.

Column Type Scope

Column Types can be used as an option when defining Scope.

This commonly used object sets which Columns are to be included in an AdapTable Object (e.g. Format Columns, Alerts, Flashing Cells and other objects).

All columns containing the specified Column Type will be dynamically included in the Object's Scope.

Caution

Column Types are not automatically available for AdapTable run-time users in the UI and associated wizards
Use the columnTypes property in Column Options to specify which of the supplied Column Types are listed

columnTypes

Default: undefined

string[]

Optional list of Column Types - used when defining Scope in AdapTable UI & decorating Special Columns

This property in Column Options returns a list containing the subset of Column Types which have been defined in AG Grid column definitions, that should be made available to run-time AdapTable users.

This is particularly useful when defining Scope - via the object's Scope property - for a group of Columns.

It is defined as follows:

columnTypes?: string[] | ((context: ColumnTypesContext) => string[]);

As can be seen the list can be provided in 2 ways:

via hard-coded array of strings
using a function which receives a ColumnTypesContext object and returns an arrray of strings

Caution

When defining the Scope in a Wizard, only the items returned by this property are visible to the run-time user
Values returned in this property must exist in at least one Type property in an AG Grid column definition

// Define 4 Column Types via a list
const adaptableOptions: AdaptableOptions = {
  columnOptions: {
    columnTypes: ['number-column', 'price', 'user', 'decimal']
  }

// Define 4 Column Types using a Function
const adaptableOptions: AdaptableOptions = {
  columnOptions: {
    columnTypes: (context: ColumnTypesContext) => ['number-column', 'price', 'user', 'decimal']
  }

This can then be put together with objects as follows:

// Define 3 Column Types and reference them in Format Columns
const adaptableOptions: AdaptableOptions = {
  columnOptions: {
    columnTypes: ['number-column', 'price', 'user', 'decimal']
  }
  initialState : {
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'format-number-center',
          Scope: { ColumnTypes: ['number-column'] },
          Style: {
            Alignment: 'Center',
          },
        },
        {
          Name: 'format-price-four-digits',
          Scope: { ColumnTypes: ['price'] },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: { FractionDigits: 4 },
          },
        },
        {
          Name: 'format-user-back-colour',
          Scope: { ColumnTypes: ['user'] },
          Style: {
            BackColor: '#00ffff',
            ForeColor: 'Black'
          },
        },
      ],
    },
  };
}

Column Type Scope

Fork Fork

This demo showcases how to use Column Type Scope, through 3 Format Columns:
- The 2 Columns with a type of github (i.e. Github Watchers & Github Stars) have a style of bold and centre-aligned
- The 4 Columns with a type of issue-pr (i.e. Open Issues, Closed Issues, Open PRs & Closed PRs) have a style of black font on blue background
- The 2 Calculated Columns (and therefore with a type of calculatedColumn - githubPopularity & totalStars) have a style of pink font and bold
The 3 types have also been provided in the columnTypes property in Column Options so they can be accessed in the UI

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Column Type Scope',
  columnOptions: {
    columnTypes: ['github', 'issue-pr', AdaptableColumnType.CalculatedColumn],
  },
  initialState: {
    Dashboard: {ModuleButtons: ['FormatColumn', 'SettingsPanel']},
    Theme: {CurrentTheme: 'dark'},
    CalculatedColumn: {
      CalculatedColumns: [
        {
          FriendlyName: 'Popularity',
          ColumnId: 'githubPopularity',
          Query: {
            ScalarExpression: '[github_watchers] + [github_stars]',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
          },
        },
        {
          ColumnId: 'totalStars',
          FriendlyName: 'Total Stars',
          Query: {
            AggregatedScalarExpression: 'Sum([github_stars])',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
          },
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-github',
          Scope: {
            ColumnTypes: ['github'],
          },
          Style: {
            FontWeight: 'Bold',
            Alignment: 'Center',
          },
        },
        {
          Name: 'formatColumn-issue-pr',
          Scope: {
            ColumnTypes: ['issue-pr'],
          },
          Style: {
            BackColor: '#8fd3fe',
            ForeColor: 'Black',
          },
        },
        {
          Name: 'formatColumn-CalculatedColumn',
          Scope: {
            ColumnTypes: [AdaptableColumnType.CalculatedColumn],
          },
          Style: {
            ForeColor: 'Pink',
            FontStyle: 'Italic',
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_watchers',
            'github_stars',
            'open_issues_count',
            'closed_issues_count',
            'githubPopularity',
            'totalStars',
            'open_pr_count',
            'closed_pr_count',
            'license',
            'week_issue_change',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'has_projects',
            'has_pages',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

AdapTable Column Types

AdapTable leverages Column Types in 4 main use cases.

Dealing with Special Columns, ie. Calculated or FreeText or Action Columns
When enhancing Pivoting by using Pivot Total Columns
When hiding Columns so they are not visible in the UI to users
When using FDC3 by enabling special FDC3 Columns

There are, currently, 9 column type values provided by AdapTable:

Hint

AdapTable helps developers to configure the correct type property via Intellisense
This is done via the AdaptableColumnType object enabling, for example:

Scope: {
  ColumnTypes: [AdaptableColumnType.CalculatedColumn] // instead of 'calculatedColumn'
},

String Equivalent	AdaptableColumnType Value
`actionColumn`	ActionColumn
`calculatedColumn`	CalculatedColumn
`fdc3Column`	Fdc3Column
`freeTextColumn`	FreeTextColumn
`hiddenColumn`	HiddenColumn
`pivotAnyTotal`	PivotAnyTotal
`pivotGrandTotal`	PivotGrandTotal
`pivotColumnTotal`	PivotColumnTotal
`pivotAggregationTotal`	PivotAggregationTotal

Special Columns

The most common use case for using Column Types in AdapTable is when configuring Special Columns:

Column Types are used here in 2 separate use cases:

updating AG Grid Definitions
providing additional column properties

AG Grid Definitions

Sometimes the developer might wish to refer to an AdapTable Special Column when creating Column Schema Definitions in AG Grid Grid Options.

Hint

This can be useful if you want to place the Column in a Column Group
Or if you want to add an AG Grid specific column definition property (e.g. a custom Tooltip component)

AG Grid Columns which will also serve as Special Columns are marked by configuring the types property of the Column Definition as follows:

Special Column	Value for `type` property
Action Columns	`actionColumn`
Calculated Columns	`calculatedColumn`
FreeText Columns	`freeTextColumn`

Note

By default, AdapTable creates a new AG Grid column for each Special Column it encounters
But in this scenario, it will update (patch) the AG Grid column with extra properties as required

Developer Guide

Defining Special Columns in AG Grid

There are 3 main steps you must follow in order to wire up AdapTable Special Columns in AG Grid:

export const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    groupId: 'demoColGroup',
    headerName: 'Special Columns',
    children: [
      {
        // Create a Calculated Column
        colId: 'subscribersRatio', // has to be same Id as in InitialState
        cellDataType: 'number',
        type: [AdaptableColumnType.CalculatedColumn, 'number-cell'],
        // add a tooltip if required
        tooltipValueGetter: (params: ITooltipParams) => params.data,
        tooltipComponent: CustomTooltip,
      },
      {
        // Create a Free Text Column
        colId: 'comments', // has to be same Id as in InitialState
        cellDataType: 'text',
        type: 'AdaptableColumnType.FreeTextColumn',
        headerTooltip: 'Sometimes high, sometimes low',
      },
    ],
  },
];

Define the Columns in AG Grid

Use a full Column Definition as normal.

Add the ColDef to a Column Group if required.

Provide any components (e.g. Tooltip) as needed.

Caution

The colId value should be the same as that used for ColumnId in the Special Column definition

export const columnDefs: (ColDef | ColGroupDef)[] = [
  {
    groupId: 'demoColGroup',
    headerName: 'Special Columns',
    children: [
      {
        // Create a Calculated Column
        colId: 'subscribersRatio', // has to be same Id as in InitialState
        cellDataType: 'number',
        type: ['AdaptableColumnType.CalculatedColumn', 'number-cell'],
        // add a tooltip if required
        tooltipValueGetter: (params: ITooltipParams) => params.data,
        tooltipComponent: CustomTooltip,
      },
      {
        // Create a Free Text Column
        colId: 'comments',
        cellDataType: 'text',
        type: 'AdaptableColumnType.FreeTextColumn',
        headerTooltip: 'Sometimes high, sometimes low',
      },
    ],
  },
];

Add the appropriate Column Type

Make sure to add correct value to the type property. This should be:

calculatedColumn - for Calculated Columns
freeTextColumn - for FreeText Columns

CalculatedColumn: {
  CalculatedColumns: [
    {
      FriendlyName: 'Subscribers Ratio',
      ColumnId: 'subscribersRatio',
      Query: {
        ScalarExpression: '[github_stars] / [github_watchers]',
      },
      CalculatedColumnSettings: {
        DataType: 'number',
      },
    },
  ],
},
FreeTextColumn: {
  FreeTextColumns: [
    {
      ColumnId: 'comments',
      FreeTextColumnSettings: {
        DataType: 'text',
      },
    },
  ],
},

Define the Special Columns in Initial Adaptable State

Define the Special Columns normally.

AdapTable will then automatically wire up the columns to the exsting AG Grid columns.

This will be done in place of the usual pratice which is to create a new AG Grid column.

Special Column Types

Fork Fork

This demo shows 2 Special Columns that have been predefined in AG Grid:
- Calculated Column - Subscribers Ratio
- Free Text Column - Comments
Both Columns have been predefined in AG Grid with these features:
- Placed in a Column Group (called Special Columns)
- A (cell) Tooltip has been added to the Subscribers Ratio column
- A Header Tooltip has been added to the Comments column
Both Columns have been created in Initial Adaptable State - using same value for AG Grid colID and AdapTable ColumnId

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'AG Grid Defined Special Columns',
  initialState: {
    Dashboard: {
      ModuleButtons: ['CalculatedColumn', 'FreeTextColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'github_watchers',
            'subscribersRatio',
            'comments',
          ],
          Name: 'Standard Layout',
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          FriendlyName: 'Subscribers Ratio',
          ColumnId: 'subscribersRatio',
          Query: {
            ScalarExpression: '[github_stars] / [github_watchers]',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
          },
        },
      ],
    },
    FreeTextColumn: {
      FreeTextColumns: [
        {
          ColumnId: 'comments',
          FriendlyName: 'Comments',

          FreeTextStoredValues: [
            {PrimaryKey: 24195339, FreeText: 'Used by the US team'},
            {PrimaryKey: 224663696, FreeText: 'My personal favourite'},
            {PrimaryKey: 82095231, FreeText: 'Required by Support Team'},
          ],
          FreeTextColumnSettings: {
            Aggregatable: false,
            DataType: 'text',
          },
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-subscribersRatio',
          Scope: {
            ColumnIds: ['subscribersRatio'],
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              FractionDigits: 2,
              Suffix: '%',
            },
          },
        },
      ],
    },
  },
};

Special Column Properties

AdapTable provides a large set of property options for Calculated and FreeText Columns (e.g. Filterable, Groupable etc.)

But sometimes developers will want to add additional properties.

This is achieved by supplying the Column Types in AG Grid Column Definitions, which they (and end users) can then attach to the Special Column.

Hint

This is particularly useful when you have defined bespoke AG Grid Column Types and you want to extend them to columns created at run-time in AdapTable.

The list of additional column type options to show to the run-time user is also defined (like with Scope - see above) in the columnTypes property in Column Options.

Pivot Total Columns

Another use case for using Column Types in AdapTable is when formatting Pivot Total Columns.

AdapTable provides 3 types of Pivot Total Columns each of which is given its own type property value:

Pivot Total Column	Value for `type` property	AdaptableColumnType Value
Pivot Grand Total	`pivotGrandTotal`	ּּ`PivotGrandTotal`
Pivot Column Total	`pivotColumnTotal`	ּּ`PivotColumnTotal`
Pivot Aggregation Total	`pivotAggregationTotal`	ּּ`PivotAggregationTotal`

Note

There is also a PivotAnyTotal column type available (string value is pivotAnyTotal)
This can be used to display all of the 3 Total Column types, particularly useful when formatting and styling

Find Out More

See Creating Pivot Total Columns for more information

Hidden Columns

A further use case for using Column Types in AdapTable is when hiding a Column altogether.

This can be done by setting the column type to hiddenColumn.

Columns marked with this type will not be:

rendered in the Grid
available in the Layout Wizard Editor
listed in the Columns Tool Panel

However they will be available in the Expression Editor and Query Builder in order to use it to create Expressions.

Find Out More

See Hiding Columns in AdapTable for more details and a demo

PreviousManaging Columns NextSetting AG Grid Cell Data Types

Framework: