React Data Grid Row freezing

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.

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

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      data={Handsontable.helper.createSpreadsheetData(100, 50)}
      colWidths={100}
      width="100%"
      height={320}
      rowHeaders={true}
      colHeaders={true}
      fixedRowsTop={2}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};

ReactDOM.render(<ExampleComponent />, document.getElementById('example1'));

<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" /> 
<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@12.1/dist/react-handsontable.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/fixer.js"></script>
<script src="https://handsontable.com/docs/12.1/scripts/helpers.js"></script>

<div id="example1" class="hot "></div>

Configuration options:
- fixedRowsBottom
- fixedRowsTop

← Row moving Row height →