JavaScript Data Grid Row freezing

Table of contents

• Overview
• Example
• Related API reference

Overview

Row freezing locks specific rows of a grid in place, keeping them visible while scrolling to another area of the grid.

Example

The following example specifies two fixed rows with fixedRowsTop: 2. Horizontal scroll bars are needed, so set a container width and overflow: hidden in CSS.

const container = document.querySelector('#example1'); const hot = new Handsontable(container, { data: Handsontable.helper.createSpreadsheetData(100, 50), colWidths: 100, width: '100%', height: 320, rowHeaders: true, colHeaders: true, fixedRowsTop: 2, licenseKey: 'non-commercial-and-evaluation' }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example1" class="hot "></div>

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(100, 50),
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  fixedRowsTop: 2,
  licenseKey: 'non-commercial-and-evaluation'
});

Related API reference

• Configuration options:
  • fixedRowsBottom
  • fixedRowsTop