React Data Grid Themes

React Data GridThemes

On this page

Use Handsontable's built-in themes or customize its look by adjusting available CSS variables.

Overview

Handsontable themes manage most visual elements of the data grid and are easy to customize, thanks to over 180 CSS variables available for each theme. By default, two built-in themes are available: main and horizon. Both include dark and light modes that automatically detect your application's preferred color scheme.

Built-in themes

The main (source (opens new window)) theme offers a spreadsheet-like interface, perfect for batch-editing tasks and providing users with a familiar experience, similar to other popular spreadsheet software on the market.

The horizon (source (opens new window)) theme, on the other hand, is better suited for data display and analysis. It hides the vertical lines between columns, giving it a cleaner and more lightweight feel.

Keep in mind that starting from version 15.0, importing a theme is required.

    Light and dark modes

    Each theme comes with three modes:

    • Light mode
    • Dark mode
    • Auto-dark mode

    The light and dark modes ignore the parent container's color scheme and remain either light or dark regardless the prefers-color-scheme media query value. The auto-dark mode automatically follow the preferred color of the parent container.

    Here's a summary of each available theme, mode, and their corresponding file names.

    Use a theme

    Load CSS files

    To ensure Handsontable renders correctly, it's required to load both the base and theme CSS files. The base file contains structural styles, while the theme file includes colors, sizes, and other variables needed for the grid.

    // ESM (ECMAScript modules)
import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';

// CommonJS
require('handsontable/styles/handsontable.min.css');
require('handsontable/styles/ht-theme-main.min.css');

    Alternatively, you can import the necessary files from the recommended CDN such as JSDelivr (opens new window) or cdnjs (opens new window).

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />

    Pass a theme name

    To use a theme in your app, you need to add the specific class name to the div container that holds Handsontable. For the main theme, you can choose from the following CSS classes:

    • ht-theme-main - light mode
    • ht-theme-main-dark - dark mode
    • ht-theme-main-dark-auto (recommended) - auto dark mode
    <div id="handsontable-example" class="ht-theme-main-dark-auto"></div>

    Alternatively, you can specify the theme name in the data grid's global settings object. This method will automatically inject the class name for you, overriding any class name passed in the div container.

    Use either this method or the class name in the div, but not both.

    <HotTable
  themeName="ht-theme-main-dark-auto"
/>

    Create a custom theme

    Creating a custom theme is straightforward. Follow these steps to set up your custom design:

    ① Create a new CSS file

    Start by copying one of the CSS files provided with Handsontable, such as ht-theme-main.css (opens new window). Rename it to something unique for your project. For this example, let’s name the new theme falcon, making the full file name ht-theme-falcon.css.

    Next, customize the existing variables to match your design requirements. If you need icons, you can use the ones available in the GitHub repository (opens new window) or create your own icon set using the @use "utils/[theme]/icons"; directive.

    ② Load and apply the theme

    Include the new CSS file in your project, ensuring it’s loaded after the base CSS file (styles/handsontable.min.css). If you’re using imports, it might look like this:

    import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-falcon.min.css';

    Apply the theme in one of two ways:

    • Using a CSS class: Add the theme class (e.g., ht-theme-falcon-dark-auto) to the container element that holds the data grid.
    <div id="handsontable-example" class="ht-theme-falcon-dark-auto"></div>
    • Using the themeName option: Specify the theme in the configuration, like so:

    <HotTable
  themeName="ht-theme-falcon"
  // other options
/>

    The classic theme

    The classic CSS file (handsontable.full.min.css (opens new window)) was the default theme up until version 15 (released in December 2024). While it will still be supported and tested in future Handsontable updates, it is no longer recommended for new projects.

    Known limitations

    In some cases, global styles enforced by the browser or operating system can impact the appearance of the data grid. This is a common challenge faced by all websites, not just Handsontable. Here are two specific scenarios and how to handle them:

    • High contrast mode in Windows: To style the component when Windows' high contrast mode is active, use the forced-colors media query. This allows you to detect and adapt to forced color settings. Read more (opens new window)
    • Auto dark theme in Google Chrome: Chrome automatically applies a dark theme in some scenarios. To detect and manage this behavior, refer to the official Chrome guide (opens new window)
    • By default, Handsontable wraps overflowing text within cells. To crop the content, you can apply the following CSS targeting all cells:
    #handsontable-example .handsontable td {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

    Troubleshooting

    Didn't find what you need? Try this: