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

The HotTable component forwards the id, className, and style props to the grid’s container element. If you omit id, the wrapper assigns a generated value such as hot-<random>.

Source code

JavaScript

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

// register Handsontable's modules
registerAllModules();

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

const ExampleComponent = () => (
  <HotTable
    id="inventory-grid"
    className="inventory-grid"
    style={{ border: '1px solid #4caf50' }}
    data={data}
    colHeaders={['SKU', 'Product', 'Stock', 'Category']}
    height="auto"
    autoWrapRow={true}
    autoWrapCol={true}
    licenseKey="non-commercial-and-evaluation"
  />
);

export default ExampleComponent;

TypeScript

import { FC } from 'react';
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

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

const ExampleComponent: FC = () => (
  <HotTable
    id="inventory-grid"
    className="inventory-grid"
    style={{ border: '1px solid #4caf50' }}
    data={data}
    colHeaders={['SKU', 'Product', 'Stock', 'Category']}
    height="auto"
    autoWrapRow={true}
    autoWrapCol={true}
    licenseKey="non-commercial-and-evaluation"
  />
);

export default ExampleComponent;

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.