Formatting cells

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

Overview

Handsontable renders an HTML table, so you can style existing tr and td elements or attach your own classes.

Choose an approach based on your goal:

Use className when you want reusable static styles.
Use renderer when you need to apply inline styles to specific cells at render time.
Use customBorders when you need custom border widths, colors, or styles for selected ranges.

Prerequisites

A Handsontable instance with data loaded.
A stylesheet, if you format cells through custom CSS classes.

Apply custom CSS class styles

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

To add a CSS class to a cell, column, or row, use the className option. Set it in the grid configuration, in a columns entry, or per cell through the cells callback. The class you provide is added to the cell’s <td> element, where your CSS rules can target it.

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
        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],
12
        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],
13
        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],
14
        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],
15
        ['SKU-9140', '4K Monitor 27"', 'Electronics', 34999, 15],
16
      ]}
17
      rowHeaders={true}
18
      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}
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
    />
33
  );
34
};
35

36
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
        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],
12
        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],
13
        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],
14
        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],
15
        ['SKU-9140', '4K Monitor 27"', 'Electronics', 34999, 15],
16
      ]}
17
      rowHeaders={true}
18
      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}
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
    />
33
  );
34
};
35

36
export default ExampleComponent;

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

Apply inline styles directly to a cell’s DOM element through the style property. Use the renderer option to run this logic on each render.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { textRenderer, registerRenderer } from 'handsontable/renderers';
4

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

8
const ExampleComponent = () => {
9
  registerRenderer('customStylesRenderer', (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
  return (
17
    <HotTable
18
      data={[
19
        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],
20
        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],
21
        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],
22
        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],
23
        ['SKU-9140', '4K Monitor 27"', 'Electronics', 34999, 15],
24
      ]}
25
      rowHeaders={true}
26
      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}
27
      stretchH="all"
28
      cell={[
29
        {
30
          row: 0,
31
          col: 0,
32
          renderer: 'customStylesRenderer',
33
        },
34
      ]}
35
      height="auto"
36
      autoWrapRow={true}
37
      autoWrapCol={true}
38
      licenseKey="non-commercial-and-evaluation"
39
    />
40
  );
41
};
42

43
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { textRenderer, registerRenderer } from 'handsontable/renderers';
4

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

8
const ExampleComponent = () => {
9
  registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {
10
    textRenderer(hotInstance, TD, ...rest);
11

12
    TD.style.fontWeight = 'bold';
13
    TD.style.color = 'green';
14
    TD.style.background = '#d7f1e1';
15
  });
16

17
  return (
18
    <HotTable
19
      data={[
20
        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],
21
        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],
22
        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],
23
        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],
24
        ['SKU-9140', '4K Monitor 27"', 'Electronics', 34999, 15],
25
      ]}
26
      rowHeaders={true}
27
      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}
28
      stretchH="all"
29
      cell={[
30
        {
31
          row: 0,
32
          col: 0,
33
          renderer: 'customStylesRenderer',
34
        },
35
      ]}
36
      height="auto"
37
      autoWrapRow={true}
38
      autoWrapCol={true}
39
      licenseKey="non-commercial-and-evaluation"
40
    />
41
  );
42
};
43

44
export default ExampleComponent;

Custom cell borders

To enable custom borders, set customBorders. You can set it to true or pass an array with predefined border configuration. For all settings and methods, see the API reference.

In API property names, 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 following example shows different border styles on selected cell ranges.

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
        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],
12
        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],
13
        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],
14
        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],
15
        ['SKU-9140', '4K Monitor 27"', 'Electronics', 34999, 15],
16
      ]}
17
      rowHeaders={true}
18
      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}
19
      stretchH="all"
20
      height="auto"
21
      autoWrapRow={true}
22
      autoWrapCol={true}
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
    />
69
  );
70
};
71

72
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
        ['SKU-4821', 'Laptop Pro 15', 'Electronics', 149900, 42],
12
        ['SKU-0093', 'Wireless Mouse', 'Peripherals', 2999, 218],
13
        ['SKU-7712', 'USB-C Hub 7-port', 'Peripherals', 5499, 0],
14
        ['SKU-3305', 'Mech. Keyboard', 'Peripherals', 8999, 67],
15
        ['SKU-9140', '4K Monitor 27"', 'Electronics', 34999, 15],
16
      ]}
17
      rowHeaders={true}
18
      colHeaders={['SKU', 'Product', 'Category', 'Price ($)', 'Stock']}
19
      stretchH="all"
20
      height="auto"
21
      autoWrapRow={true}
22
      autoWrapCol={true}
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
    />
69
  );
70
};
71

72
export default ExampleComponent;