Themes

Use Handsontable’s built-in themes or customize its look using the Theme API or CSS variables.

Overview

Handsontable themes manage most visual elements of the data grid. Three built-in themes are available: main, horizon, and classic. All themes include dark and light modes.

The recommended way to apply themes is using the Theme API, which allows you to register and configure themes programmatically with runtime features like density modes and color schemes. Alternatively, you can use CSS files and pass the theme name as a string for a simpler setup.

Built-in themes

The main 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 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.

The classic theme is a replacement for the old legacy style. It retains the familiar look and feel of the original legacy styles, but has been updated to allow customization with CSS variables. This theme is ideal for users who prefer the traditional appearance of Handsontable but want to benefit from the theming system. The classic theme supports both light and dark modes, ensuring a seamless integration with your application’s color scheme preferences.

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

1
import { useRef, useState, useEffect } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
import { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';
5

6
// register Handsontable's modules
7
registerAllModules();
8
registerTheme(mainTheme);
9
registerTheme(horizonTheme);
10
registerTheme(classicTheme);
11

12
// constants.js
102 collapsed lines
13
export const data = [
14
  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],
15
  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],
16
  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],
17
  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],
18
  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],
19
  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],
20
  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],
21
  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],
22
  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],
23
  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],
24
  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],
25
  [false, 'Twinder', 'Egypt', "Men's Bib-Shorts", '2025-08-31', '04-4281278', false, '96', 6, 1],
26
  [false, 'Midel', 'United States', "Men's Sports Shorts", '2025-06-27', '55-1711908', true, '108', 10, 3],
27
  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],
28
  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],
29
  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],
30
  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],
31
  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],
32
  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],
33
  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],
34
  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],
35
  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],
36
  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],
37
  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],
38
  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],
39
  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],
40
  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],
41
  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],
42
  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],
43
  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],
44
  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],
45
  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],
46
  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],
47
  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],
48
  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],
49
  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],
50
  [false, 'Zoombeat', 'United States', "Women's Mountain Shorts", '2025-11-03', '56-8673088', false, '53', 2, 3],
51
  [false, 'Roomm', 'China', "Women's Tights", '2025-03-16', '76-0085918', true, '168', 1, 1],
52
  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],
53
  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],
54
  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],
55
  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],
56
  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],
57
  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],
58
  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],
59
  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],
60
  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],
61
  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],
62
  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],
63
  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],
64
  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],
65
  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],
66
  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],
67
  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],
68
  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],
69
  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],
70
  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],
71
  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],
72
  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],
73
  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],
74
  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],
75
  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],
76
  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],
77
  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],
78
  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],
79
  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],
80
  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],
81
  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],
82
  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],
83
  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],
84
  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],
85
  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],
86
  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],
87
  [false, 'Quinu', "Xi'an", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],
88
  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],
89
  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],
90
  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],
91
  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],
92
  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],
93
  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],
94
  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],
95
  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],
96
  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],
97
  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],
98
  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],
99
  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],
100
  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],
101
  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],
102
  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],
103
  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],
104
  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],
105
  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],
106
  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],
107
  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],
108
  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],
109
  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],
110
  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],
111
  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],
112
  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],
113
  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],
114
];
115

