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.

In my last article I looked at how the column pinning functionality is implemented in JavaScript datagrids. I explored the  range of features that make up pinning functionality and compared their  implementation across other major enterprise targeted datagrids. Today I want to take a look at how these sub-features of the column pinning functionality are implemented in React datagrids that focus on enterprise users.

Interestingly, while column pinning as a general datagrid feature is supported by all major JavaScript datagrid vendors, when it comes to React datagrids there are few exceptions. Particularly, React Grid  component by Infragistics doesn’t support column pinning at all, while React DataGrid by Telerik has a very unusual implementation. In the demonstration below the column “Discontinued” is pinned, yet it still moves with the scroll:

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.

Functionality overview

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.

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!

I hope that this article clearly demonstrated how powerful our JavaScript grid is. Now take the next step and give it a try with our “Get started in 5 minutes” guide. You’ll see it for yourself how fast and extensible the grid is and what makes it the best JavaScript datagrid in the world. Join the millions of developers and thousands of companies who use ag-Grid to provide the best possible experience to their users.