Grid Column Pinning

A column or multiple columns can be pinned to the left-hand side of the grid. Column Pinning in Ignite UI for Angular allows the users to always see the pinned columns while horizontally scrolling.


Column Pinning API

Each column can be pinned, as long as the pinned area does not become wider than the grid itself. Column pinning is controlled through the pinned input of the igx-column. Pinned columns are always rendered on the left side of the grid and stay fixed through horizontal scrolling of the unpinned columns in the grid body.

<igx-grid #grid1 [data]="data | async" [width]="700px" [autoGenerate]="false" [paging]="true" [perPage]="6" (onColumnInit)="initColumns($event)"
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber"></igx-column>
    <igx-column [field]="TrackProgress"></igx-column>

You may also use the grid's pinColumn or unpinColumn methods of the IgxGridComponent to pin or unpin columns by their field name:


Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state. pinColumn also fails when the result would mean that the pinned area becomes larger than or the same size as the grid itself. Consider the following example:

<igx-grid #grid1 [data]="data | async" [width]="300px" [autoGenerate]="false">
    <igx-column [field]="Name" [width]="200px" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber" [width]="200px"></igx-column>
var succeed = this.grid.pinColumn("AthleteNumber"); // pinning fails and succeed will be false

If pinning the AthleteNumber column is allowed the pinned area would exceed the grid's width.

A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the onColumnPinning event and changing the insertAtIndex property of the event arguments to the desired position index.

<igx-grid #grid1 [data]="data | async" [autoGenerate]="true" (onColumnPinning)="columnPinning($event)"></igx-grid>
public columnPinning(event) {
    if (event.column.field === "Name") {
        event.insertAtIndex = 0;

Pinning Limitations

  • Setting column widths in percentage (%) explicitly makes the grid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the grid.


This section will provide you with hints what to do if you are having trouble with the Column Pinning feature.


  • igxGrid - The pinned area exceeds maximum pinned width. The following columns were unpinned to prevent further issues: ... . - This warning is thrown when the user has defined too many pinned columns initially. The combined width of the initially pinned columns should not exceed 80% of the grid width. Otherwise the grid by default takes the first columns (in order of their definition) that don't exceed the limit and the rest are unpinned (the columns listed in the warning). You can execute your own logic in order to determine if you want to unpin some columns manually on initialization using the onColumnInit event before the grid initializes the pinning. It is triggered for each column.


Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub