Web Components Grid Column Pinning

    The Ignite UI for Web Components Column Pinning feature in Web Components Grid enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the IgcGridComponent. There’s an integrated UI for Column Pinning, accessible via the Web Components Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.

    Web Components Grid Column Pinning Example

    This example demonstrates how you can pin a column or multiple columns to the left or right side of the IgcGridComponent.

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

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

    Column Pinning API

    Column pinning is controlled through the pinned property of the IgcColumnComponent. Pinned columns are rendered on the left side of the IgcGridComponent by default and stay fixed through horizontal scrolling of the unpinned columns in the IgcGridComponent body.

    <igc-grid id="grid1" width="700px" auto-generate="false">
    <igc-column field="Name" pinned="true"></igc-column>
    <igc-column field="AthleteNumber"></igc-column>
    <igc-column field="TrackProgress"></igc-column>
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>
html
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
}
ts

    You may also use the IgcGridComponent's pinColumn or unpinColumn methods of the IgcGridComponent 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.

    <igc-grid id="dataGrid" auto-generate="true"></igc-grid>
html
    constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnPin", this.columnPinning);
}
typescript
    public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}
typescript
    Ignite UI for Web Components | CTA Banner

    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.

    <igc-grid id="dataGrid" auto-generate="true"></igc-grid>
html
    var grid = document.getElementById('dataGrid') as IgcGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };
typescript

    Demo

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    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 columns with a custom icon.

    <igc-grid id="grid1" width="100%" height="500px" auto-generate="false">
    <igc-column id="Name" field="Name" data-type="String" width="250px"></igc-column>
    <igc-column id="Title" field="Title" data-type="String" width="300px"></igc-column>
    <igc-column id="ID" field="ID" data-type="Number" width="200px"></igc-column>
    <igc-column id="HireDate" field="HireDate" header="Hire Date" data-type="Date" width="200px"></igc-column>
    <igc-column id="Age" field="Age" data-type="Number" width="200px"></igc-column>
    <igc-column id="Address" field="Address" data-type="String" width="200px"></igc-column>
    <igc-column id="City" field="City" data-type="String" width="200px"></igc-column>
    <igc-column id="Country" field="Country" data-type="String" width="200px"></igc-column>
    <igc-column id="Fax" field="Fax" data-type="String" width="200px"></igc-column>
    <igc-column id="PostalCode" field="PostalCode" header="Postal Code" data-type="String" width="200px"></igc-column>
    <igc-column id="Phone" field="Phone" data-type="String" width="200px"></igc-column>
</igc-grid>
html
    constructor() {
    var grid1 = document.getElementById('grid1') as IgcGridComponent;
    var Name = document.getElementById('Name') as IgcColumnComponent;
    var Title = document.getElementById('Title') as IgcColumnComponent;
    var ID = document.getElementById('ID') as IgcColumnComponent;
    var HireDate = document.getElementById('HireDate') as IgcColumnComponent;
    var Age = document.getElementById('Age') as IgcColumnComponent;
    var Address = document.getElementById('Address') as IgcColumnComponent;
    var City = document.getElementById('City') as IgcColumnComponent;
    var Country = document.getElementById('Country') as IgcColumnComponent;
    var Fax = document.getElementById('Fax') as IgcColumnComponent;
    var PostalCode = document.getElementById('PostalCode') as IgcColumnComponent;
    var Phone = document.getElementById('Phone') as IgcColumnComponent;

    grid.data = this.data;
    Name.headerTemplate = this.pinHeaderTemplate;
    Title.headerTemplate = this.pinHeaderTemplate;
    ID.headerTemplate = this.pinHeaderTemplate;
    HireDate.headerTemplate = this.pinHeaderTemplate;
    Age.headerTemplate = this.pinHeaderTemplate;
    Address.headerTemplate = this.pinHeaderTemplate;
    City.headerTemplate = this.pinHeaderTemplate;
    Country.headerTemplate = this.pinHeaderTemplate;
    Fax.headerTemplate = this.pinHeaderTemplate;
    PostalCode.headerTemplate = this.pinHeaderTemplate;
    Phone.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}
ts

    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: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}
typescript

    Demo

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Pinning Limitations

    • Setting column widths in percentage (%) explicitly makes the IgcGridComponent 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 IgcGridComponent.

    Styling

    In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set an ID for the grid first:

    <igc-grid id="grid"></igc-grid>
html

    Then set the related CSS properties to this class:

    #grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}
css

    Demo

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.