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
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>
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');
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>
public columnPinning(event) {
if (event.column.field === 'Name') {
event.insertAtIndex = 0;
}
}
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>
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
Demo
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>
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();
}
Demo
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';
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(
/* Pinning properties that affect styling */
$pinned-border-width: 5px,
$pinned-border-style: double,
$pinned-border-color: #FFCD0F,
$cell-active-border-color: #FFCD0F
/* add other features properties here... */
);
Defining a custom color palette
In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the igx-palette
and igx-color
functions.
igx-palette
generates a color palette, based on provided primary and secondary colors.
$primary-color: #292826;
$secondary-color: #ffcd0f;
$custom-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
After a custom palette has been generated, the igx-color
function can be used to obtain different varieties of the primary and the secondary colors.
$custom-theme: grid-theme(
$pinned-border-width: 5px,
$pinned-border-style: double,
$pinned-border-color: color($custom-palette, "secondary", 500),
$cell-active-border-color: color($custom-palette, "secondary", 500)
);
The $custom-theme
contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom igx-palette
was used and the colors were obtained through its primary and secondary colors, with a given color variant.
Defining custom schemas
You can go even further and build flexible structure that has all the benefits of a schema. The schema is the recipe of a theme.
Extend one of the two predefined schemas, that are provided for every component. In our case, we would use $_light_grid
.
$custom-grid-schema: extend($_light-grid,(
pinned-border-width: 5px,
pinned-border-style: double,
pinned-border-color: color:("secondary", 500),
cell-active-border-color: color:("secondary", 500)
));
In order for the custom schema to be applied, either light
, or dark
globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
$my-custom-schema: extend($light-schema, (
igx-grid: $custom-grid-schema
));
$custom-theme: grid-theme(
$palette: $custom-palette,
$schema: $my-custom-schema
);
Applying the custom theme
The easiest way to apply your theme is with a sass
@include
statement in the global styles file:
@include grid($custom-theme);
Scoped component theme
In order for the custom theme to affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the index
file).
This way, due to Angular's ViewEncapsulation, your styles will be applied only to your custom component.
Note
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep
in order to style the grid.
Note
Wrap the statement inside of a :host
selector to prevent your styles from affecting elements outside of our component:
:host {
::ng-deep {
@include grid($custom-theme);
}
}
Demo
Note
The sample will not be affected by the selected global theme from Change Theme
.
API References
Additional Resources
- Grid overview
- Virtualization and Performance
- Paging
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Resizing
- Selection