Skip to content
Handsontable dev

Row freezing

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

Overview

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

This feature is sometimes called “pinned rows”.

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.

Vue
<script setup lang="ts">
import { ref } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import type { GridSettings } from 'handsontable/settings';


registerAllModules();


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


const hotSettings = ref<GridSettings>({
  data,
  colWidths: 100,
  width: '100%',
  height: 320,
  rowHeaders: true,
  colHeaders: true,
  fixedRowsTop: 2,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
</script>


<template>
  <div id="example1">
    <HotTable :settings="hotSettings" />
  </div>
</template>

Freeze rows at the bottom

To pin rows to the bottom edge of the grid — sometimes called footer rows — use the fixedRowsBottom option. The specified number of rows stays visible at the bottom of the viewport while you scroll through the rest of the data.

const hot = new Handsontable(container, {
  data: getData(),
  // freeze the last two rows as a footer
  fixedRowsBottom: 2,
  licenseKey: 'non-commercial-and-evaluation',
});

You can combine fixedRowsTop and fixedRowsBottom to keep both a header and a footer row in view at the same time.

Result

After completing this guide, the rows you specify with fixedRowsTop or fixedRowsBottom stay visible while you scroll through the rest of the grid.

Frozen area size limit

When your grid has a defined height, freeze only as many rows as fit within it.

Handsontable always draws frozen rows in full. It never shrinks them, and it never scrolls them. If the frozen rows need more space than the grid has, they cover the whole grid. The remaining rows stay out of reach: the vertical scrollbar still moves, but the view no longer changes.

This applies to the total height of the frozen rows, not to how many there are. Taller rows reach the limit sooner.

Both fixedRowsTop and fixedRowsBottom behave this way. Keep the combined height of your frozen rows smaller than the grid’s height. If your grid has to work at several sizes, pick a number of frozen rows that fits the shortest one.

Without a defined height, the grid grows to fit its rows, so the frozen rows cannot outgrow it and this limit does not apply. Read more in Grid size.

Configuration options

fixedRowsBottom
fixedRowsTop