116
const ExampleComponent = () => {
117
  const hotRef = useRef(null);
118
  const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'
119
    ? 'horizon-dark'
120
    : 'horizon-light';
121

122
  const [themeName, setThemeName] = useState(currentTheme);
123
  const [menuOpen, setMenuOpen] = useState(false);
124

125
  const themeOptions = [
126
    { value: 'main-light', label: 'Main Light', themeClass: 'ht-theme-main' },
127
    { value: 'main-dark', label: 'Main Dark', themeClass: 'ht-theme-main-dark' },
128
    { value: 'horizon-light', label: 'Horizon Light', themeClass: 'ht-theme-horizon' },
129
    { value: 'horizon-dark', label: 'Horizon Dark', themeClass: 'ht-theme-horizon-dark' },
130
    { value: 'classic-light', label: 'Classic Light', themeClass: 'ht-theme-classic' },
131
    { value: 'classic-dark', label: 'Classic Dark', themeClass: 'ht-theme-classic-dark' },
132
  ];
133

134
  const currentOption = themeOptions.find((o) => o.value === themeName) || themeOptions[0];
135
  const [dotColors, setDotColors] = useState({ fg: '', bg: '', accent: '' });
136

137
  useEffect(() => {
138
    const gridEl = hotRef.current?.hotInstance?.rootElement;
139

140
    if (gridEl) {
141
      const helper = document.createElement('div');
142

143
      helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
144
      gridEl.appendChild(helper);
145

146
      const resolve = (varName) => {
147
        helper.style.color = `var(${varName})`;
148

149
        return getComputedStyle(helper).color;
150
      };
151

152
      setDotColors({
153
        fg: resolve('--ht-foreground-color'),
154
        bg: resolve('--ht-background-color'),
155
        accent: resolve('--ht-accent-color'),
156
      });
157

158
      gridEl.removeChild(helper);
159
    }
160
  }, [themeName]);
161

162
  return (
163
    <>
164
      <div className="example-controls-container">
165
        <div className="controls">
166
          <div className="theme-dropdown" onClick={(e) => e.stopPropagation()}>
167
            <button
168
              className="theme-dropdown-trigger"
169
              type="button"
170
              aria-haspopup="listbox"
171
              aria-expanded={menuOpen}
172
              onClick={() => setMenuOpen(!menuOpen)}
173
            >
174
              <span className="theme-dropdown-colors">
175
                <span className="color" style={{ background: dotColors.fg }} />
176
                <span className="color" style={{ background: dotColors.bg }} />
177
                <span className="color" style={{ background: dotColors.accent }} />
178
              </span>
179
              <span className="theme-dropdown-label">{currentOption.label}</span>
180
              <svg className="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6l6 -6" /></svg>
181
            </button>
182
            {menuOpen && (
183
              <ul className="theme-dropdown-menu" role="listbox">
184
                {themeOptions.map((opt) => (
185
                  <li
186
                    key={opt.value}
187
                    role="option"
188
                    aria-selected={opt.value === themeName}
189
                    onClick={() => {
190
                      setThemeName(opt.value);
191
                      setMenuOpen(false);
192
                    }}
193
                  >
194
                    {opt.label}
195
                  </li>
196
                ))}
197
              </ul>
198
            )}
199
          </div>
200
        </div>
201
      </div>
202
      <HotTable
203
        key={themeName}
204
        ref={hotRef}
205
        theme={getTheme(themeName.split('-')[0]).setColorScheme(themeName.split('-')[1] || 'auto')}
206
        data={data}
207
        height={450}
208
        colWidths={[180, 220, 140, 120, 120, 120, 140]}
209
        colHeaders={['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country']}
210
        contextMenu={[
211
          'cut',
212
          'copy',
213
          '---------',
214
          'row_above',
215
          'row_below',
216
          'remove_row',
217
          '---------',
218
          'alignment',
219
          'make_read_only',
220
          'clear_column',
221
        ]}
222
        columns={[
223
          {
224
            data: 1,
225
            type: 'text',
226
            headerClassName: 'htLeft',
227
          },
228
          {
229
            data: 3,
230
            type: 'text',
231
            headerClassName: 'htLeft',
232
          },
233
          {
234
            data: 4,
235
            type: 'intl-date',
236
            allowInvalid: false,
237
            locale: 'en-GB',
238
            dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },
239
            headerClassName: 'htLeft',
240
          },
241
          {
242
            data: 6,
243
            type: 'checkbox',
244
            className: 'htCenter',
245
            headerClassName: 'htLeft',
246
          },
247
          {
248
            data: 7,
249
            type: 'numeric',
250
            headerClassName: 'htLeft',
251
          },
252
          {
253
            data: 5,
254
            type: 'text',
255
            headerClassName: 'htLeft',
256
          },
257
          {
258
            data: 2,
259
            type: 'text',
260
            headerClassName: 'htLeft',
261
          },
262
        ]}
263
        dropdownMenu={true}
264
        hiddenColumns={{
265
          indicators: true,
266
        }}
267
        multiColumnSorting={true}
268
        filters={true}
269
        rowHeaders={true}
270
        manualRowMove={true}
271
        headerClassName="htLeft"
272
        autoWrapRow={true}
273
        autoWrapCol={true}
274
        manualRowResize={true}
275
        manualColumnResize={true}
276
        navigableHeaders={true}
277
        licenseKey="non-commercial-and-evaluation"
278
      >
279
        <HotColumn data={1} />
280
        <HotColumn data={3} />
281
        <HotColumn data={4} type="intl-date" />
282
        <HotColumn data={6} type="checkbox" className="htCenter" />
283
        <HotColumn data={7} type="numeric" />
284
        <HotColumn data={5} />
285
        <HotColumn data={2} />
286
      </HotTable>
287
    </>
288
  );
289
};
290

291
export default ExampleComponent;

1
import { useRef, useState, useEffect } from 'react';
2
import { HotTable } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4
import { mainTheme, horizonTheme, classicTheme, registerTheme, getTheme } from 'handsontable/themes';
5

6
// register Handsontable's modules
7
registerAllModules();
8

9
registerTheme(mainTheme);
10
registerTheme(horizonTheme);
11
registerTheme(classicTheme);
12

13
// constants.js
102 collapsed lines
14
export const data: (string | number | boolean)[][] = [
15
  [false, 'Tagcat', 'United Kingdom', 'Classic Vest', '2025-10-11', '01-2331942', true, '172', 2, 2],
16
  [true, 'Zoomzone', 'Indonesia', 'Cycling Cap', '2025-05-03', '88-2768633', true, '188', 6, 2],
17
  [true, 'Meeveo', 'United States', 'Full-Finger Gloves', '2025-03-27', '51-6775945', true, '162', 1, 3],
18
  [false, 'Buzzdog', 'Philippines', 'HL Mountain Frame', '2025-08-29', '44-4028109', true, '133', 7, 1],
19
  [true, 'Katz', 'India', 'Half-Finger Gloves', '2025-10-02', '08-2758492', true, '87', 1, 3],
20
  [false, 'Jaxbean', 'China', 'HL Road Frame', '2025-09-28', '84-3557705', false, '26', 8, 1],
21
  [false, 'Wikido', 'Brazil', 'HL Touring Frame', '2025-06-24', '20-9397637', false, '110', 4, 1],
22
  [false, 'Browsedrive', 'United States', 'LL Mountain Frame', '2025-03-13', '36-0079556', true, '50', 4, 4],
23
  [false, 'Twinder', 'United Kingdom', 'LL Road Frame', '2025-04-06', '41-1489542', false, '160', 6, 1],
24
  [false, 'Jetwire', 'China', 'LL Touring Frame', '2025-02-01', '37-1531629', true, '30', 8, 5],
25
  [false, 'Chatterpoint', 'China', 'Long-Sleeve Logo Jersey', '2025-07-14', '25-5083429', true, '39', 7, 2],
26
  [false, 'Twinder', 'Egypt', "Men's Bib-Shorts", '2025-08-31', '04-4281278', false, '96', 6, 1],
27
  [false, 'Midel', 'United States', "Men's Sports Shorts", '2025-06-27', '55-1711908', true, '108', 10, 3],
28
  [false, 'Yodo', 'India', 'ML Mountain Frame', '2025-03-16', '58-8360815', false, '46', 1, 1],
29
  [false, 'Camido', 'Russia', 'ML Mountain Frame-W', '2025-09-13', '10-3786104', true, '97', 8, 3],
30
  [false, 'Eire', 'Thailand', 'ML Road Frame', '2025-04-10', '45-1186054', true, '161', 1, 4],
31
  [false, 'Vinte', 'United Kingdom', 'ML Road Frame-W', '2025-01-22', '62-6202742', true, '58', 4, 3],
32
  [false, 'Twitterlist', 'China', 'Mountain Bike Socks', '2025-11-09', '88-9646223', true, '92', 8, 3],
33
  [false, 'Eidel', 'Bangladesh', 'Mountain-100', '2025-09-19', '45-5588112', true, '5', 6, 5],
34
  [false, 'Trunyx', 'Nigeria', 'Mountain-200', '2025-03-09', '66-6271819', true, '158', 4, 1],
35
  [false, 'Katz', 'Turkey', 'Mountain-300', '2025-03-05', '38-9245023', false, '121', 5, 4],
36
  [false, 'Kaymbo', 'United States', 'Mountain-400-W', '2025-12-24', '44-5916927', false, '61', 5, 4],
37
  [false, 'Ozu', 'Pakistan', 'Mountain-500', '2025-06-13', '31-5449914', true, '155', 2, 2],
38
  [false, 'Rhynyx', 'India', 'Racing Socks', '2025-12-05', '19-9413869', true, '162', 2, 4],
39
  [false, 'Flashset', 'Iran', 'Road-150', '2025-12-14', '25-9807605', false, '46', 7, 1],
40
  [false, 'Yata', 'Congo (Kinshasa)', 'Road-250', '2025-06-12', '74-4291983', true, '47', 4, 4],
41
  [false, 'Brainlounge', 'Vietnam', 'Road-350-W', '2025-03-10', '83-0980643', true, '104', 2, 3],
42
  [false, 'Babblestorm', 'United States', 'Road-450', '2025-10-10', '19-2878430', true, '101', 6, 4],
43
  [false, 'Youspan', 'Brazil', 'Road-550-W', '2025-12-16', '19-1838230', true, '150', 10, 3],
44
  [false, 'Nlounge', 'China', 'Road-650', '2025-10-31', '32-2267938', true, '42', 4, 2],
45
  [false, 'Twinte', 'India', 'Road-750', '2025-08-17', '79-2821972', true, '144', 9, 3],
46
  [false, 'Oyonder', 'United Kingdom', 'Short-Sleeve Classic Jersey', '2025-12-04', '46-6597557', true, '195', 4, 1],
47
  [false, 'Gigabox', 'Pakistan', 'Sport-100', '2025-02-03', '15-1793960', true, '199', 4, 4],
48
  [false, 'Livetube', 'France', 'Touring-1000', '2025-05-16', '86-0811003', true, '110', 4, 5],
49
  [false, 'Voomm', 'United Kingdom', 'Touring-2000', '2025-07-15', '95-3068680', true, '51', 4, 4],
50
  [false, 'Voonyx', 'China', 'Touring-3000', '2025-11-27', '35-3085360', false, '69', 2, 5],
51
  [false, 'Zoombeat', 'United States', "Women's Mountain Shorts", '2025-11-03', '56-8673088', false, '53', 2, 3],
52
  [false, 'Roomm', 'China', "Women's Tights", '2025-03-16', '76-0085918', true, '168', 1, 1],
53
  [false, 'Leenti', 'China', 'Mountain-400', '2025-05-16', '03-0893276', false, '58', 1, 4],
54
  [false, 'Jetpulse', 'United States', 'Road-550', '2025-02-08', '79-9013306', true, '152', 9, 3],
55
  [false, 'Katz', 'Peru', 'Road-350', '2025-02-15', '55-7799920', true, '66', 4, 2],
56
  [false, 'Cogidoo', 'India', 'LL Mountain Front Wheel', '2025-06-04', '07-0881122', false, '112', 9, 2],
57
  [false, 'Divavu', 'Colombia', 'Touring Rear Wheel', '2025-02-24', '58-6157387', true, '50', 10, 4],
58
  [false, 'Mydeo', 'China', 'Touring Front Wheel', '2025-12-07', '12-2810010', false, '31', 3, 5],
59
  [false, 'Browsebug', 'Japan', 'ML Mountain Front Wheel', '2025-01-14', '64-9249984', true, '132', 5, 5],
60
  [false, 'Layo', 'China', 'HL Mountain Front Wheel', '2025-04-24', '45-0739652', true, '45', 1, 5],
61
  [false, 'Snaptags', 'United Kingdom', 'LL Touring Handlebars', '2025-08-06', '09-5712761', true, '197', 4, 2],
62
  [false, 'Cogilith', 'China', 'HL Touring Handlebars', '2025-05-31', '01-7345008', true, '190', 4, 3],
63
  [false, 'Reallinks', 'United Kingdom', 'LL Road Front Wheel', '2025-05-14', '62-1065350', true, '184', 3, 4],
64
  [false, 'Quaxo', 'United States', 'ML Road Front Wheel', '2025-03-23', '44-7241323', true, '169', 3, 4],
65
  [false, 'Devify', 'China', 'HL Road Front Wheel', '2025-12-12', '52-0295699', false, '152', 4, 4],
66
  [false, 'Youopia', 'Angola', 'LL Mountain Handlebars', '2025-04-01', '52-2650922', false, '182', 6, 4],
67
  [false, 'Ainyx', 'China', 'Touring Pedal', '2025-02-27', '48-3618525', true, '141', 6, 1],
68
  [false, 'Browsetype', 'Malaysia', 'ML Mountain Handlebars', '2025-04-28', '51-8893923', true, '169', 7, 1],
69
  [false, 'Muxo', 'China', 'HL Mountain Handlebars', '2025-08-22', '68-5911361', false, '39', 7, 1],
70
  [false, 'Bubbletube', 'China', 'LL Road Handlebars', '2025-10-04', '41-5880042', true, '71', 8, 3],
71
  [false, 'Fadeo', 'Vietnam', 'ML Road Handlebars', '2025-04-23', '90-5913983', true, '148', 10, 3],
72
  [false, 'Yadel', 'United Kingdom', 'HL Road Handlebars', '2025-04-18', '92-0960699', true, '116', 8, 1],
73
  [false, 'Blognation', 'China', 'LL Headset', '2025-01-10', '06-9493898', true, '96', 10, 1],
74
  [false, 'Devpoint', 'China', 'ML Headset', '2025-12-25', '69-5878565', true, '35', 4, 2],
75
  [false, 'Aibox', 'United Kingdom', 'HL Headset', '2025-03-18', '13-1133017', true, '16', 8, 2],
76
  [false, 'Brightdog', 'China', 'LL Mountain Pedal', '2025-09-11', '39-6530433', true, '194', 2, 5],
77
  [false, 'Gabcube', 'Nigeria', 'ML Mountain Pedal', '2025-04-22', '96-6860388', true, '24', 1, 3],
78
  [false, 'Muxo', 'China', 'HL Mountain Pedal', '2025-06-05', '30-0356137', true, '170', 4, 4],
79
  [false, 'Tambee', 'China', 'ML Touring Seat/Saddle', '2025-02-22', '93-9058255', true, '184', 9, 5],
80
  [false, 'Cogilith', 'India', 'LL Touring Seat/Saddle', '2025-04-06', '82-9268909', false, '153', 10, 4],
81
  [false, 'Dynabox', 'Hong Kong', 'HL Touring Seat/Saddle', '2025-01-10', '20-6913815', false, '88', 10, 1],
82
  [false, 'Shuffledrive', 'Sudan', 'LL Road Pedal', '2025-09-16', '08-8238817', true, '57', 9, 2],
83
  [false, 'Fivechat', 'China', 'ML Road Pedal', '2025-08-26', '44-7370350', false, '62', 4, 1],
84
  [false, 'Meembee', 'United States', 'HL Road Pedal', '2025-12-27', '01-3525949', true, '123', 2, 4],
85
  [false, 'Dynazzy', 'United Kingdom', 'LL Mountain Seat/Saddle 1', '2025-12-15', '04-2414623', true, '77', 10, 5],
86
  [false, 'Eare', 'China', 'ML Mountain Seat/Saddle 1', '2025-04-04', '15-1917509', false, '199', 9, 4],
87
  [false, 'Yozio', 'China', 'HL Mountain Seat/Saddle 1', '2025-03-15', '06-2526845', true, '149', 8, 2],
88
  [false, 'Quinu', "Xi'an", '425-777-7829', '2025-02-22', '83-1713558', false, '191', 9, 5],
89
  [false, 'Jazzy', 'United Kingdom', 'ML Road Seat/Saddle 1', '2025-08-07', '00-8892524', true, '150', 10, 2],
90
  [false, 'Thoughtsphere', 'China', 'HL Road Seat/Saddle 1', '2025-11-28', '39-5538991', true, '130', 7, 3],
91
  [false, 'Leenti', 'China', 'ML Road Rear Wheel', '2025-12-29', '06-9002973', true, '179', 1, 2],
92
  [false, 'Quaxo', 'United Kingdom', 'HL Road Rear Wheel', '2025-09-06', '73-6104901', true, '98', 5, 3],
93
  [false, 'Tanoodle', 'Chile', 'LL Mountain Seat/Saddle 2', '2025-05-24', '68-7384479', true, '175', 2, 3],
94
  [false, 'Feednation', 'China', 'ML Mountain Seat/Saddle 2', '2025-11-21', '26-7757763', true, '11', 1, 3],
95
  [false, 'Kayveo', 'China', 'HL Mountain Seat/Saddle 2', '2025-06-21', '07-4873562', false, '184', 7, 4],
96
  [false, 'Meevee', 'Saudi Arabia', 'LL Road Seat/Saddle 1', '2025-11-16', '46-5819554', false, '27', 9, 3],
97
  [false, 'Twitterworks', 'China', 'ML Road Seat/Saddle 2', '2025-04-19', '01-2666826', true, '186', 3, 2],
98
  [false, 'Wikizz', 'Tanzania', 'HL Road Seat/Saddle 2', '2025-03-08', '54-7090503', true, '20', 3, 3],
99
  [false, 'Yoveo', 'United States', 'LL Mountain Tire', '2025-10-14', '78-7658520', false, '153', 2, 1],
100
  [false, 'Yakidoo', 'China', 'ML Mountain Tire', '2025-10-12', '23-9926318', true, '161', 8, 5],
101
  [false, 'Oyope', 'China', 'HL Mountain Tire', '2025-09-20', '20-0179517', true, '98', 10, 5],
102
  [false, 'Skipstorm', 'United States', 'LL Road Tire', '2025-10-01', '02-9543343', true, '30', 7, 3],
103
  [false, 'Minyx', 'United States', 'ML Road Tire', '2025-07-07', '98-3938169', true, '73', 10, 2],
104
  [false, 'Miboo', 'China', 'HL Road Tire', '2025-07-25', '68-5197934', true, '158', 9, 1],
105
  [false, 'Realfire', 'United States', 'Touring Tire', '2025-08-27', '39-8260460', true, '122', 5, 2],
106
  [false, 'Shufflester', 'China', 'Mountain Tire Tube', '2025-06-08', '45-9776170', true, '33', 2, 4],
107
  [false, 'Ntag', 'China', 'Road Tire Tube', '2025-12-06', '45-0858451', true, '107', 6, 2],
108
  [false, 'Jabberbean', 'United States', 'Touring Tire Tube', '2025-04-26', '15-4247305', true, '15', 1, 2],
109
  [false, 'Thoughtblab', 'China', 'LL Bottom Bracket', '2025-05-21', '15-8534931', true, '168', 5, 2],
110
  [false, 'Jabbertype', 'China', 'Classic Vest', '2025-07-25', '23-1251557', true, '135', 4, 2],
111
  [false, 'Buzzshare', 'United Kingdom', 'Cycling Cap', '2025-07-07', '86-5920601', true, '11', 1, 4],
112
  [false, 'Roodel', 'United States', 'Full-Finger Gloves', '2025-01-13', '48-1055459', true, '41', 6, 4],
113
  [false, 'Zoovu', 'China', 'Half-Finger Gloves', '2025-06-03', '12-7842022', true, '144', 6, 1],
114
  [false, 'Photofeed', 'China', 'HL Mountain Frame', '2025-07-14', '94-5088099', true, '106', 1, 4],
115
];
116

117
const ExampleComponent = () => {
118
  const hotRef = useRef(null);
119
  const currentTheme = document.documentElement.getAttribute('data-theme') === 'dark'
120
    ? 'horizon-dark'
121
    : 'horizon-light';
122

123
  const [themeName, setThemeName] = useState(currentTheme);
124
  const [menuOpen, setMenuOpen] = useState(false);
125

126
  const themeOptions = [
127
    { value: 'main-light', label: 'Main Light', themeClass: 'ht-theme-main' },
128
    { value: 'main-dark', label: 'Main Dark', themeClass: 'ht-theme-main-dark' },
129
    { value: 'horizon-light', label: 'Horizon Light', themeClass: 'ht-theme-horizon' },
130
    { value: 'horizon-dark', label: 'Horizon Dark', themeClass: 'ht-theme-horizon-dark' },
131
    { value: 'classic-light', label: 'Classic Light', themeClass: 'ht-theme-classic' },
132
    { value: 'classic-dark', label: 'Classic Dark', themeClass: 'ht-theme-classic-dark' },
133
  ];
134

135
  const currentOption = themeOptions.find((o) => o.value === themeName) || themeOptions[0];
136
  const [dotColors, setDotColors] = useState({ fg: '', bg: '', accent: '' });
137

138
  useEffect(() => {
139
    const gridEl = hotRef.current?.hotInstance?.rootElement;
140

141
    if (gridEl) {
142
      const helper = document.createElement('div');
143

144
      helper.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
145
      gridEl.appendChild(helper);
146

147
      const resolve = (varName: string) => {
148
        helper.style.color = `var(${varName})`;
149

150
        return getComputedStyle(helper).color;
151
      };
152

153
      setDotColors({
154
        fg: resolve('--ht-foreground-color'),
155
        bg: resolve('--ht-background-color'),
156
        accent: resolve('--ht-accent-color'),
157
      });
158

159
      gridEl.removeChild(helper);
160
    }
161
  }, [themeName]);
162

163
  return (
164
    <>
165
      <div className="example-controls-container">
166
        <div className="controls">
167
          <div className="theme-dropdown" onClick={(e) => e.stopPropagation()}>
168
            <button
169
              className="theme-dropdown-trigger"
170
              type="button"
171
              aria-haspopup="listbox"
172
              aria-expanded={menuOpen}
173
              onClick={() => setMenuOpen(!menuOpen)}
174
            >
175
              <span className="theme-dropdown-colors">
176
                <span className="color" style={{ background: dotColors.fg }} />
177
                <span className="color" style={{ background: dotColors.bg }} />
178
                <span className="color" style={{ background: dotColors.accent }} />
179
              </span>
180
              <span className="theme-dropdown-label">{currentOption.label}</span>
181
              <svg className="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6l6 -6" /></svg>
182
            </button>
183
            {menuOpen && (
184
              <ul className="theme-dropdown-menu" role="listbox">
185
                {themeOptions.map((opt) => (
186
                  <li
187
                    key={opt.value}
188
                    role="option"
189
                    aria-selected={opt.value === themeName}
190
                    onClick={() => {
191
                      setThemeName(opt.value);
192
                      setMenuOpen(false);
193
                    }}
194
                  >
195
                    {opt.label}
196
                  </li>
197
                ))}
198
              </ul>
199
            )}
200
          </div>
201
        </div>
202
      </div>
203
      <HotTable
204
        key={themeName}
205
        ref={hotRef}
206
        theme={getTheme(themeName.split('-')[0]).setColorScheme(themeName.split('-')[1] || 'auto')}
207
        data={data}
208
        height={450}
209
        colWidths={[180, 220, 140, 120, 120, 120, 140]}
210
        colHeaders={['Company Name', 'Name', 'Sell date', 'In stock', 'Quantity', 'Order ID', 'Country']}
211
        contextMenu={[
212
          'cut',
213
          'copy',
214
          '---------',
215
          'row_above',
216
          'row_below',
217
          'remove_row',
218
          '---------',
219
          'alignment',
220
          'make_read_only',
221
          'clear_column',
222
        ]}
223
        columns={[
224
          {
225
            data: 1,
226
            type: 'text',
227
            headerClassName: 'htLeft',
228
          },
229
          {
230
            data: 3,
231
            type: 'text',
232
            headerClassName: 'htLeft',
233
          },
234
          {
235
            data: 4,
236
            type: 'intl-date',
237
            allowInvalid: false,
238
            locale: 'en-GB',
239
            dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' },
240
            headerClassName: 'htLeft',
241
          },
242
          {
243
            data: 6,
244
            type: 'checkbox',
245
            className: 'htCenter',
246
            headerClassName: 'htLeft',
247
          },
248
          {
249
            data: 7,
250
            type: 'numeric',
251
            headerClassName: 'htLeft',
252
          },
253
          {
254
            data: 5,
255
            type: 'text',
256
            headerClassName: 'htLeft',
257
          },
258
          {
259
            data: 2,
260
            type: 'text',
261
            headerClassName: 'htLeft',
262
          },
263
        ]}
264
        dropdownMenu={true}
265
        hiddenColumns={{
266
          indicators: true,
267
        }}
268
        multiColumnSorting={true}
269
        filters={true}
270
        rowHeaders={true}
271
        manualRowMove={true}
272
        headerClassName="htLeft"
273
        autoWrapRow={true}
274
        autoWrapCol={true}
275
        manualRowResize={true}
276
        manualColumnResize={true}
277
        navigableHeaders={true}
278
        licenseKey="non-commercial-and-evaluation"
279
      >
280
        <HotColumn data={1} />
281
        <HotColumn data={3} />
282
        <HotColumn data={4} type="intl-date" />
283
        <HotColumn data={6} type="checkbox" className="htCenter" />
284
        <HotColumn data={7} type="numeric" />
285
        <HotColumn data={5} />
286
        <HotColumn data={2} />
287
      </HotTable>
288
    </>
289
  );
290
};
291

292
export default ExampleComponent;

1
/* Theme dropdown */
2
.theme-dropdown {
3
  position: relative;
4
  display: inline-flex;
5
  align-items: center;
6
}
7

8
.theme-dropdown-trigger {
9
  display: inline-flex;
10
  align-items: center;
11
  gap: 0.5rem;
12
  background: none;
13
  border: 1px solid var(--sl-color-gray-5);
14
  color: var(--sl-color-gray-2);
15
  cursor: pointer;
16
  font-size: var(--sl-text-sm);
17
  font-weight: 500;
18
  padding: 0.4rem 0.625rem;
19
  transition: color 0.15s, background-color 0.15s;
20
  white-space: nowrap;
21
  border-radius: 0;
22
}
23

24
.theme-dropdown-trigger:hover {
25
  color: var(--sl-color-white);
26
  background: var(--sl-color-gray-7, var(--sl-color-gray-6));
27
}
28

29
.theme-dropdown-chevron {
30
  flex-shrink: 0;
31
  margin-inline-start: 0.15rem;
32
  transition: transform 0.15s;
33
}
34

35
.theme-dropdown-trigger[aria-expanded='true'] .theme-dropdown-chevron {
36
  transform: rotate(180deg);
37
}
38

39
.theme-dropdown-menu {
40
  background: var(--sl-color-bg-nav);
41
  border: 1px solid var(--sl-color-gray-5);
42
  border-radius: 0;
43
  box-shadow: none;
44
  inset-inline-start: 0;
45
  list-style: none;
46
  margin: 0;
47
  min-width: 100%;
48
  overflow-y: auto;
49
  padding: 0;
50
  position: absolute;
51
  top: 100%;
52
  z-index: 100;
53
}
54

