---
type: how-to
title: Row headers
metaTitle: Row headers - JavaScript Data Grid | Handsontable
description: Use default row headers (1, 2, 3), or set them to custom values provided by an array or a function.
permalink: /row-header
canonicalUrl: /row-header
tags:
  - custom headers
  - bind rows with headers
  - row id
react:
  metaTitle: Row headers - React Data Grid | Handsontable
angular:
  metaTitle: Row headers - Angular Data Grid | Handsontable
vue:
  metaTitle: Row headers - Vue Data Grid | Handsontable
searchCategory: Guides
category: Rows
---
Use default row headers (1, 2, 3), or set them to custom values provided by an array or a function.

[[toc]]

## 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`](@/api/options.md#rowheaders) to `true`.

## 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`](@/api/options.md#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.


::: only-for javascript

::: example #example1 --js 1 --ts 2

@[code](@/content/guides/rows/row-header/javascript/example1.js)
@[code](@/content/guides/rows/row-header/javascript/example1.ts)

:::

:::

::: only-for react

::: example #example1 :react --js 1 --ts 2

@[code](@/content/guides/rows/row-header/react/example1.jsx)
@[code](@/content/guides/rows/row-header/react/example1.tsx)

:::

:::

::: only-for angular

::: example #example1 :angular --ts 1 --html 2

@[code](@/content/guides/rows/row-header/angular/example1.ts)
@[code](@/content/guides/rows/row-header/angular/example1.html)

:::

:::

::: only-for vue

::: example #example1 :vue3

@[code](@/content/guides/rows/row-header/vue/example1.vue)

:::

:::

## 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](@/guides/rows/row-parent-child/row-parent-child.md) page.

## Related articles

**Related guides**

<div class="boxes-list">

- [Row parent-child](@/guides/rows/row-parent-child/row-parent-child.md)

</div>

**Configuration options**

<div class="boxes-list">

- [activeHeaderClassName](@/api/options.md#activeheaderclassname)
- [currentHeaderClassName](@/api/options.md#currentheaderclassname)
- [bindRowsWithHeaders](@/api/options.md#bindrowswithheaders)
- [rowHeaders](@/api/options.md#rowheaders)

</div>

**Core methods**

<div class="boxes-list">

- [getRowHeader()](@/api/core.md#getrowheader)
- [hasRowHeaders()](@/api/core.md#hasrowheaders)

</div>

**Hooks**

<div class="boxes-list">

- [afterGetRowHeader](@/api/hooks.md#aftergetrowheader)
- [afterGetRowHeaderRenderers](@/api/hooks.md#aftergetrowheaderrenderers)
- [beforeHighlightingRowHeader](@/api/hooks.md#beforehighlightingrowheader)
- [modifyRowHeader](@/api/hooks.md#modifyrowheader)
- [modifyRowHeaderWidth](@/api/hooks.md#modifyrowheaderwidth)

</div>

**Plugins**

<div class="boxes-list">

- [BindRowsWithHeaders](@/api/bindRowsWithHeaders.md)

</div>
