React Data Grid Column freezing

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

In this article

• Overview
• Freeze columns at initialization
• User-triggered freeze
• Related API reference

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.

import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); // generate an array of arrays with dummy data const data = new Array(100) // number of rows .fill() .map((_, row) => new Array(50) // number of columns .fill() .map((_, column) => `${row}, ${column}`) ); export const ExampleComponent = () => { return ( <HotTable data={data} colWidths={100} width="100%" height={320} rowHeaders={true} colHeaders={true} fixedColumnsStart={1} licenseKey="non-commercial-and-evaluation" /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example1')); <script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@13.0/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill()
  .map((_, row) => new Array(50) // number of columns
    .fill()
    .map((_, column) => `${row}, ${column}`)
  );

export const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      colWidths={100}
      width="100%"
      height={320}
      rowHeaders={true}
      colHeaders={true}
      fixedColumnsStart={1}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

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.

import { HotTable } from '@handsontable/react'; import { registerAllModules } from 'handsontable/registry'; import 'handsontable/dist/handsontable.full.min.css'; // register Handsontable's modules registerAllModules(); // generate an array of arrays with dummy data const data = new Array(100) // number of rows .fill() .map((_, row) => new Array(50) // number of columns .fill() .map((_, column) => `${row}, ${column}`) ); export const ExampleComponent = () => { return ( <HotTable data={data} colWidths={100} width="100%" height={320} rowHeaders={true} colHeaders={true} fixedColumnsStart={2} contextMenu={true} manualColumnFreeze={true} licenseKey="non-commercial-and-evaluation" /> ); }; ReactDOM.render(<ExampleComponent />, document.getElementById('example2')); <script src="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@13.0/dist/handsontable.full.min.css" /> <script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@handsontable/react@13.0/dist/react-handsontable.min.js"></script> <script src="https://handsontable.com/docs/13.0/scripts/fixer.js"></script> <div id="example2" class="hot "></div>

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';

// register Handsontable's modules
registerAllModules();

// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill()
  .map((_, row) => new Array(50) // number of columns
    .fill()
    .map((_, column) => `${row}, ${column}`)
  );

export const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      colWidths={100}
      width="100%"
      height={320}
      rowHeaders={true}
      colHeaders={true}
      fixedColumnsStart={2}
      contextMenu={true}
      manualColumnFreeze={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

Related API reference

• Configuration options:
  • fixedColumnsStart
  • manualColumnFreeze
• Plugins:
  • ManualColumnFreeze