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!

Pinning via Column Dragging

It is possible to pin a column by moving the column in the following ways:

  • When other columns are pinned, drag the column to the existing pinned area.
  • When no columns are pinned, drag the column to the edge of the grid and wait for approximately one second. The grid will then assume you want to pin and create a pinned area and place the column into it.

Lock Pinned

If you do not want the user to be able to pin using the UI, set the property lockPinned=true. This will block the UI in the following way:

  • Dragging a column to the pinned section will not pin the column.
  • For ag-Grid Enterprise, the column menu will not have a pin option.

The example below demonstrates columns with pinning locked. The following can be noted:

  • The column Athlete is pinned via the configuration and has lockPinned=true. This means the column will be pinned always, it is not possible to drag the column out of the pinned section.
  • The column Age is not pinned and has lockPinned=true. This means the column cannot be pinned by dragging the column.
  • All other columns act as normal. They can be added and removed from the pinned section by dragging.