JavaScript 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 Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; // 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}`) ); const container = document.querySelector('#example1'); const hot = new Handsontable(container, { data, colWidths: 100, width: '100%', height: 320, rowHeaders: true, colHeaders: true, fixedColumnsStart: 1, autoWrapRow: true, autoWrapCol: true, licenseKey: 'non-commercial-and-evaluation', }); <script src="https://cdn.jsdelivr.net/npm/handsontable@14.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.1/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/14.1/scripts/fixer.js"></script> <div id="example1" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

// 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}`)
  );

const container = document.querySelector('#example1');
const hot = new Handsontable(container, {
  data,
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  fixedColumnsStart: 1,
  autoWrapRow: true,
  autoWrapCol: true,
  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 Handsontable from 'handsontable'; import 'handsontable/dist/handsontable.full.min.css'; // 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}`) ); const container = document.querySelector('#example2'); const hot = new Handsontable(container, { data, colWidths: 100, width: '100%', height: 320, rowHeaders: true, colHeaders: true, fixedColumnsStart: 2, contextMenu: true, manualColumnFreeze: true, autoWrapRow: true, autoWrapCol: true, licenseKey: 'non-commercial-and-evaluation', }); <script src="https://cdn.jsdelivr.net/npm/handsontable@14.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@14.1/dist/handsontable.full.min.css" /> <script src="https://handsontable.com/docs/14.1/scripts/fixer.js"></script> <div id="example2" class="hot "></div>

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

// 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}`)
  );

const container = document.querySelector('#example2');
const hot = new Handsontable(container, {
  data,
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  fixedColumnsStart: 2,
  contextMenu: true,
  manualColumnFreeze: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

Related API reference

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