Column Pinning

Column pinning is a standard feature of all datagrids. Sometimes it’s also referred to as column fixing or column freezing. This feature is useful in cases when a javascript datagrid contains many columns that cause horizontal scrolling. With column pinning you can fix a column on the left or on the right side of the grid to prevent it getting out of user view when scrolling horizontally.

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:

If you’re in the process of selecting the best JavaScript datagrid for your project, or simply want to get your familiar with modern datagrids functionality, you might find this information helpful.

Functionality overview

To get started, here is the list of features you should expect from pinning functionality of a javascript datagrid:

  • 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:

As it turns out, very few javascript datagrids support pinning on both right and left side. In fact, apart from ag-Grid, only JavaScript datagrids produced by DevExtreme and Webix have such support.

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.

Besides ag-Grid, only the datagrid by IgniteUI give users similar level of flexibility when it comes to pinning columns dynamically. The rest of the JavaScript datagrids either require at least one pinned column all the time or limit you by specifying the number of pinned columns in advance. That’s rarely convenient.

Comparison table

To recap, here’s the table with the functionality support by major JavaScript datagrids that target enterprise:

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.

Learn more about AG Grid — an Enterprise JavaScript Data Grid used by the Fortune 500. Support for multiple frameworks: Angular, Vue, React so you can use the best technology for your business.