Column pinning allows you to freeze a column on either side of a grid to prevent it getting out of a user view with horizontal scroll caused by many columns. It’s also usually a part of the standard column interactions feature set.
Overview of Data Grid Vendor Support
Although it stays visible all the time, I’m not sure it’s fair to call this column locked/pinned. Nevertheless I’ll include this implementation in the comparison. So today we’ll take a look at the following React datagrids:
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
These sub-features make pinning more convenient and useful. Yet they are not implemented universally by every React grid. In fact, only React grid by ag-Grid supports full set of features from this list. Let’s now explore them in more details.
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 React 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. All other React datagrids either require at least one pinned column all the time or limit you by specifying the number of pinned columns in advance. I find this requirement mildly inconvenient.
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