55
.theme-dropdown-menu[hidden] {
56
  display: none !important;
57
}
58

59
.theme-dropdown-menu li {
60
  align-items: center;
61
  color: var(--sl-color-text);
62
  display: flex;
63
  font-size: var(--sl-text-sm);
64
  gap: 0.5rem;
65
  padding: 0.5rem 0.75rem;
66
  cursor: pointer;
67
  border-bottom: 1px solid var(--sl-color-gray-5);
68
  transition: background 0.1s, color 0.1s;
69
  white-space: nowrap;
70
  list-style: none;
71
  margin: 0;
72
}
73

74
.theme-dropdown-menu li .theme-dropdown-colors {
75
  display: none;
76
}
77

78
.theme-dropdown-menu li:last-child {
79
  border-bottom: none;
80
}
81

82
.theme-dropdown-menu li:hover,
83
.theme-dropdown-menu li:focus-visible {
84
  background: var(--sl-color-gray-6);
85
  color: var(--sl-color-white);
86
  outline: none;
87
}
88

89
.theme-dropdown-menu li[aria-selected='true'] {
90
  color: var(--sl-color-white);
91
  box-shadow: inset 0 0 0 1px var(--sl-color-accent);
92
}
93

94
/* Color dots */
95
.theme-dropdown-colors {
96
  display: inline-flex;
97
  align-items: center;
98
  gap: 3px;
99
}
100

