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 Angular wrapper renders the grid into an inner container element nested inside the <hot-table> host element. The id, class, and style you set on <hot-table> apply to the host element, which wraps the grid. A class or style on the host therefore still surrounds the grid visually.

The grid’s own container element receives an automatically generated ht_<random> id, so the id you set on <hot-table> does not become the container’s id. To target the grid container directly, use a descendant selector such as hot-table#inventory-grid > div.

Source code

TypeScript

/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings, HotTableModule } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example1-custom-id',
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table
      id="inventory-grid"
      class="inventory-grid"
      style="display: block; border: 1px solid #4caf50;"
      [data]="data"
      [settings]="gridSettings"
    ></hot-table>
  </div>`,
})
export class AppComponent {
  readonly 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'],
  ];

  readonly gridSettings: GridSettings = {
    colHeaders: ['SKU', 'Product', 'Stock', 'Category'],
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
  };
}
/* end-file */

/* file: app.config.ts */
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { registerAllModules } from 'handsontable/registry';
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';

// register Handsontable's modules
registerAllModules();

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    {
      provide: HOT_GLOBAL_CONFIG,
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
    },
  ],
};
/* end-file */

HTML

<div>
  <example1-custom-id></example1-custom-id>
</div>

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.