Angular Tree 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 Tree Grid. The Material UI Grid has a built-in column pinning UI, which can be used through the Tree 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.
The fastest, feature-rich Angular Data Grid , offering paging, sorting, filtering, grouping, exporting to PDF and Excel, and more. Everything you need for the ultimate app building experience and data manipulation.
Angular Tree Grid Column Pinning Example
import { Component, ViewChild, OnInit, inject } from '@angular/core' ;
import { IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { ActivatedRoute } from '@angular/router' ;
import { NgClass } from '@angular/common' ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
@Component ({
providers : [],
selector : 'app-grid-sample' ,
styleUrls : ['tree-grid-toolbar-pinning.component.scss' ],
templateUrl : 'tree-grid-toolbar-pinning.component.html' ,
imports : [NgClass, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent]
})
export class TreeGridPinningToolbarSampleComponent implements OnInit {
private activatedRoute = inject(ActivatedRoute);
@ViewChild ('treeGrid' , { static : true }) public treeGrid: IgxTreeGridComponent;
public data: any [];
public useDarkTheme: boolean = false ;
constructor ( ) {
this .data = generateEmployeeDetailedFlatData();
}
public ngOnInit(): void {
this .activatedRoute.queryParams.subscribe(params => {
this .useDarkTheme = params.dark === 'true' ;
});
}
}
ts COPY CODE <div [ngClass ]="{'grid__wrapper': true, 'dark-theme': useDarkTheme }" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" primaryKey ="ID" foreignKey ="ParentID" [autoGenerate ]="false" height ="600px"
width ="100%" >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-grid-toolbar-pinning > </igx-grid-toolbar-pinning >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<igx-column [field ]="'Name'" dataType ="string" width ="250px" > </igx-column >
<igx-column [field ]="'Title'" dataType ="string" width ="300px" [pinned ]='true' > </igx-column >
<igx-column [field ]="'HireDate'" header ="Hire Date" dataType ="date" width ="200px" > </igx-column >
<igx-column [field ]="'Age'" dataType ="number" width ="100px" > </igx-column >
<igx-column [field ]="'Address'" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'City'" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'Country'" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'Fax'" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'PostalCode'" header ="Postal Code" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'Phone'" dataType ="string" width ="200px" > </igx-column >
</igx-tree-grid >
</div >
html COPY CODE :host ::ng-deep .title {
width: 100% ;
}
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
scss COPY CODE
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 Tree Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Tree Grid body.
<igx-tree-grid #treeGrid [data ]="data" primaryKey ="ID" foreignKey ="ParentID" [autoGenerate ]="false" >
<igx-column [field ]="Name" [pinned ]="true" > </igx-column >
<igx-column [field ]="Title" > </igx-column >
<igx-column [field ]="ID" > </igx-column >
</igx-tree-grid >
html
You may also use the Tree Grid's pinColumn
or unpinColumn
methods of the IgxTreeGridComponent
to pin or unpin columns by their field name:
this .treeGrid.pinColumn('Title' );
this .treeGrid.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-tree-grid #treeGrid [data ]="data" primaryKey ="ID" foreignKey ="ParentID" [autoGenerate ]="true" (columnPin )="columnPinning($event)" > </igx-tree-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-tree-grid #grid1 [data ]="data" [autoGenerate ]="true" [pinning ]="pinningConfig" > </igx-tree-grid >
html
public pinningConfig: IPinningConfig = { columns : ColumnPinningPosition.End };
typescript
Demo
import { Component, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core' ;
import { ColumnPinningPosition, IgxColumnComponent, IgxTreeGridComponent, IPinningConfig, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
@Component ({
encapsulation : ViewEncapsulation.None,
providers : [],
selector : 'app-tree-grid-sample' ,
styleUrls : ['tree-grid-right-pinning.component.scss' ],
templateUrl : 'tree-grid-right-pinning.component.html' ,
imports : [IgxTreeGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxColumnComponent]
})
export class TreeGridRightPinningSampleComponent implements OnInit {
@ViewChild ('grid1' , { static : true })
public grid1: IgxTreeGridComponent;
@ViewChild ('pinTemplate' , { read : TemplateRef, static : true })
public pinTemplate: TemplateRef<any >;
public data: any [];
public columns: any [];
public pinningConfig: IPinningConfig = { columns : ColumnPinningPosition.End };
private _columnsPinned = true ;
public ngOnInit(): void {
this .data = generateEmployeeDetailedFlatData();
}
public toggleColumnPinning(col: IgxColumnComponent): void {
col.pinned ? col.unpin() : col.pin();
}
public get columnsPinned (): boolean {
return this ._columnsPinned;
}
public set columnsPinned (pinned ) {
this ._columnsPinned = !this ._columnsPinned;
}
}
ts COPY CODE <div class ="grid__wrapper" >
<igx-tree-grid #grid1 [data ]="data" primaryKey ="ID" foreignKey ="ParentID" [autoGenerate ]="false" [width ]="'100%'"
[height ]="'480px'" [pinning ]="pinningConfig" [autoGenerate ]="false" >
<igx-grid-toolbar >
<igx-grid-toolbar-actions >
<igx-grid-toolbar-pinning > </igx-grid-toolbar-pinning >
</igx-grid-toolbar-actions >
</igx-grid-toolbar >
<igx-column [field ]="'Name'" dataType ="string" width ="250px" [disablePinning ]="true" > </igx-column >
<igx-column [field ]="'Title'" dataType ="string" width ="250px" [pinned ]="true" > </igx-column >
<igx-column [field ]="'ID'" dataType ="number" width ="100px" > </igx-column >
<igx-column [field ]="'HireDate'" header ="Hire Date" dataType ="date" width ="200px" > </igx-column >
<igx-column [field ]="'Age'" dataType ="number" width ="200px" > </igx-column >
<igx-column [field ]="'Address'" dataType ="string" width ="200px" [disablePinning ]="true" > </igx-column >
<igx-column [field ]="'City'" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'Country'" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'Fax'" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'PostalCode'" header ="Postal Code" dataType ="string" width ="200px" > </igx-column >
<igx-column [field ]="'Phone'" dataType ="string" width ="200px" > </igx-column >
</igx-tree-grid >
</div >
html COPY CODE .title-inner {
display : flex;
justify-content : space-between;
align-items : center;
}
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
img .country-flag {
width : 35px ;
height : 20px ;
}
scss COPY CODE
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.
<ng-template igxHeader let-column #pinTemplate >
<div class ="title-inner" >
<span style ="float:left" > {{column.header || column.field}}</span >
<igx-icon class ="pin-icon" [class.pinned ]="column.pinned" [class.unpinned ]="!column.pinned" fontSet ="fas" name ="fa-thumbtack"
(click )="toggleColumn(column)" > </igx-icon >
</div >
</ng-template >
<div class ="grid__wrapper" >
<igx-tree-grid #treeGrid [data ]="data" primaryKey ="ID" foreignKey ="ParentID" [autoGenerate ]="false" height ="620px"
width ="100%" >
<igx-column [field ]="'Name'" dataType ="string" [headerTemplate ]="pinTemplate" width ="250px" > </igx-column >
<igx-column [field ]="'Title'" dataType ="string" [headerTemplate ]="pinTemplate" width ="300px" > </igx-column >
<igx-column [field ]="'ID'" dataType ="number" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'HireDate'" header ="Hire Date" dataType ="date" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Age'" dataType ="number" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Address'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'City'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Country'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Fax'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'PostalCode'" header ="Postal Code" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Phone'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
</igx-tree-grid >
</div >
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
import { AfterViewInit, ChangeDetectorRef, Component, ViewChild, inject } from '@angular/core' ;
import { ColumnType, IgxIconService, IgxTreeGridComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed' ;
import { icons } from "../services/svgIcons" ;
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive' ;
const FILTERING_ICONS_FONT_SET = "filtering-icons" ;
@Component ({
selector : 'app-tree-grid-column-pinning-sample' ,
styleUrls : ['./tree-grid-column-pinning-sample.component.scss' ],
templateUrl : './tree-grid-column-pinning-sample.component.html' ,
imports : [IgxCellHeaderTemplateDirective, IgxIconComponent, IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent]
})
export class TreeGridColumnPinningSampleComponent implements AfterViewInit {
private cdr = inject(ChangeDetectorRef);
private iconService = inject(IgxIconService);
@ViewChild ('treeGrid' , { static : true }) public treeGrid: IgxTreeGridComponent;
public data: any [];
constructor ( ) {
this .data = generateEmployeeDetailedFlatData();
}
public ngAfterViewInit ( ) {
const pinnedIcons = icons.filter(icon => icon.name === "pin" || icon.name === "unpin" );
pinnedIcons.forEach(icon => {
if (!this .iconService.isSvgIconCached(icon.name, FILTERING_ICONS_FONT_SET)) {
this .iconService.addSvgIconFromText(icon.name, icon.value, FILTERING_ICONS_FONT_SET);
}
});
}
public toggleColumn (column: ColumnType ) {
column.pinned ? column.unpin() : column.pin();
this .cdr.detectChanges();
}
}
ts COPY CODE <ng-template igxHeader let-column #pinTemplate >
<div class ="title-inner" >
<span class ="header-text" > {{column.header || column.field}}</span >
<igx-icon class ="pin-icon" [class.pinned ]="column.pinned" [class.unpinned ]="!column.pinned"
family ="filtering-icons" name ="{{column.pinned ? 'unpin' : 'pin'}}" (click )="toggleColumn(column)" >
</igx-icon >
</div >
</ng-template >
<div class ="grid__wrapper" >
<igx-tree-grid [igxPreventDocumentScroll ]="true" #treeGrid [data ]="data" primaryKey ="ID" foreignKey ="ParentID" [autoGenerate ]="false" height ="600px"
width ="100%" >
<igx-column [field ]="'Name'" dataType ="string" [headerTemplate ]="pinTemplate" width ="250px" > </igx-column >
<igx-column [field ]="'Title'" dataType ="string" [headerTemplate ]="pinTemplate" width ="300px" > </igx-column >
<igx-column [field ]="'ID'" dataType ="number" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'HireDate'" header ="Hire Date" dataType ="date" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Age'" dataType ="number" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Address'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'City'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Country'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Fax'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'PostalCode'" header ="Postal Code" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
<igx-column [field ]="'Phone'" dataType ="string" [headerTemplate ]="pinTemplate" width ="200px" > </igx-column >
</igx-tree-grid >
</div >
html COPY CODE .grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
.title-inner {
display : flex;
justify-content : space-between;
align-items : center;
}
.header-text {
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
.pin-icon {
margin-left : 8px ;
cursor : pointer;
display : flex;
align-items : center;
}
.pinned {
color : #444 ;
&:hover {
color : #999 ;
}
}
.unpinned {
color : #999 ;
&:hover {
color : #444 ;
}
}
scss COPY CODE
Pinning Limitations
Setting column widths in percentage (%) explicitly makes the Tree 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 Tree Grid.
API References
Additional Resources
Our community is active and always welcoming to new ideas.