Custom ID, class, and style

Apply a custom id, class, and inline style to the Handsontable container, to target the grid with your own CSS or JavaScript selectors.

Overview

The Handsontable container is a regular DOM element, so you can give it a custom id, class, and inline style. How you set these attributes depends on the framework you use, but two rules apply everywhere:

id is not a configuration option. Handsontable does not read an id from the settings object passed to the constructor. The container’s id comes from the DOM element itself, or from a prop or attribute that the framework wrapper forwards to the container.
Handsontable assigns a random id when the container has none. If the container element has no id, or an id that starts with ht_, Handsontable overwrites it with a generated value in the form ht_<random>. To keep a custom id, use one that does not start with ht_.

Set the id, class, and style

In the vanilla JavaScript build, the container is the DOM element you pass to the Handsontable constructor. Set its id, class, and style on that element before or after initialization.

In the following example, the container receives a custom class and an inline border. Because the element already has the id example1, Handsontable keeps it. An element with no id would instead receive a generated ht_<random> value.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
// register Handsontable's modules
4
registerAllModules();
5
const container = document.querySelector('#example1');
6
// apply a custom class and inline style to the container element
7
container.classList.add('inventory-grid');
8
container.style.border = '1px solid #4caf50';
9
const data = [
10
    ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],
11
    ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],
12
    ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],
13
    ['SKU-3340', 'Notebook', 230, 'Stationery'],
14
    ['SKU-7782', 'Standing Desk', 18, 'Furniture'],
15
];
16
new Handsontable(container, {
17
    data,
18
    colHeaders: ['SKU', 'Product', 'Stock', 'Category'],
19
    height: 'auto',
20
    autoWrapRow: true,
21
    autoWrapCol: true,
22
    licenseKey: 'non-commercial-and-evaluation',
23
});

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

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

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

9
// apply a custom class and inline style to the container element
10
container.classList.add('inventory-grid');
11
container.style.border = '1px solid #4caf50';
12

13
const data = [
14
  ['SKU-4821', 'Wireless Mouse', 142, 'Electronics'],
15
  ['SKU-0093', 'USB-C Cable', 67, 'Electronics'],
16
  ['SKU-1175', 'Desk Lamp', 0, 'Home Office'],
17
  ['SKU-3340', 'Notebook', 230, 'Stationery'],
18
  ['SKU-7782', 'Standing Desk', 18, 'Furniture'],
19
];
20

21
new Handsontable(container, {
22
  data,
23
  colHeaders: ['SKU', 'Product', 'Stock', 'Category'],
24
  height: 'auto',
25
  autoWrapRow: true,
26
  autoWrapCol: true,
27
  licenseKey: 'non-commercial-and-evaluation',
28
});

Result

The grid container has your custom class and inline style applied, so you can target it with your own CSS or JavaScript selectors. The container’s id is the one you set, or a generated ht_<random> value when none is provided.