Column headers

Use default column headers (A, B, C), or set them to custom values provided by an array or a function.

Overview

Column headers are gray-colored rows used to label each column or group of columns. By default, these headers are populated with letters in alphabetical order.

To reflect the type or category of data in a particular column, give it a custom name and then display it in a column header. For example, instead of letters as labels such as A, B, C, ... name them ID, Full name, Country, ....

Default headers

Setting the colHeaders option to true enables the default column headers as shown in the example below:

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],
14
      ]}
15
      colHeaders={true}
16
      rowHeaders={true}
17
      height="auto"
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],
14
      ]}
15
      colHeaders={true}
16
      rowHeaders={true}
17
      height="auto"
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

Header labels as an array

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

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
14
      ]}
15
      colHeaders={['ID', 'Full name', 'Position', 'Country', 'City', 'Address', 'Zip code', 'Mobile', 'E-mail']}
16
      rowHeaders={true}
17
      height="auto"
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3'],
14
      ]}
15
      colHeaders={['ID', 'Full name', 'Position', 'Country', 'City', 'Address', 'Zip code', 'Mobile', 'E-mail']}
16
      rowHeaders={true}
17
      height="auto"
18
      autoWrapRow={true}
19
      autoWrapCol={true}
20
      licenseKey="non-commercial-and-evaluation"
21
    />
22
  );
23
};
24

25
export default ExampleComponent;

Header labels as a function

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

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],
14
      ]}
15
      colHeaders={(index) => {
16
        return `Col ${index + 1}`;
17
      }}
18
      rowHeaders={true}
19
      height="auto"
20
      autoWrapRow={true}
21
      autoWrapCol={true}
22
      licenseKey="non-commercial-and-evaluation"
23
    />
24
  );
25
};
26

27
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1', 'K1'],
12
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2', 'K2'],
13
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3', 'K3'],
14
      ]}
15
      colHeaders={(index) => {
16
        return `Col ${index + 1}`;
17
      }}
18
      rowHeaders={true}
19
      height="auto"
20
      autoWrapRow={true}
21
      autoWrapCol={true}
22
      licenseKey="non-commercial-and-evaluation"
23
    />
24
  );
25
};
26

27
export default ExampleComponent;

Header labels in the columns option

When you configure columns individually with the columns option, set a column’s header label with that column’s title option. If both are set, a column’s title takes precedence over the matching colHeaders entry.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],
12
        [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],
13
        [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],
14
        [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],
15
        [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],
16
      ]}
17
      // Set each column header label with the `title` option inside `columns`.
18
      columns={[
19
        { title: 'ID' },
20
        { title: 'Full name' },
21
        { title: 'Position' },
22
        { title: 'Country' },
23
        { title: 'Start date' },
24
      ]}
25
      rowHeaders={true}
26
      height="auto"
27
      autoWrapRow={true}
28
      autoWrapCol={true}
29
      licenseKey="non-commercial-and-evaluation"
30
    />
31
  );
32
};
33

34
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        [1, 'Ana García', 'Product Manager', 'Spain', '2022-03-14'],
12
        [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],
13
        [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],
14
        [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],
15
        [5, 'Mateo Fernández', 'Engineering Lead', 'Argentina', '2019-05-08'],
16
      ]}
17
      // Set each column header label with the `title` option inside `columns`.
18
      columns={[
19
        { title: 'ID' },
20
        { title: 'Full name' },
21
        { title: 'Position' },
22
        { title: 'Country' },
23
        { title: 'Start date' },
24
      ]}
25
      rowHeaders={true}
26
      height="auto"
27
      autoWrapRow={true}
28
      autoWrapCol={true}
29
      licenseKey="non-commercial-and-evaluation"
30
    />
31
  );
32
};
33

34
export default ExampleComponent;

Customize column headers

You can align the text in the header label with the headerClassName option. Setting it to htLeft, htCenter, or htRight will align the header labels to the left, center, or right, respectively.

You can also set the alignment for a specific column by using the columns option.

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],
12
        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],
13
        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],
14
      ]}
15
      colHeaders={true}
16
      rowHeaders={true}
17
      autoWrapRow={true}
18
      autoWrapCol={true}
19
      height="auto"
20
      headerClassName="htCenter"
21
      licenseKey="non-commercial-and-evaluation"
22
    >
23
      <HotColumn headerClassName="htRight" />
24
      <HotColumn headerClassName="htLeft" />
25
      <HotColumn />
26
      <HotColumn />
27
    </HotTable>
28
  );
29
};
30

31
export default ExampleComponent;

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],
12
        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],
13
        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],
14
      ]}
15
      colHeaders={true}
16
      rowHeaders={true}
17
      autoWrapRow={true}
18
      autoWrapCol={true}
19
      height="auto"
20
      headerClassName="htCenter"
21
      licenseKey="non-commercial-and-evaluation"
22
    >
23
      <HotColumn headerClassName="htRight" />