101
.theme-dropdown-colors .color {
102
  width: 8px;
103
  height: 8px;
104
  border-radius: 50%;
105
  border: 1px solid var(--sl-color-gray-4);
106
}

Light and dark modes

Each theme comes with three modes:

Light mode
Dark mode
Auto mode

When using the Theme API, you can configure the color scheme using setColorScheme() with 'light', 'dark', or 'auto' values. The 'auto' option allows programmatic control over light/dark switching based on your application’s logic.

When using CSS files, color scheme switching is controlled through CSS class names. Use ht-theme-{name} for light mode, ht-theme-{name}-dark for dark mode, or ht-theme-{name}-dark-auto for automatic switching based on system preferences (e.g., ht-theme-main, ht-theme-main-dark, ht-theme-main-dark-auto).

Available Theme API parameters

When registering a theme with registerTheme() or updating it using the params() method, you can configure the following keys:

Key	Description
`name`	Theme name string (can only be set during `registerTheme()`, cannot be updated via `params()`)
`sizing`	Size scale values (`size_0` through `size_10`)
`density`	Density type (`'default'`, `'compact'`, `'comfortable'`) or density configuration object
`icons`	SVG icon definitions
`colors`	Color palette with nested color values
`tokens`	Design tokens for visual properties
`colorScheme`	Color scheme (`'light'`, `'dark'`, or `'auto'`)

Token value references

