JavaScript Data GridLegacy Style

Starting from version 17.0.0, the legacy stylesheet has been removed from Handsontable. If you're upgrading from an earlier version, you must migrate to the Classic theme.

On this page

• Legacy styles are no longer available
• Migrate to the Classic theme
  • Option 1: Using the Theme API (recommended)
  • Option 2: Using CSS files with theme as string
  • Why migrate to Classic?

Legacy styles are no longer available

The legacy CSS file (handsontable.full.min.css) was the default stylesheet up until version 15 (released in December 2024). In version 16.1, Handsontable introduced a new theming system with the Classic theme as a replacement. As of version 17.0.0, the legacy stylesheet has been completely removed.

If you're upgrading from a version prior to 17.0.0, you must migrate to the Classic theme to ensure your grid displays correctly.

Migrate to the Classic theme

There are two ways to apply the Classic theme. The recommended approach is to use the Theme API with a theme object.

Option 1: Using the Theme API (recommended)

The Theme API allows you to import and register themes programmatically. This approach provides full access to theme customization features like density modes and color schemes.

import Handsontable from 'handsontable';
import { classicTheme } from 'handsontable/themes';

const hot = new Handsontable(container, {
  theme: classicTheme,
  // ... other options
});

Option 2: Using CSS files with theme as string

Alternatively, you can use CSS files and pass the theme name as a string to the theme option.

Step 1. Update your CSS imports

Replace your existing CSS import with the base styles and Classic theme:

- @import 'handsontable/dist/handsontable.full.min.css';
+ @import 'handsontable/styles/ht-theme-classic.min.css';

Or if you're using JavaScript imports:

- import 'handsontable/dist/handsontable.full.min.css';
+ import 'handsontable/styles/ht-theme-classic.min.css';

Step 2. Set the theme in Handsontable configuration

const hot = new Handsontable(container, {
  theme: 'ht-theme-classic',
  // ... other options
});

Why migrate to Classic?

The Classic theme provides the same visual appearance as the legacy style, but with significant improvements:

• CSS variables: Easily customize colors, spacing, and other visual properties
• Better maintainability: The theming system is designed for long-term support
• Consistency: Works seamlessly with the new Design System

For more detailed migration instructions, see:

• Migrate from 16.2 to 17.0

For more information about the theming system, see:

• Themes