24
      <HotColumn headerClassName="htLeft" />
25
      <HotColumn />
26
      <HotColumn />
27
    </HotTable>
28
  );
29
};
30

31
export default ExampleComponent;

If you want to style the header labels, you can pass any number of class names, separated by a space, to the headerClassName option.

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],
12
        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],
13
        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],
14
      ]}
15
      colHeaders={true}
16
      rowHeaders={true}
17
      autoWrapRow={true}
18
      autoWrapCol={true}
19
      height="auto"
20
      headerClassName="htLeft"
21
      licenseKey="non-commercial-and-evaluation"
22
    >
23
      <HotColumn headerClassName="italic-text" />
24
      <HotColumn headerClassName="bold-text italic-text" />
25
      <HotColumn headerClassName="htRight bold-text italic-text" />
26
      <HotColumn />
27
    </HotTable>
28
  );
29
};
30

31
export default ExampleComponent;

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', '142'],
12
        ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', '0'],
13
        ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', '67'],
14
      ]}
15
      colHeaders={true}
16
      rowHeaders={true}
17
      autoWrapRow={true}
18
      autoWrapCol={true}
19
      height="auto"
20
      headerClassName="htLeft"
21
      licenseKey="non-commercial-and-evaluation"
22
    >
23
      <HotColumn headerClassName="italic-text" />
24
      <HotColumn headerClassName="bold-text italic-text" />
25
      <HotColumn headerClassName="htRight bold-text italic-text" />
26
      <HotColumn />
27
    </HotTable>
28
  );
29
};
30

31
export default ExampleComponent;

1
.bold-text {
2
    font-weight: bold;
3
}
4

5
.italic-text {
6
    font-style: italic;
7
}

Column header height

When column labels are longer, header text can wrap and require more vertical space. To control the header size, set columnHeaderHeight.

You can set this option to one of the following:

A number - set the same height for every column header.
A string - set the same height, written as a pixel size: '50' or '50px'.
An array - set different heights for individual column header levels.

The height is a number of pixels. A string that states a pixel size works too, so a value coming from an attribute, a JSON config, or a framework template still applies. You can mix both forms inside the array. A value that states no pixel count, such as '50%' or '20em', is ignored - the header keeps its default height, and Handsontable reports the value once in the browser console.

A negative number is kept as it is, because numbers behave exactly as they did before this option read strings. A negative string is rejected, so a typo cannot collapse the header.

The height you set is the header’s border-box height: it includes the header’s own top and bottom borders. A column header carries a 1px border on each side, so columnHeaderHeight: 40 leaves a 38px content box for the label. Before Handsontable 19.0 the bottom border was dropped while the grid sat at the top of its scroll range and added back as soon as you scrolled, so the same setting gave a 39px content box unscrolled and 38px scrolled. The header now keeps that border at every scroll position, which makes the option’s result the same wherever the grid is scrolled to. If you had tuned the number against an unscrolled grid, add a pixel to keep the label area you had.

The example below uses longer labels together with columnHeaderHeight: 50.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],
12
        [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],
13
        [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],
14
        [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],
15
        [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],
16
      ]}
17
      colHeaders={['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date']}
18
      rowHeaders={true}
19
      colWidths={[100, 130, 130, 130, 130]}
20
      columnHeaderHeight={50}
21
      height="auto"
22
      autoWrapRow={true}
23
      autoWrapCol={true}
24
      licenseKey="non-commercial-and-evaluation"
25
    />
26
  );
27
};
28

29
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      data={[
11
        [1, 'Ana Garcia', 'Product Manager', 'Spain', '2022-03-14'],
12
        [2, 'James Okafor', 'Senior Engineer', 'Nigeria', '2021-07-02'],
13
        [3, 'Li Wei', 'Data Analyst', 'China', '2023-01-19'],
14
        [4, 'Sofia Rossi', 'UX Designer', 'Italy', '2020-11-30'],
15
        [5, 'Mateo Fernandez', 'Engineering Lead', 'Argentina', '2019-05-08'],
16
      ]}
17
      colHeaders={['Employee ID', 'Employee full name', 'Current job title', 'Country of residence', 'Employment start date']}
18
      rowHeaders={true}
19
      colWidths={[100, 130, 130, 130, 130]}
20
      columnHeaderHeight={50}
21
      height="auto"
22
      autoWrapRow={true}
23
      autoWrapCol={true}
24
      licenseKey="non-commercial-and-evaluation"
25
    />
26
  );
27
};
28

29
export default ExampleComponent;

Nested headers

More complex data structures can be displayed with multiple headers, each representing a different category of data. To learn more about nested headers, see the column groups page.

Related guides

Column groups

Related blog articles

Handsontable 14.5.0: Improved performance and flexible column header class

Configuration options

activeHeaderClassName

colHeaders

columnHeaderHeight

currentHeaderClassName

nestedHeaders

title

Core methods