React Data Grid Column freezing

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. Columns can be frozen during initialization and by the user.

Freeze columns at initialization

To freeze the columns on the left-hand side, you need to pass the option fixedColumnsStart in the Settings object. The container you initialize the data grid in will need additional CSS attributes configured: width and overflow: hidden.

WARNING

The fixedColumnsStart property used to be called fixedColumnsLeft before Handsontable 12.0.0. The old name fixedColumnsLeft works in the LTR layout direction but throws an error when the layout direction is set to RTL.

    User-triggered freeze

    To manually freeze a column, you need to set the manualColumnFreeze configuration option to true in the Handsontable settings. When the Manual Column Freeze plugin is enabled, you can freeze any non-fixed column and unfreeze any fixed column in your Handsontable instance using the Context Menu.

    TIP

    A frozen column won't go back to the original position after you unfreeze it.