Token values support a powerful reference system using dot notation. Instead of hardcoding values, you can reference values from other configuration namespaces:

Reference pattern	Example	Description
Direct value	`'14px'`	Use a literal CSS value
`tokens.*`	`'tokens.foregroundColor'`	Reference another token value
`sizing.*`	`'sizing.size_4'`	Reference a sizing scale value
`colors.*`	`'colors.primary.500'`	Reference a color from the palette
`density.*`	`'density.gap'`	Reference a density-specific value

Sizing references

The sizing scale provides consistent spacing values:

1
myTheme.params({
2
  tokens: {
3
    iconSize: 'sizing.size_5',             // References e.g. 20px
4
    wrapperBorderRadius: 'sizing.size_2',  // References e.g. 8px
5
  },
6
});

Color references

Colors use a hierarchical structure with dot notation for nested values:

1
myTheme.params({
2
  tokens: {
3
    accentColor: 'colors.primary.500',      // References primary color
4
    borderColor: 'colors.palette.200',      // References palette color
5
    backgroundColor: 'colors.white',        // References base white color
6
  },
7
});

Density references

Density values adjust spacing based on the selected density type:

1
myTheme.params({
2
  tokens: {
3
    cellHorizontalPadding: 'density.cellHorizontal',
4
    buttonVerticalPadding: 'density.buttonVertical',
5
    gapSize: 'density.gap',
6
  },
7
});

Token cross-references

Tokens can reference other tokens for consistent styling:

1
myTheme.params({
2
  tokens: {
3
    barForegroundColor: 'tokens.foregroundColor',
4
    cellEditorBackgroundColor: 'tokens.backgroundColor',
5
  },
6
});

Light and dark mode values

For tokens that should have different values in light and dark modes, use an array with two values where the first value is for light mode and the second is for dark mode:

1
myTheme.params({
2
  tokens: {
3
    // [lightModeValue, darkModeValue]
4
    borderColor: ['colors.palette.100', 'colors.palette.700'],
5
    foregroundColor: ['colors.palette.800', 'colors.palette.200'],
6
    backgroundColor: ['colors.white', 'colors.palette.950'],
7
  },
8
});

Available CSS files

Handsontable provides CSS files needed to style your data grid. Here’s an overview of what’s available:

Base CSS file

handsontable.css / handsontable.min.css - The base stylesheet containing all structural styles, layout rules, and core functionality. This file is auto-injected by default. You can inject it manually instead, but you must set injectCoreCss to false first. It includes border styles, cell rendering rules, and other fundamental grid components.

Theme files

All themes are available in two variants:

ht-theme-{name}.css / ht-theme-{name}.min.css - Complete theme with icons included (where {name} is main, horizon, or classic).
ht-theme-{name}-no-icons.css / ht-theme-{name}-no-icons.min.css - Theme without icon styles.

Icon files

If you’re using a theme without icons (*-no-icons.css), you can optionally load separate icon files:

ht-icons-{name}.css / ht-icons-{name}.min.css - Icon styles for the theme (where {name} is main or horizon).

Recommended usage

For production, use the minified versions (.min.css) to reduce file size and improve load times. For development, you may prefer the unminified versions (.css) for easier debugging.

Use a theme

There are two ways to apply a theme. The recommended approach is to use the Theme API with a theme object, which provides full access to runtime configuration features like density modes and color schemes.

Option 1: Using the Theme API (recommended)

The Theme API allows you to import and register themes programmatically. This approach provides runtime access to theme customization features.

Import a theme

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { mainTheme, registerTheme } from 'handsontable/themes';
3

4
function App() {
5
  return (
6
    <HotTable
7
      theme={mainTheme}
8
      // ... other options
9
    />
10
  );
11
}

Configure the theme

You can configure the theme before creating the instance using the builder pattern:

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { mainTheme, registerTheme } from 'handsontable/themes';
3

4
const theme = registerTheme(mainTheme)
5
  .setColorScheme('auto')
6
  .setDensityType('comfortable');
7

8
function App() {
9
  return (
10
    <HotTable
11
      theme={theme}
12
      // ... other options
13
    />
14
  );
15
}

Option 2: Using CSS files

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

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.
```
1
// ESM (ECMAScript modules)
2
import 'handsontable/styles/ht-theme-main.min.css';
3

4
// CommonJS
5
require('handsontable/styles/ht-theme-main.min.css');
```
Alternatively, you can import the necessary files from the recommended CDN such as JSDelivr or cdnjs.
```
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css" />
```
Pass a theme name

To use a theme, specify the theme name in the data grid’s global settings object:
```
1
<HotTable
2
  theme="ht-theme-main"
3
/>
```

The legacy theme

The legacy CSS file (handsontable.full.min.css) was the default styles up until version 15 (released in December 2024). These styles are legacy and are removed in version 17.0.0.

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
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

Handsontable 15.0.0: Introducing Themes and Functional React Wrapper

Handsontable 16.2.0: Simplified Theming and Advanced User Notifications

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support