- Column Pinning
- Functionality overview
In effect, this feature splits a datagrid into two separate parts: the “frozen” one and the “scrollable” one. The “frozen” part of the datatable will be fixed, while the scrollable part will remain movable. If you’ve used Excel a lot, you’re probably used this functionality once or twice.
In this article I want to demonstrate certain features of pinning functionality based on how we implemented in ag-Grid. Although pinning as a general datagrid feature is supported by all major datagrid vendors, only ag-Grid supports full spectrum of requirements that users have towards pinning. In this article I also intend to compare the implementation of this feature across other major enterprise targeted datagrids. Here is the list:
- Ignite UI grid component by Infragistics
- KendoUI grid component by Telerik
- DataGrid by DevExtreme
- DataGrid by Syncfusion
- DataTable by Webix
- pinning a column on both left and right sides
- pinning a column from a column menu
- pinning a column by dragging
- pinning an initial column dynamically
- pinning subsequent columns dynamically
Let’s now explore them in more details.
Pinning on both left and right side
This one is self-explanatory. With the ability to pin columns to both sides, the grid effectively becomes split into 3 parts with the horizontal scroll only available for the middle “non-freezed” part. Here’s a demonstration of such functionality in ag-Grid:
Pinning a column from a column menu
You can pin a column either from a column menu or by dragging a column to the pinned columns zone. ag-Grid supports both options. Here’s a demonstration of column pinning through the column menu:
Although most of datagrids support pinning from the column menu, only ag-Grid and Kendo UI support pinning via dragging.
Pinning columns by dragging
Here’s how you can pin an initial column in ag-Grid by dragging:
Besides, ag-Grid doesn’t require you to specify an initial pinned column or the number of pinned columns in the configuration. After the grid is initialized, you can still add as many columns as you want.
As you can see, ag-Grid wins here hands down. And the best part is that you can get that functionality absolutely for free in the community edition of ag-Grid. Give it a try with our guide “Get started in 5 minutes” guide. I’m happy to answer any questions you may have.