Table Layouts

Summary

Table Layouts manage Column-related info when the Grid is in standard (ie. non Pivot) mode
They can be created / edited at run-time through the Layout Wizard or configured at design-time

Table Layouts show AG Grid columns in standard (i.e. non pivot) form.

Table Layouts can be provided, and configured, in AdapTable in 3 ways:

at design time using Initial Adaptable State
at run time through the Table Layout UI Wizard
programatically via the Layout API

Table Layouts

Fork Fork

This example contains 10 Table Layouts (each showing a different aspect of Layouts - many of which are explained more fully in other pages in this section):
- Sorted Layout (the Current Layout by default) with sorting on 2 columns: Licence (ASC and also using a Custom Sort) and Name (DESC)
- Custom Header Names where 2 column have been renamed: Name is now 'Project', and Language is 'Programming Language'
- Custom Column Widths where the Name, Language and Topics columns have all been given bespoke widths
- Pinned Columns which has pinned the Name and Language columns to the left and Github Watchers column to the right
- Grouping which has row-grouped AG Grid on the Language and then License columns
- Aggregation - Language column is row-grouped and aggregations have been set for Open Issues (sum) & Closed Issues (max) columns
- Filter - A Grid Filter has been applied together with 4 Column Filters
- Summary - A Row Summary at Top of Grid shows Aggregations for Language, Issue Change, Github Stars, Github Watchers Columns
- Special Cols - contains 3 Special Columns: Calculated Column (Total PRs), FreeText Column(Comments) and an Action Column (Add Star)
- Column Visibility - sets 2 columns (License and Github Stars) to be invisible (but by listing them in Columns they are correctly placed when made visible)

Try It Out

Select different Layouts and see how the AG Grid columns are displayed differently

import {
  ActionColumnButton,
  ActionColumnContext,
  AdaptableOptions,
  CellUpdateRequest,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Table Layouts',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'add_star',
        friendlyName: 'Add Star',
        actionColumnSettings: {
          suppressMenu: true,
          resizable: false,
        },
        actionColumnButton: {
          label: 'Add Star',
          buttonStyle: {
            variant: 'raised',
            tone: 'accent',
          },
          onClick: (
            button: ActionColumnButton<ActionColumnContext>,
            context: ActionColumnContext
          ) => {
            let rowData: any = context.rowNode?.data;
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: rowData.github_stars + 1,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          },
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      Tabs: [
        {
          Name: 'Default',
          Toolbars: ['Layout', 'GridFilter'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    CustomSort: {
      CustomSorts: [
        {
          Name: 'customSort-license',
          ColumnId: 'license',
          SortedValues: ['Other'],
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Sorted',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Sorted',
          ColumnSorts: [
            {
              ColumnId: 'license',
              SortOrder: 'Asc',
            },
            {
              ColumnId: 'name',
              SortOrder: 'Desc',
            },
          ],
          AutoSizeColumns: true,
        },
        {
          ColumnHeaders: {
            name: 'Project',
            language: 'Programming Language',
          },
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          //  AutoSizeColumns: true,
          Name: 'Custom Header Names',
        },
        {
          TableColumns: ['name', 'language', 'github_stars', 'topics'],
          Name: 'Custom Column Widths',
          ColumnSizing: {
            name: {Width: 100},
            language: {Width: 118},
            topics: {Width: 700},
          },
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Pinned Columns',
          ColumnPinning: {
            name: 'left',
            language: 'left',
            github_watchers: 'right',
          },
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'github_stars',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Grouping',
          RowGroupedColumns: ['language', 'license'],
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'open_issues_count',
            'closed_issues_count',
          ],
          Name: 'Aggregation',
          RowGroupedColumns: ['language'],
          TableAggregationColumns: [
            {
              ColumnId: 'closed_issues_count',
              AggFunc: 'max',
            },
            {
              ColumnId: 'open_issues_count',
              AggFunc: 'sum',
            },
          ],
          AutoSizeColumns: true,
        },
        {
          Name: 'Filter',
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'github_watchers',
            'license',
            'pushed_at',
            'updated_at',
            'has_wiki',
            'created_at',
            'description',
            'open_issues_count',
          ],
          GridFilter: {
            Expression: '[license]="MIT License" OR [github_watchers] > 2000',
          },
          ColumnFilters: [
            {
              ColumnId: 'language',
              Predicates: [
                {
                  PredicateId: 'In',
                  Inputs: ['TypeScript', 'JavaScript'],
                },
              ],
            },
            {
              ColumnId: 'github_stars',
              Predicates: [
                {
                  PredicateId: 'Between',
                  Inputs: ['5000', '90000'],
                },
              ],
            },
            {
              ColumnId: 'name',
              Predicates: [
                {
                  PredicateId: 'EndsWith',
                  Inputs: ['.js'],
                },
              ],
            },
            {
              ColumnId: 'pushed_at',
              Predicates: [
                {
                  PredicateId: 'After',
                  Inputs: ['2016-01-01'],
                },
              ],
            },
          ],
          AutoSizeColumns: true,
        },
        {
          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',
              },
            },
          ],
          Name: 'Summary',
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'comments',
            'github_stars',
            'add_star',
            'total_pr_count',
            'open_pr_count',
            'closed_pr_count',
            'github_watchers',
            'license',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'closed_issues_count',
          ],
          Name: 'Special Cols',
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          ColumnVisibility: {
            license: false,
            github_stars: false,
          },
          Name: 'Column Visibility',
          AutoSizeColumns: true,
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          FriendlyName: 'Total PRs',
          ColumnId: 'total_pr_count',
          Query: {
            ScalarExpression: '[open_pr_count] + [closed_pr_count]',
          },
          CalculatedColumnSettings: {
            DataType: 'number',
            Filterable: true,
          },
        },
      ],
    },
    FreeTextColumn: {
      FreeTextColumns: [
        {
          ColumnId: 'comments',
          FriendlyName: 'Comments',
          FreeTextStoredValues: [
            {PrimaryKey: 24195339, FreeText: 'Used by US team'},
            {PrimaryKey: 224663696, FreeText: 'My favourite'},
            {PrimaryKey: 82095231, FreeText: 'Required by Support'},
          ],
          FreeTextColumnSettings: {
            Resizable: true,
            DataType: 'text',
          },
        },
      ],
    },
  },
};

