Formatting cells

Change the appearance of cells, using custom CSS classes, inline styles, or custom cell borders.

Overview

Handsontable uses the HTML table structure so customization is based either on referencing to the already existing elements, such as TR/TD, or by applying your own CSS classes to HTML elements.

You can format a cell either using a CSS class or with a style applied directly to the DOM element.

Apply custom CSS class styles

In this example, we add a custom class custom-cell to the cell in the top left corner and add a custom-table CSS class that highlights the table headers.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1');
8

9
new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5'],
16
  ],
17
  rowHeaders: true,
18
  colHeaders: true,
19
  stretchH: 'all',
20
  className: 'custom-table',
21
  cell: [
22
    {
23
      row: 0,
24
      col: 0,
25
      className: 'custom-cell',
26
    },
27
  ],
28
  height: 'auto',
29
  autoWrapRow: true,
30
  autoWrapCol: true,
31
  licenseKey: 'non-commercial-and-evaluation',
32
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example1')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5'],
16
  ],
17
  rowHeaders: true,
18
  colHeaders: true,
19
  stretchH: 'all',
20
  className: 'custom-table',
21
  cell: [
22
    {
23
      row: 0,
24
      col: 0,
25
      className: 'custom-cell',
26
    },
27
  ],
28
  height: 'auto',
29
  autoWrapRow: true,
30
  autoWrapCol: true,
31
  licenseKey: 'non-commercial-and-evaluation',
32
});

1
td.custom-cell {
2
  color: #fff !important;
3
  background-color: #254ac6 !important;
4
}
5
.custom-table thead th:nth-child(even),
6
.custom-table tbody tr:nth-child(odd) th {
7
  color: #fff !important;
8
  background-color: #254ac6 !important;
9
}

Apply inline styles

You can apply inline styles directly to the DOM element using its style property. You can use the renderer option to do that.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { textRenderer, registerRenderer } from 'handsontable/renderers';
4

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

8
const customStylesRenderer = (hotInstance, TD, ...rest) => {
9
  textRenderer(hotInstance, TD, ...rest);
10
  TD.style.fontWeight = 'bold';
11
  TD.style.color = 'green';
12
  TD.style.background = '#d7f1e1';
13
};
14

15
registerRenderer('customStylesRenderer', customStylesRenderer);
16

17
const container = document.querySelector('#example2');
18

19
new Handsontable(container, {
20
  data: [
21
    ['A1', 'B1', 'C1', 'D1', 'E1'],
22
    ['A2', 'B2', 'C2', 'D2', 'E2'],
23
    ['A3', 'B3', 'C3', 'D3', 'E3'],
24
    ['A4', 'B4', 'C4', 'D4', 'E4'],
25
    ['A5', 'B5', 'C5', 'D5', 'E5'],
26
  ],
27
  rowHeaders: true,
28
  colHeaders: true,
29
  stretchH: 'all',
30
  cell: [
31
    {
32
      row: 0,
33
      col: 0,
34
      renderer: 'customStylesRenderer',
35
    },
36
  ],
37
  height: 'auto',
38
  autoWrapRow: true,
39
  autoWrapCol: true,
40
  licenseKey: 'non-commercial-and-evaluation',
41
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { textRenderer, registerRenderer } from 'handsontable/renderers';
4
import { BaseRenderer } from 'handsontable/renderers';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
const customStylesRenderer: BaseRenderer = (hotInstance, TD, ...rest) => {
10
  textRenderer(hotInstance, TD, ...rest);
11
  TD.style.fontWeight = 'bold';
12
  TD.style.color = 'green';
13
  TD.style.background = '#d7f1e1';
14
};
15

16
registerRenderer('customStylesRenderer', customStylesRenderer);
17

18
const container = document.querySelector('#example2')!;
19

20
new Handsontable(container, {
21
  data: [
22
    ['A1', 'B1', 'C1', 'D1', 'E1'],
23
    ['A2', 'B2', 'C2', 'D2', 'E2'],
24
    ['A3', 'B3', 'C3', 'D3', 'E3'],
25
    ['A4', 'B4', 'C4', 'D4', 'E4'],
26
    ['A5', 'B5', 'C5', 'D5', 'E5'],
27
  ],
28
  rowHeaders: true,
29
  colHeaders: true,
30
  stretchH: 'all',
31
  cell: [
32
    {
33
      row: 0,
34
      col: 0,
35
      renderer: 'customStylesRenderer',
36
    },
37
  ],
38
  height: 'auto',
39
  autoWrapRow: true,
40
  autoWrapCol: true,
41
  licenseKey: 'non-commercial-and-evaluation',
42
});

Custom cell borders

To enable the custom borders feature, set the customBorders option. This can either be set as true or initialized as an array with a pre-defined setup. For the list of available settings and methods, visit the API reference.

In the names of the API properties, the words start and end refer to the starting and ending edges of the layout direction.

You can customize the border style using the style property in the border configuration. The available options are:

'solid' (default) - A solid line border
'dashed' - A dashed line border
'dotted' - A dotted line border

The style property can be set for any border edge (top, bottom, start, end). When not specified, it defaults to 'solid'.

The example below demonstrates different border styles applied to various cell ranges:

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example3');
8

9
new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
16
  ],
17
  rowHeaders: true,
18
  colHeaders: true,
19
  autoWrapRow: true,
20
  autoWrapCol: true,
21
  stretchH: 'all',
22
  height: 'auto',
23
  licenseKey: 'non-commercial-and-evaluation',
24
  customBorders: [
25
    {
26
      range: {
27
        from: {
28
          row: 1,
29
          col: 1,
30
        },
31
        to: {
32
          row: 3,
33
          col: 4,
34
        },
35
      },
36
      top: {
37
        width: 2,
38
        color: '#5292F7',
39
        style: 'dotted',
40
      },
41
      bottom: {
42
        width: 2,
43
        color: 'red',
44
      },
45
      start: {
46
        width: 2,
47
        color: 'orange',
48
        style: 'dashed',
49
      },
50
      end: {
51
        width: 2,
52
        color: 'magenta',
53
      },
54
    },
55
    {
56
      row: 2,
57
      col: 2,
58
      start: {
59
        width: 2,
60
        color: 'red',
61
      },
62
      end: {
63
        width: 1,
64
        color: 'green',
65
      },
66
    },
67
  ],
68
});

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// Register all Handsontable's modules.
5
registerAllModules();
6

7
const container = document.querySelector('#example3')!;
8

9
new Handsontable(container, {
10
  data: [
11
    ['A1', 'B1', 'C1', 'D1', 'E1', 'F1'],
12
    ['A2', 'B2', 'C2', 'D2', 'E2', 'F2'],
13
    ['A3', 'B3', 'C3', 'D3', 'E3', 'F3'],
14
    ['A4', 'B4', 'C4', 'D4', 'E4', 'F4'],
15
    ['A5', 'B5', 'C5', 'D5', 'E5', 'F5'],
16
  ],
17
  rowHeaders: true,
18
  colHeaders: true,
19
  autoWrapRow: true,
20
  autoWrapCol: true,
21
  stretchH: 'all',
22
  height: 'auto',
23
  licenseKey: 'non-commercial-and-evaluation',
24
  customBorders: [
25
    {
26
      range: {
27
        from: {
28
          row: 1,
29
          col: 1,
30
        },
31
        to: {
32
          row: 3,
33
          col: 4,
34
        },
35
      },
36
      top: {
37
        width: 2,
38
        color: '#5292F7',
39
        style: 'dotted',
40
      },
41
      bottom: {
42
        width: 2,
43
        color: 'red',
44
      },
45
      start: {
46
        width: 2,
47
        color: 'orange',
48
        style: 'dashed',
49
      },
50
      end: {
51
        width: 2,
52
        color: 'magenta',
53
      },
54
    },
55
    {
56
      row: 2,
57
      col: 2,
58
      start: {
59
        width: 2,
60
        color: 'red',
61
      },
62
      end: {
63
        width: 1,
64
        color: 'green',
65
      },
66
    },
67
  ],
68
});