AG Grid Responsive Pinned Columns

Have you run into an issue with pinned columns when building a responsive web application? In this article, we'll show you how you can use the processUnpinnedColumns event listener to unpin columns from the right in AG Grid.

When using AG Grid, it's easy to pin a column to the left or right of the grid. However, when you have a lot of columns, you may run into a situation where the pinned columns are taking up too much space on the screen, especially on smaller devices. By default, AG Grid solves this problem by automatically unpinning columns from the pinned section to ensure that the center viewport of columns is visible.

Out the box, AG Grid will unpin the columns starting from the left. For us, that didn't make sense. We want the columns to be unpinned from the right until the center viewport is visible. In this case, we hard-coded a minimum width for the center viewport.

Unpin from the Right

To unpin a column from the right, you can use the processUnpinnedColumns callback function as specified in the grid options:

const GridExample: React.RC = () => {
  const MIN_UNPINNED_VISIBLE_VIEWPORT_WIDTH = 640;

  const processUnpinnedColumns = useCallback(
    (params) => {
      // If there are no groups, the groups function returned columns.  Otherwise, we get group columns.
      const pinnedLeftGroups = params.api.getLeftDisplayedColumnGroups();

      let widthOfColumnsSoFar = 0;

      let columnGroupsToUnpin = [];

      pinnedLeftGroups.forEach((group, index) => {
        widthOfColumnsSoFar += group.getActualWidth();

        // If this column/group width would put us over the minimum visible width of the chart view,
        // unpin this _and_ the remaining columns in the left group
        if (widthOfColumnsSoFar > params.viewportWidth - MIN_UNPINNED_VISIBLE_VIEWPORT_WIDTH) {
          // We want to include this column group in the ones unpinned, so we have to subtract one from the
          // current index
          columnGroupsToUnpin = pinnedLeftGroups.slice(index - 1);
        }
      });

      // We found column groups, but we must actually return the child columns
      return columnGroupsToUnpin.flatMap((group) => {
        // is this a column, actually?
        if (group.isColumn) {
          // Return the column itself
          return [group];
        }

        // Oh, it's a column group, so return children
        return group.getLeafColumns() ?? [];
      });
    },
    [],
  );

  return (
    <AgGridReact
      processUnpinnedColumns={processUnpinnedColumns}
    />
  );
};

export default GridExample;

Let's break down the code:

1. We define a constant MIN_UNPINNED_VISIBLE_VIEWPORT_WIDTH that represents the minimum width of the center viewport.
2. We define a processUnpinnedColumns function that takes a single parameter params.
3. We get the pinned left groups using params.api.getLeftDisplayedColumnGroups().
4. We iterate over each group and calculate the width of the columns so far.
5. If the width of the columns so far is greater than the viewport width minus the minimum unpinned visible viewport width, we unpin the current group and all remaining groups.
6. We return the columns to unpin.
7. We return the columns to unpin from the processUnpinnedColumns callback function.
8. We pass the processUnpinnedColumns callback function to the AgGridReact component.

Need Help with AG Grid?

If you need help with AG Grid, talk to us so we can work together.