React Grid Column Pinning Overview
The Ignite UI for React Data Grid supports the ability to pin columns, allowing the end users to lock a column in a particular column order.
A column or multiple columns can be pinned to the left-hand or right-hand side of the Data Grid. In addition, you can change the pin state of the columns by utilizing the pinColumn
function.
React Grid Column Pinning Example
The Column Pinning API in the Data Grid can be enabled by setting either a column's Pinned
property, or when setting it by utilizing the pinColumn
function of the grid.
The Pinned
property has three options:
- Left - enabling
Left
will position pinned columns to the left-hand side of the grid. - Right - enabling
Right
will position pinned columns to the right side of the grid. - None - enabling
None
will unpin a column and reposition its default placement within the grid.
Unpinned columns that are adjacent to pinned columns will still maintain horizontal scrolling.
The pinColumn
function contains two required parameters. The first parameter is the column to be pinned, and the second is with the PinnedPositions
enumeration setting.
Code Snippet
The following code demonstrates how to implement column pinning in the React Data Grid with column pinning by using the Pinned
property and pinColumn
function:
<IgrDataGrid
ref={this.onGridRef}
height="calc(100% - 40px)"
width="100%"
autoGenerateColumns="false"
defaultColumnMinWidth={120}
scrollbarStyle="thin"
dataSource={this.data}>
{/*Columns pinned left*/}
<IgrTextColumn pinned="left" field="ID" headerText="Employee ID" width="100" horizontalAlignment="center"/>
<IgrTextColumn pinned="left" field="FirstName" headerText="First Name" width="170"/>
<IgrTextColumn pinned="left" field="LastName" headerText="Last Name" width="170"/>
{/*Columns unpinned*/}
<IgrDateTimeColumn pinned="none" field="Birthday" headerText="Date of Birth" width="150" horizontalAlignment="center"/>
<IgrNumericColumn pinned="none" field="Age" width="100" horizontalAlignment="center"/>
<IgrImageColumn pinned="none" field="CountryFlag" headerText="Country"
width="140" contentOpacity="1" horizontalAlignment="center"/>
{/*Columns pinned right*/}
<IgrTextColumn field="Street" headerText="Address" width="240"/>
<IgrTextColumn field="City" width="150" />
<IgrTextColumn field="Country" width="150" />
</IgrDataGrid>
import { PinnedPositions } from 'igniteui-react-grids';
public onButtonPinLeft = (e: any) => {
let idColumn = this.grid.actualColumns.item(0);
let firstNameColumn = this.grid.actualColumns.item(1);
let lastNameColumn = this.grid.actualColumns.item(2);
//pinned property
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
// pinColumn Function
this.grid.pinColumn(idColumn, PinnedPositions.Left);
this.grid.pinColumn(firstNameColumn, PinnedPositions.Left);
this.grid.pinColumn(lastNameColumn, PinnedPositions.Left);
}
public onButtonPinRight = (e: any) => {
let streetColumn = this.grid.actualColumns.item(6);
let cityColumn = this.grid.actualColumns.item(7);
let countryColumn = this.grid.actualColumns.item(8);
//pinned property
streetColumn.pinned = PinnedPositions.Right;
cityColumn.pinned = PinnedPositions.Right;
countryColumn.pinned = PinnedPositions.Right;
//pinColumn function
this.grid.pinColumn(streetColumn, PinnedPositions.Right);
this.grid.pinColumn(cityColumn, PinnedPositions.Right);
this.grid.pinColumn(countryColumn, PinnedPositions.Right);
}
public onButtonUnPin = (e: any) => {
let idColumn = this.grid.actualColumns.item(0);
let firstNameColumn = this.grid.actualColumns.item(1);
let lastNameColumn = this.grid.actualColumns.item(2);
//pinned property
idColumn.pinned = PinnedPositions.Left;
firstNameColumn.pinned = PinnedPositions.Left;
lastNameColumn.pinned = PinnedPositions.Left;
//pinColumn function
this.grid.pinColumn(idColumn, PinnedPositions.None);
this.grid.pinColumn(firstNameColumn, PinnedPositions.None);
this.grid.pinColumn(lastNameColumn, PinnedPositions.None);
let streetColumn = this.grid.actualColumns.item(6);
let cityColumn = this.grid.actualColumns.item(7);
let countryColumn = this.grid.actualColumns.item(8);
//pinned property
streetColumn.pinned = PinnedPositions.None;
cityColumn.pinned = PinnedPositions.None;
countryColumn.pinned = PinnedPositions.None;
//pinColumn function
this.grid.pinColumn(streetColumn, PinnedPositions.None);
this.grid.pinColumn(cityColumn, PinnedPositions.None);
this.grid.pinColumn(countryColumn, PinnedPositions.None);
}
Toolbar's Column Pinning UI
The Column Pinning UI is accessible within the IgrDataGridToolbar
component separate from the grid. For this purpose all we have to do is set the toolbar's columnPinning
property to true. The toolbar will then display a IgrButton
, when clicked, will display the column pinning UI. This button also displays the total of pinned-left columns. If the toolbar is not created, enabling the columnPinning
property will have no effect and hide the button.
The IgrDataGridToolbar
provides additional properties such as adding a title to the toolbar by using the toolbarTitle
property, placing text in the IgrButton
by setting the columnPinningText
property, and adding a title header to the column hiding UI by setting columnPinningTitle
.
Demo
Code Snippet
<IgrDataGridToolbar ref={this.onToolbarRef}
toolbarTitle="Grid Title"
columnPinning="true"
columnPinningText="Pinning"
columnPinningTitle="Column Pinning">
</IgrDataGridToolbar>
<IgrDataGrid
ref={this.onGridRef}
height="calc(100% - 40px)"
dataSource={this.data}
autoGenerateColumns="true">
</IgrDataGrid>
import { IgrDataGrid } from 'igniteui-react-grids';
import { IgrDataGridToolbar } from 'igniteui-react-grids';
public grid : IgrDataGrid;
public toolbar: IgrDataGridToolbar;
this.onGridRef = this.onGridRef.bind(this);
this.onToolbarRef = this.onToolbarRef.bind(this);
public onGridRef(grid: IgrDataGrid) {
this.grid = grid;
if (this.toolbar != null) {
this.toolbar.targetGrid = this.grid;
let productNameColumn = this.grid.actualColumns.item(0);
productNameColumn.pinned = PinnedPositions.Left;
}
}
public onToolbarRef(toolbar: IgrDataGridToolbar) {
this.toolbar = toolbar;
if (this.grid != null) {
this.toolbar.targetGrid = this.grid;
this.toolbar.columnPinning = "true";
this.toolbar.toolbarTitle = "Grid Title";
this.toolbar.columnPinningText = "Pinning";
this.toolbar.columnPinningTitle = "Pinning Title";
}
}