Pinning Columns

One of the nicest features ag-Grid has with respect to columns is the concept of pinning. We can keep one column or many columns pinned to either side of the window so that we can scroll through the grid while keeping those columns visible. We can do that in the UI by dragging columns to either side, but we can also do this programatically.

In the video, we first cover the pin and lockPinned properties of column definitions to control where a column is pinned and whether that can be changed.

We then create two buttons to call the API to pin and unpin the lastName column.

First, we add a colId property to the lastName column definition:

// src/App.js
{
  headerName: "Last",
  field: "lastName",
  colId: "lastName"
},

Next, we create a button to pin the lastName column to the left:

// src/App.js
<button
  type="button"
  onClick={() => this.columnApi.setColumnPinned("lastName", "left")}
>
  Pin Last Name to Left
</button>

Finally, we create a second button to unpin the column by calling setColumnPinned with null:

// src/App.js
<button
 type="button"
 onClick={() => this.columnApi.setColumnPinned("lastName", null)}
>
 Unpin Last Name
</button>

And that's it! If you run npm start and navigate to localhost:3000, you'll be able to click the buttons to pin and unpin the lastName column.

Up next, we'll learn about column spanning.