Try now
Solutions · Design systems

Your design tokens on every data grid

Handsontable DataGrid takes its look from a theme you define: your colors, type, spacing and density, mapped onto its tokens. Ship it once as a design-system component, and every team’s grid matches the rest of the product.

Try nowOpen the Figma file
Design-token icons for type, color, shadow, sizing, spacing, radius and borders joined into one CSS file that styles the Handsontable grid below it

The data grid breaks the system

A button is easy to theme. A data grid brings headers, selection, editors, menus and scrollbars, and a third-party one arrives with a look of its own. Teams override internal class names that change between versions, and the grid stays the one component that never quite matches.

Tokens, not overridesColors, type, spacing and radius come from a token map, set in CSS variables or at runtime in JavaScript. No internal class names to chase.
Change it at runtimeHand a grid another theme, or another density or color scheme, while it runs. No rebuild and no second stylesheet to keep in step.
Upgrades keep your lookA theme is a token map, not overrides on markup that changes between versions. Even-numbered releases get approximately 30 months of support.
One grid, every frameworkReact, Angular and Vue wrappers and a plain JavaScript build share one theme, so every team on your system gets the same component.

Change the theme, not the grid

Six example themes, each a few lines of tokens on the Themes API, none of them shipped with the grid. Pick one and the grid restyles while it runs: colors and type change, and the rows, your sort and your filters stay where they were. Density is one setting for every theme; change it and the grid re-spaces.

Example themes

Space, an example theme: Dark, mono type.

Skip past the grid
Skip back before the grid

Build a theme without writing CSS

The Theme Builder lays a theme out in Common and Component layers, previews it on a real grid as you change a token, and exports the result. Start from your palette and adjust from there.

  • Common and Component layers
  • Live preview on a real grid
  • Export ready for the Themes API
Open Theme BuilderRead the introduction
The Theme Builder's Style panel twice: the Component tab with header font weight and colors, and the AI tab, where one sentence describing a style sets the whole theme

From Figma to code, token for token

Designers work with real grid components in the Handsontable Design System on Figma Community, built on the same tokens as the code. Export the variables with the Design Tokens plugin and they map straight onto the Themes API.

  • Grid components that mirror the code 1:1
  • Custom themes from Figma Local Variables
  • Tokens exported to JSON for the grid
Open the Figma file
From Figma to code: the Handsontable Design System library in Figma, its color variables for the main and horizon themes, exported through the Design Tokens plugin to a JSON file and pushed to GitHub

Wire it into the system you already have

A recipe in the docs maps shadcn/ui’s --primary, --background, --border and --radius onto the grid’s tokens in a Next.js project, down to the sort icons. The same approach works for any design system built on CSS variables.

  • Your CSS variables as the grid’s tokens
  • Your icon set in place of the default
  • Custom cell types in the same theme
Read the recipe
A Handsontable grid with grouped headers, dropdown and checkbox cells and a pagination bar, surrounded by the shadcn, MUI and Ant Design marks

Inside web components as well

Design systems that ship as web components — Lit, Stencil or plain custom elements — get the grid inside their shadow roots. As of 18.1.1 the core resolves mouse, focus and clipboard events through the boundary itself.

  • Lit and Stencil components
  • Vanilla custom elements
  • React, Angular and Vue wrappers too
Read the guide
A Handsontable grid nested inside a document, a platform page and a shadow root

Your tokens in one theme

Register a theme from the Main theme with your tokens on top and hand it to every grid. The tokens can point at your design system’s own CSS variables, so a change to the system reaches every grid that uses it.

Read the docsOpen the Figma file
import Handsontable from 'handsontable';
import { mainTheme, registerTheme } from 'handsontable/themes';


// Your design system's tokens, mapped onto the grid's.
const brandTheme = registerTheme({
  ...mainTheme,
  name: 'brand',
  tokens: {
    ...mainTheme.tokens,
    fontFamily: 'var(--ds-font-sans)',
    accentColor: 'var(--ds-color-primary)',
    foregroundColor: 'var(--ds-color-text)',
    backgroundColor: 'var(--ds-color-surface)',
    borderColor: 'var(--ds-color-border)',
    borderRadius: 'var(--ds-radius)',
  },
});


new Handsontable(container, {
  theme: brandTheme,
  data,
  licenseKey: 'non-commercial-and-evaluation',
});

Predictable by design

Two minor releases a month. One major release a quarter. Long-term support on every major for 24 months. No surprise breaking changes.

ChangelogLong-term support
Newest

v18.1.2

2026-10-07

  • Entitlement license keys survive line wrapping by mail clients
  • A key with edited human-readable text is rejected

v18.1.1

2026-09-15

  • Copy, cut and paste fixed in Salesforce Lightning Web Components
  • Filters no longer crash on updateSettings() with active filters

v18.1.0

2026-09-01

  • New intl-datetime cell type with a native picker
  • Resizable selections, and dragging to move cells
  • Faster scrolling, filtering and rendering

v18.0.0

2026-06-30

  • Core migrated from JavaScript to TypeScript
  • Theme API with wrapper layout slots
  • numbro, moment.js, DOMPurify and Pikaday dropped

v17.1.0

2026-05-19

  • DataProvider plugin for server-side rows
  • XLSX export, and a Notification plugin
  • Rowspan in NestedHeaders

v17.0.0

2026-03-09

  • Theme API
  • MultiSelect cell type with its own editor
  • A sanitizer option for custom XSS protection
GitHub stars
—
Plugins
42
Rows benchmarked
1M
Long-term support
24 months

Ready for an accessibility review

Evaluated against WCAG 2.2 Level A and AA, including keyboard navigation, screen readers, color contrast and ARIA, with a published Accessibility Conformance Report (VPAT) for your review.

Read the VPAT report

Make every data point count. Turn millions of them into actionable wisdom.

Let’s make it easier.
Smoother. Faster. All Handsontable.

Try now