Expand All

  Getting Started

  Reference

  Features

  Row Models

  Themes

  Components

  Examples

  Third Party

Misc

Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

Column Pinning

You can pin columns by setting the pinned attribute on the column definition to either 'left' or 'right'.

colDef = {
    headerName: "Athlete",
    field: "athlete",
    pinned: 'left'
}

Below shows an example with two pinned columns on the left and one pinned columns on the right. The example also demonstrates changing the pinning via the API at runtime.

The grid will reorder the columns so that 'left pinned' columns come first and 'right pinned' columns come last. In the example below the state of pinned columns impacts the order of the columns such that when 'Country' is pinned, it jumps to the first position.

Jump To & Pinning

Below shows jumping to rows and cols via the API. Jumping to a pinned col makes no sense, as the pinned cols, by definition, are always visible. So below, if you try to jump to a pinned col, the grid will print a warning to the console.

Example Pinning

If you pin to many columns, so that the pinned columns take up the whole width of the grid, you will not be able to view the non-pinned columns. If this happens for you, please do not raise an issue with the ag-Grid team. Instead tell your users to stop pinning so many columns. Every month someone raises this with us and asks us to fix - it's like saying when I take the wheels off my car it is not possible to steer!