Defining Table Layouts

When providing a Layout in Initial Adaptable State every property can be supplied if required.

There are many different properties that can be included in a Layout definition.

Hint

In this section we divide Layouts into many different types for convenience (e.g. Grouping, Filtered etc.)
But, in practice, any Layout can include any combination of these properties as required

Deep Dive

Anatomy of an AdapTable Table Layout

Base Properties

TableLayout object inherits from LayoutBase (used also for Pivot Layouts) which contains these properties:

Property	Description
AutoSizeColumns	Whether Columns should autosize when Layout first loads
ColumnFilters	Collection of Column Filters to apply in Layout
ColumnGroupValues	Defines which Column Groups are expanded / collapsed
ColumnHeaders	Set of custom header names for some (or all) Columns
ColumnPinning	Details of which Columns are pinned
ColumnSizing	Controls size (width or flex & min/max) for Columns
ColumnSorts	Sorting to apply in the Layout
GrandTotalRow	Position of the Grand Total Row in the Layout
GridFilter	Grid Filter to apply in Layout
Name	Name of the Layout as it appears in the Layout toolbar and tool panel
RowGroupDisplayType	Display Row Grouped Columns as 'single' or 'multi' column
RowGroupValues	Defines which Row Groups are expanded / collapsed
SuppressAggFuncInHeader	Hides the aggFunc in Column header: e.g. 'sum(Price)' becomes 'Price'
IsReadOnly	Sets Entity to ReadOnly (overwriting a Strategy Entitlement of 'Full')

Table Properties

The TableLayout object additionally contains these properties which are specific to Table Layouts:

Property	Description
ColumnVisibility	Map of Table Column Visibility
RowGroupedColumns	Columns which are row-grouped when the Layout is applied
RowSummaries	Pinned Rows that display Aggregation Info for a whole Column
TableAggregationColumns	Columns showing aggregated values in Grouped Rows; a record of ColumnId and aggfunc (e.g. sum) or 'true' (to use default aggfunc)
TableColumns	List of Column Ids to include in Table Layout
IsReadOnly	Sets Entity to ReadOnly (overwriting a Strategy Entitlement of 'Full')

Table Layout UI Wizard

The Layout Wizard enables Table Layouts to be created and edited by run-time users.

It provides AdapTable users with a series of 8 steps to manage Table Layouts at run-time:

General Settings - particularly Layout Name
Columns - visibility, order, width, pinning and headers of Columns in the Layout can be set
Row Groups - which columns are Row Grouped
Aggregations - which columns will show aggregated info when in a Group Row
Row Summaries - which Row Summaries to display- Sorting - what Column Sorts are applied
Column Filters - sets the active Column Filters
Grid Filter - applies a Grid Filter
Summary - rich, visual summary of all settings applied in previous steps

Find Out More

See Using the Layout UI Wizard for more information

PreviousTechnical Reference NextColumn Order

Framework: