Blazor Grid Column Pinning
Column Pinning in Ignite UI for Blazor allows the end users to lock column in a particular column order, this will allow them to see it while horizontally scrolling the IgbGrid
. The Blazor Grid has a built-in column pinning UI, which can be used through the IgbGrid
'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 feature.
Blazor Grid Column Pinning Example
This example demonstrates how you can pin a column or multiple columns to the left or right side of the IgbGrid
.
Column Pinning API
Column pinning is controlled through the Pinned
property of the IgbColumn
. Pinned columns are rendered on the left side of the IgbGrid
by default and stay fixed through horizontal scrolling of the unpinned columns in the IgbGrid
body.
<IgbGrid Data=data AutoGenerate=false>
<IgbColumn Field="Name" Pinned=true></IgbColumn>
<IgbColumn Field="AthleteNumber"></IgbColumn>
<IgbColumn Field="TrackProgress"></IgbColumn>
</IgbGrid>
You may also use the IgbGrid
's PinColumn
or UnpinColumn
methods of the IgbGrid
to pin or unpin columns by their field name:
@code {
grid.PinColumn("AthleteNumber", 0);
grid.UnpinColumn("Name", 0);
}
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 ColumnPinnedScript
event and providing a JavaScript function for changing the InsertAtIndex
property of the event arguments to the desired position index.
<IgbGrid Data=data AutoGenerate=true ColumnPinnedScript="onColumnPin"/>
//In JavaScript
function onColumnPinned(e) {
if (e.detail.column.field == "Country") {
e.detail.insertAtIndex = 0;
}
}
igRegisterScript("onColumnPinned", onColumnPinned, false);
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.
<IgbGrid Data=data AutoGenerate=true Pinning="pinningConfig"></IgbGrid>
@code {
private IgbPinningConfig pinningConfig = new() {
Columns = ColumnPinningPosition.End
};
}
Demo
Pinning Limitations
- Setting column widths in percentage (%) explicitly makes the
IgbGrid
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 theIgbGrid
.
API References
IgbGrid
ColumnComponent
Additional Resources
- Virtualization and Performance
- Paging
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Resizing
- Selection
Our community is active and always welcoming to new ideas.