Angular Grid Column Pinning

    A column or multiple columns can be pinned to the left or right side of the Angular UI Grid. Column Pinning in Ignite UI for Angular allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Grid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning API.

    Angular Grid Column Pinning Example

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    Column Pinning API

    Column pinning is controlled through the pinned input of the igx-column. Pinned columns are rendered on the left side of the Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Grid body.

    <igx-grid #grid1 [data]="data | async" [width]="700px" [autoGenerate]="false" (columnInit)="initColumns($event)"
    (selected)="selectCell($event)">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="AthleteNumber"></igx-column>
    <igx-column [field]="TrackProgress"></igx-column>
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-grid>
html

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

    this.grid.pinColumn('AthleteNumber');
this.grid.unpinColumn('Name');
typescript

    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.

    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 columnPin event and changing the insertAtIndex property of the event arguments to the desired position index.

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

    Pinning Position

    You can change the column pinning position via the pinning configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right.

    <igx-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-grid>
html
    public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
typescript

    Demo

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Custom Column Pinning UI

    You can define your custom UI and change the pin state of the columns via the related API.

    Let's say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column's pin state. This can be done by creating a header template for the column with a custom icon.

    <igx-grid #grid1 [data]="data" [width]="'100%'" [height]="'500px'">
    <igx-column #col *ngFor="let c of columns" [field]="c.field" [header]="c.header" [width]="c.width" [pinned]='c.pinned'
        [hidden]='c.hidden' [headerClasses]="'customHeaderSyle'">
        <ng-template igxHeader>
            <div class="title-inner">
                <span style="float:left">{{col.header}}</span>
                <igx-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" (click)="toggleColumn(col)"></igx-icon>
            </div>
        </ng-template>
    </igx-column>
</igx-grid>
html

    On click of the custom icon the pin state of the related column can be changed using the column's API methods.

    public toggleColumn(col: ColumnType) {
    col.pinned ? col.unpin() : col.pin();
}
typescript

    Demo

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA Banner

    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.

    Styling

    The igxGrid allows styling through the Ignite UI for Angular Theme Library. The grid's theme exposes a wide variety of properties, which allow the customization of all the features of the grid.

    In the below steps, we are going through the steps of customizing the grid's Pinning styling.

    Importing global theme

    To begin the customization of the Pinning feature, you need to import the index file, where all styling functions and mixins are located.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

    Defining custom theme

    Next, create a new theme, that extends the grid-theme and accepts the parameters, required to customize the Pinning feature as desired.

    $custom-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);
scss

    Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.

    Applying the custom theme

    The easiest way to apply your theme is with a sass @include statement in the global styles file:

    @include css-vars($custom-theme);
scss

    Demo

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    The sample will not be affected by the selected global theme from Change Theme.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.