Table Layouts

Table Layouts - Column Pinning

Summary

  • The Table Layout fully supports AG Grid Pinning

Table (and Pivot) Layouts can also include Pinning information.

You can pin to the left or right and include multiple columns if required.

Column Pinning in AdapTable can be set in 3 ways:

  • In the Layout definition (in Layout Initial State) using the ColumnPinning property (see below)

    Note

    Column Pinning defined in a Layout take precedence over pinning set in columnDefs in GridOptions

  • In the Table Layout UI Wizard

    Hint

    Click the expander next to any Column in the Columns step, to access the Pinning dropdown for that Column

  • Via the Pin Column menu item in the AG Grid Column Menu

Caution

There is no fourth option to set pinning directly in ColDefs - any pinning configured there is ignored by AdapTable

Developer Guide

Defining a Layout with Pinning

// Pins the name column to the left and updated_at to the right
const initialState: InitialState = {
 Layout: {
    CurrentLayout: 'Pinning Layout',
    Layouts: [
    {
      Name: 'Pinning Layout',
      TableColumns: ['name', 'license', 'github_stars', 'language', 'open_pr_count'],
      ColumnPinning: {
        name: 'left',
        updated_at: 'right',
      },
    }
  ]
 },
};
1
Provide Column Pinning

A Layout definition also allows for Column pinning information to be provided.

The ColumnPinning property (of type ColumnDirectionMap) is an array containing 2 properties:

  • ColumnId - a string (the id of the Column)
  • the pinning location - can be either left or right
Table Layouts: Column Pinning
Fork
  • This example contains a Pinned Columns Layout which has pinned the Name and Language columns to the left and Github Watchers column to the right

AG Grid Column Defs

Each Column in AG Grid Column Defs has a pinned property which can be set to 'left' or 'right'.

This property is ignored by AdapTable, however, when displaying columns.

Only pinning set in the ColumnPinning property in the Layout is respected.

Caution

Do not set pinning in AG Grid ColDefs as this will be ignored by AdapTable

Table Layouts: ColDef Pinning
Fork
  • This example contains a Layout where no pinning has been configured, but the ColDefs has pinning on 3 Columns
  • The ColDefs pinning is ignored by AdapTable and the columns are not pinned

Autogenerated Columns

AdapTable supports pinning of Columns automatically created by AG Grid.

This is typically done by adding the autogenerated ColumnId to the ColumnPinning property in the Layout.

Find Out More

PreviousColumn SizingNextColumn Sorting