Table Layouts - Column Order

Summary

The Table Layout provides a list of Columns in the TableColumns property
These Columns are displayed in the Grid in the order they are listed
They can be either Columns provided in AG Grid ColDefs or AdapTable Special Columns

Every Table Layout must include a TableColumns property (a string array of Column Ids).

This lists every column to be displayed in AG Grid when the Layout loads - in the order provided.

Note

This is a mandatory property (though an empty array can be provided if you wish to display no Columns initially)
The only other mandatory property is Name - how the Layout is referred to

Developer Guide

Defining Layout Columns

// Create a Layout named 'Basic Layout'
// Make that Layout the Current Layout
// Add 7 Columns
const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'Basic Layout',
    Layouts: [
    {
      Name: 'Basic Layout',
      TableColumns: [
        'name',
        'github_stars',
        'github_watchers',
        'language',
        'open_pr_count',
        'closed_pr_count',
        'updated_at',
      ],
    }
  ]
 },

1

Set Name of the Layout

The Name is how the Layout is referred to in the AdapTable UI

2

Define the Table Columns

The TableColumns property is an array of (string) Column Ids, displayed in the order provided here.

Any Columns not listed here, but provided in ColumnDefs, will still be available in the Layout Wizard (and also the Column ToolPanel).

Hint

Use ColumnVisibility property to define which Columns are invisible when Layout first runs (while maintaining their order if made visible)

3

Set the Current Layout

Set one Layout as Current Layout

This Layout will be automatically applied at startup

Any Columns which are not listed in the Layout will not be (initially) rendered in the Grid.

Note

Non-listed Columns will be included in the Columns Tool Panel in the position they appear in AG Grid ColDefs
This means that when the column is checked in the ToolPanel, it will appear in the Grid in that position

Table Layouts: Column Order

Fork Fork

This example lists many columns in TableColumns property of Layout but with 2 Columns missing: Github Stars and License
These columns are therefore not visible in the Grid, and are placed in the Columns Tool Panel in the order they appear in ColDefs (positions 3 and 10 respectively)

Special Columns

AdapTable provides 3 Special Columns which are not listed in ColDefs but which can appear in the Grid:

Each of these Special Columns has a ColumnId which, if included in TableColumns, will display the Column.

Developer Guide

Adding Special Columns

// Create a Layout which includes a Calculated Column and a FreeText Column
const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'Special Cols Layout',
    Layouts: [
    {
      Name: 'Special Cols Layout',
      TableColumns: [
        'name',
        'github_stars',
        'github_watchers',
        'total_pr_count',
        'comments',
      ],
    }
  ]
 },
   CalculatedColumn: {
    CalculatedColumns: [
      {
        FriendlyName: 'Total PRs',
        ColumnId: 'total_pr_count',
        Query: { ScalarExpression: '[open_pr_count] * 2' },
        CalculatedColumnSettings: { DataType: 'number' },
      },
    ],
  },
  FreeTextColumn: {
    FreeTextColumns: [
      {
        ColumnId: 'comments',
        FriendlyName: 'Comments',
        FreeTextColumnSettings: { DataType: 'text' },
      },
    ],
  },
};

1

Create the Special Columns

Create the Special Columns in Initial AdapTable Stat.

These can be any of:

2

Define the Table Columns, adding the Special Columns

Add the Ids of the Special Columns to the TableColumns property

FAQ

I listed the Column in TableColumns but I dont see it when my Grid loads Check that the Column has not been hidden. This can happen in 2 ways:

by being hidden (via the Layout's ColumnVisibility prop), in which case it can be made visible again
by being set to be always hidden (in which case it can be never be made visible)

PreviousTable Layouts NextColumn Visibility