React Grid Column Pinning
The Ignite UI for React Column Pinning feature in React Grid enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the IgrGrid
. There’s an integrated UI for Column Pinning, accessible via the React Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.
React Grid Column Pinning Example
This example demonstrates how you can pin a column or multiple columns to the left or right side of the IgrGrid
.
Column Pinning API
Column pinning is controlled through the pinned
property of the IgrColumn
. Pinned columns are rendered on the left side of the IgrGrid
by default and stay fixed through horizontal scrolling of the unpinned columns in the IgrGrid
body.
<IgrGrid data={nwindData} autoGenerate="false">
<IgrColumn field="Name" pinned="true"></IgrColumn>
<IgrColumn field="AthleteNumber"></IgrColumn>
<IgrColumn field="TrackProgress"></IgrColumn>
</IgrGrid>
You may also use the IgrGrid
's pinColumn
or unpinColumn
methods of the IgrGrid
to pin or unpin columns by their field name:
gridRef.current.pinColumn('AthleteNumber');
gridRef.current.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.
public columnPinning(event) {
if (event.detail.column.field === 'Name') {
event.detail.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.
const pinningConfig = new IgrPinningConfig();
pinningConfig.columns = ColumnPinningPosition.End;
<IgrGrid data={nwindData} autoGenerate="true" pinning={pinningConfig}></IgrGrid>
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 columns with a custom icon.
<IgrGrid autoGenerate="false" data={CustomersData} name="grid" ref={grid}>
<IgrColumn field="ID" hidden="true"></IgrColumn>
<IgrColumn field="CompanyName" header="Company" width="300px"
name="column1" headerTemplate={toggleColumnPin}></IgrColumn>
<IgrColumn field="ContactName" header="Name" width="200px" pinned="true"
name="column2" headerTemplate={toggleColumnPin}> </IgrColumn>
<IgrColumn field="ContactTitle" header="Title" width="200px" pinned="true"
name="column3" headerTemplate={toggleColumnPin}> </IgrColumn>
</IgrGrid>
function toggleColumnPin({ dataContext: ctx }: { dataContext: IgrColumnTemplateContext }) {
const togglePin = () => {
const col = ctx.column;
col.pinned = !col.pinned;
}
const col = ctx.column;
return(
<div>
<span style={{ float: 'left' }}>{col.header}</span>
<span style={{ float: 'right' }} onClick={() => togglePin()}>📌</span>
</div>
);
}
Demo
Pinning Limitations
- Setting column widths in percentage (%) explicitly makes the
IgrGrid
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 theIgrGrid
.
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:
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;
}
Demo
API References
Additional Resources
- Virtualization and Performance
- Paging
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Resizing
- Selection
Our community is active and always welcoming to new ideas.