The Ignite UI for Web Components Column Pinning feature in Web Components Hierarchical 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 Hierarchical Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.
Web Components Hierarchical Grid Column Pinning Example
This example demonstrates how you can pin a column or multiple columns to the left or right side of the IgcHierarchicalGridComponent.
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.
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.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridname="grid"id="grid"id="grid"column-selection="single"primary-key="CustomerID"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-pinning
></igc-grid-toolbar-pinning></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="CustomerID"hidden="true"></igc-column><igc-columnfield="Company"header="Company Name"pinned="true"></igc-column><igc-columnfield="ContactName"header="Contact Name"></igc-column><igc-columnfield="ContactTitle"header="Contact Title"></igc-column><igc-columnfield="Address"header="Address"></igc-column><igc-columnfield="City"header="City"></igc-column><igc-columnfield="PostalCode"header="Postal Code"></igc-column><igc-columnfield="Country"header="Country"></igc-column><igc-columnfield="Phone"></igc-column><igc-columnfield="Fax"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-columnfield="OrderDate"header="Order Date"data-type="date"resizable="true"></igc-column><igc-columnfield="RequiredDate"header="Required Date"data-type="date"resizable="true"></igc-column><igc-columnfield="ShippedDate"header="Shipped Date"data-type="date"resizable="true"></igc-column><igc-columnfield="ShipName"header="Ship Name"data-type="string"resizable="true"pinned="true"></igc-column><igc-columnfield="ShippedVia"header="Shipped Via"data-type="string"resizable="true"></igc-column><igc-columnfield="Freight"header="Freight"data-type="string"resizable="true"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="UnitPrice"header="Unit Price"data-type="string"resizable="true"></igc-column><igc-columnfield="Quantity"header="Quantity"data-type="string"resizable="true"></igc-column><igc-columnfield="Discount"header="Discount"data-type="string"resizable="true"></igc-column><igc-columnfield="Weight"header="Weight"data-type="string"resizable="true"></igc-column><igc-columnfield="Length"header="Length"data-type="string"resizable="true"></igc-column><igc-columnfield="TotalPrice"header="Total Price"data-type="string"resizable="true"></igc-column></igc-row-island></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
import'igniteui-webcomponents-grids/grids/combined';
import { IgcHierarchicalGridComponent, IgcColumnComponent } from'igniteui-webcomponents-grids/grids';
import HierarchicalCustomersData from'./HierarchicalCustomersData.json';
import { IgcColumnTemplateContext } from'igniteui-webcomponents-grids/grids';
import { html, nothing } from'lit-html';
import"igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import"./index.css";
exportclassSample{
private grid: IgcHierarchicalGridComponent
private column1: IgcColumnComponent
private column2: IgcColumnComponent
private column3: IgcColumnComponent
private column4: IgcColumnComponent
private column5: IgcColumnComponent
private column6: IgcColumnComponent
private column7: IgcColumnComponent
private column8: IgcColumnComponent
private column9: IgcColumnComponent
private column10: IgcColumnComponent
private column11: IgcColumnComponent
private column12: IgcColumnComponent
private column13: IgcColumnComponent
private column14: IgcColumnComponent
private column15: IgcColumnComponent
private column16: IgcColumnComponent
private column17: IgcColumnComponent
private column18: IgcColumnComponent
private column19: IgcColumnComponent
private column20: IgcColumnComponent
private column21: IgcColumnComponent
private _bind: () =>void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;
var column7 = this.column7 = document.getElementById('column7') as IgcColumnComponent;
var column8 = this.column8 = document.getElementById('column8') as IgcColumnComponent;
var column9 = this.column9 = document.getElementById('column9') as IgcColumnComponent;
var column10 = this.column10 = document.getElementById('column10') as IgcColumnComponent;
var column11 = this.column11 = document.getElementById('column11') as IgcColumnComponent;
var column12 = this.column12 = document.getElementById('column12') as IgcColumnComponent;
var column13 = this.column13 = document.getElementById('column13') as IgcColumnComponent;
var column14 = this.column14 = document.getElementById('column14') as IgcColumnComponent;
var column15 = this.column15 = document.getElementById('column15') as IgcColumnComponent;
var column16 = this.column16 = document.getElementById('column16') as IgcColumnComponent;
var column17 = this.column17 = document.getElementById('column17') as IgcColumnComponent;
var column18 = this.column18 = document.getElementById('column18') as IgcColumnComponent;
var column19 = this.column19 = document.getElementById('column19') as IgcColumnComponent;
var column20 = this.column20 = document.getElementById('column20') as IgcColumnComponent;
var column21 = this.column21 = document.getElementById('column21') as IgcColumnComponent;
this._bind = () => {
grid.data = this.hierarchicalCustomersData;
column1.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column2.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column3.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column4.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column5.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column6.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column7.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column8.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column9.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column10.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column11.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column12.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column13.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column14.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column15.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column16.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column17.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column18.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column19.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column20.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
column21.headerTemplate = this.hierarchicalGridPinHeaderTemplate;
}
this._bind();
}
private _hierarchicalCustomersData: any[] = HierarchicalCustomersData;
publicgethierarchicalCustomersData(): any[] {
returnthis._hierarchicalCustomersData;
}
public hierarchicalGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
const column = (ctx asany).column;
return html`<div><spanstyle="float:left">${column.field}</span><spanstyle="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column)}>📌</span></div>`;
};
publictoggleColumnPin(field: IgcColumnComponent) {
if(field) {
field.pinned = !field.pinned;
}
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample ig-typography"><divclass="container fill"><igc-hierarchical-gridname="grid"id="grid"id="grid"column-selection="single"primary-key="CustomerID"><igc-grid-toolbar
><igc-grid-toolbar-actions
><igc-grid-toolbar-pinning
></igc-grid-toolbar-pinning></igc-grid-toolbar-actions></igc-grid-toolbar><igc-columnfield="CustomerID"hidden="true"></igc-column><igc-columnfield="Company"header="Company Name"pinned="true"name="column1"id="column1"></igc-column><igc-columnfield="ContactName"header="Contact Name"name="column2"id="column2"></igc-column><igc-columnfield="ContactTitle"header="Contact Title"name="column3"id="column3"></igc-column><igc-columnfield="Address"header="Address"name="column4"id="column4"></igc-column><igc-columnfield="City"header="City"name="column5"id="column5"></igc-column><igc-columnfield="PostalCode"header="Postal Code"name="column6"id="column6"></igc-column><igc-columnfield="Country"header="Country"name="column7"id="column7"></igc-column><igc-columnfield="Phone"name="column8"id="column8"></igc-column><igc-columnfield="Fax"name="column9"id="column9"></igc-column><igc-row-islandchild-data-key="Orders"auto-generate="false"><igc-columnfield="OrderDate"header="Order Date"data-type="date"resizable="true"name="column10"id="column10"></igc-column><igc-columnfield="RequiredDate"header="Required Date"data-type="date"resizable="true"name="column11"id="column11"></igc-column><igc-columnfield="ShippedDate"header="Shipped Date"data-type="date"resizable="true"name="column12"id="column12"></igc-column><igc-columnfield="ShipName"header="Ship Name"data-type="string"resizable="true"pinned="true"name="column13"id="column13"></igc-column><igc-columnfield="ShippedVia"header="Shipped Via"data-type="string"resizable="true"name="column14"id="column14"></igc-column><igc-columnfield="Freight"header="Freight"data-type="string"resizable="true"name="column15"id="column15"></igc-column><igc-row-islandchild-data-key="OrderDetails"auto-generate="false"><igc-columnfield="UnitPrice"header="Unit Price"data-type="string"resizable="true"name="column16"id="column16"></igc-column><igc-columnfield="Quantity"header="Quantity"data-type="string"resizable="true"name="column17"id="column17"></igc-column><igc-columnfield="Discount"header="Discount"data-type="string"resizable="true"name="column18"id="column18"></igc-column><igc-columnfield="Weight"header="Weight"data-type="string"resizable="true"name="column19"id="column19"></igc-column><igc-columnfield="Length"header="Length"data-type="string"resizable="true"name="column20"id="column20"></igc-column><igc-columnfield="TotalPrice"header="Total Price"data-type="string"resizable="true"name="column21"id="column21"></igc-column></igc-row-island></igc-row-island></igc-hierarchical-grid></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Pinning Limitations
Setting column widths in percentage (%) explicitly makes the IgcHierarchicalGridComponent 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 IgcHierarchicalGridComponent.
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: