React Data Grid Column freezing

Lock the position of specified columns, keeping them visible when scrolling.

Overview

Column freezing locks specific columns of a grid in place, keeping them visible while scrolling to another area of the grid. We refer to frozen columns as fixed.

You can freeze columns during initialization and by the user.

Freeze columns at initialization

To freeze columns at initialization, use the fixedColumnsStart option. Then, configure the container of your grid with the following CSS attributes: width and overflow: hidden.

If your layout direction is ltr, columns get frozen from the left side of the table. If your layout direction is rtl, columns get frozen from the right side of the table.

    User-triggered freeze

    To enable manual column freezing, set manualColumnFreeze to true. This lets you freeze and unfreeze columns by using the grid's context menu.

    Mind that when you unfreeze a frozen column, it doesn't go back to the original position.