Row headers

Use default row headers (1, 2, 3), or set them to custom values provided by an array or a function.

Overview

Row headers are gray-colored columns that are used to label each row. By default, these headers are filled with numbers displayed in ascending order.

To turn the headers on, set the option rowHeaders to true.

Row headers as an array

An array of labels can be used to set the rowHeaders as shown in the example below:

Source code

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';

// register Handsontable's modules
registerAllModules();

const hotSettings = ref<GridSettings>({
  data: [
    [42000, 31000, 11000],
    [45500, 33200, 12300],
    [48700, 35100, 13600],
    [51200, 36800, 14400],
    [54800, 38900, 15900],
    [57300, 40100, 17200],
  ],
  colHeaders: ['Revenue', 'Expenses', 'Profit'],
  rowHeaders: ['January', 'February', 'March', 'April', 'May', 'June'],
  rowHeaderWidth: 80,
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
</script>

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

Row headers as a function

The rowHeaders can also be populated using a function as shown in the example below:

Source code

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';

// register Handsontable's modules
registerAllModules();

const hotSettings = ref<GridSettings>({
  data: [
    [42000, 31000, 11000],
    [45500, 33200, 12300],
    [48700, 35100, 13600],
    [51200, 36800, 14400],
    [54800, 38900, 15900],
    [57300, 40100, 17200],
  ],
  colHeaders: ['Revenue', 'Expenses', 'Profit'],
  rowHeaders: (index) => {
    return `Row ${index + 1}`;
  },
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
</script>

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

Row header width

When you use custom row labels, their content can exceed the default header width. To control the header size, set rowHeaderWidth.

You can set this option to one of the following:

• A number - set the same width for every row header.
• An array - set different widths for individual row header levels.

The Row headers as an array example uses custom labels together with rowHeaderWidth: 80.

Bind rows with headers

You can bind row numbers with row headers. This is used mostly to differentiate two business cases in which Handsontable is most often used.

1. When moving a row in a typical grid-like application, the numbers in the row headers remain intact. Only the content is moved.

2. In a data grid, each row has its unique ID. Therefore, the column header should follow its row whenever it changes its position in the grid.

Basic example

To enable the plugin, set the bindRowsWithHeaders property to true. Move the rows in the example below to see what this plugin does.

Possible values:

• true - Enables the plugin.
• strict - Enables the plugin and the order of indexes is not reorganized after the operation such as hiding or moving rows.
• loose - Enables the plugin and the order of indexes is re-organized after the operation such as hiding or moving rows.

Source code

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 a dummy data
const generateData = (rows = 3, columns = 7, additionalRows = true) => {
  let counter = 0;

  const array2d = [...new Array(rows)].map((_) => [...new Array(columns)].map((_) => counter++));

  if (additionalRows) {
    array2d.push([]);
    array2d.push([]);
  }

  return array2d;
};

const hotSettings = ref<GridSettings>({
  data: generateData(),
  colHeaders: true,
  rowHeaders: true,
  height: 'auto',
  contextMenu: true,
  manualRowMove: true,
  bindRowsWithHeaders: true,
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});
</script>

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

Tree grid

A tree grid enables you to represent the nested data structures within the data grid. To learn more about this feature, see the Row parent-child page.

Related articles

Related guides

Row parent-child→

Configuration options

activeHeaderClassName→

currentHeaderClassName→

bindRowsWithHeaders→

rowHeaders→

rowHeaderWidth→

Core methods

getRowHeader()→

hasRowHeaders()→

Hooks

afterGetRowHeader→

afterGetRowHeaderRenderers→

beforeHighlightingRowHeader→

modifyRowHeader→

modifyRowHeaderWidth→

Plugins

BindRowsWithHeaders→