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
}

Give your rule enough specificity

A theme styles cells through rules such as .ht-theme-main .htCore td, which is more specific than a single class selector. A rule like .custom-cell { font-size: 24px; } therefore loses to the theme, and the cell keeps the theme’s font size.

To win, include the theme class and the element in your selector:

1
.ht-theme-main .htCore td.custom-cell {
2
  font-size: 24px;
3
}

Adding !important to your original rule works too, but the selector above keeps the cascade readable.

autoRowSize and autoColumnSize measure each cell with its class applied, so a class that changes a cell’s font size, padding, or borders is reflected in the calculated row heights and column widths.

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;

Apply borders progressively for large configurations

Building a very large customBorders configuration before the first render can delay the initial paint. To render the grid first and apply the borders in background batches, set customBordersProgressive to true:

1
const hot = new Handsontable(container, {
2
  data,
3
  customBorders: largeBorderConfig,
4
  customBordersProgressive: true,
5
  licenseKey: 'non-commercial-and-evaluation',
6
});

Pass an object to control how many border entries are applied per batch:

1
customBordersProgressive: { chunkSize: 5000 },

With progressive application enabled, the borders fill in after the grid becomes interactive, so getBorders() and the cells’ border metadata are complete only once the afterCustomBordersUpdate hook fires:

1
const hot = new Handsontable(container, {
2
  data,
3
  customBorders: largeBorderConfig,
4
  customBordersProgressive: true,
5
  licenseKey: 'non-commercial-and-evaluation',
6
  afterCustomBordersUpdate() {
7
    // every custom border is now applied
8
  },
9
});