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.
Overview of Data Grid Vendor Support
- Ignite UI grid component by Infragistics
- KendoUI grid component by Telerik
- DataGrid by DevExtreme
- DataGrid by Syncfusion
And the following React Data Grids:
Let’s get our journey started.
I’ve combed through the implementations of the pinning functionality in React datagrids and have distilled the following list of sub features:
- 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
Pinning on both left and right side
Pinning on both sides effectively splits a grid into 3 parts with the horizontal scroll only available for the middle “non-freezed” part. Although being an often requested feature, it’s only supported by React datagrids from AG Grid, DevExtreme and Webix. Here’s a demonstration of such functionality in React grid by AG Grid:
Pinning a column from a column menu
A column can be pinned either from a column menu or by dragging a column to the pinned columns zone. React datagrid by ag-Grid supports both options. Here’s how you can pin a column through the column menu:
Although many data grids support pinning from the column menu, only AG Grid support pinning via dragging. Here’s how you can do that:
It’s worth noting that ag-Grid doesn’t force you to indicate an initial pinned column or the specify the number of pinned columns in the configuration. This can all be done after the grid is initialized.
AG Grid is actually the only React datagrid that gives you this level of flexibility when it comes to pinning columns dynamically.
React Data Grid Comparison Table
So now you’re familiar with the sub features of the pinning functionality. To make quick comparison possible I’ve put together the following table showing the support of sub features:
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.
Build Your Own React App With ag-Grid