Released: Mar 9, 2026
17.0.0 での更新項目
機能
Native support for MultiSelect Cell Type
- The new MultiSelect cell type is designed for scenarios where a single field needs to store multiple values. Now you can select any number of options within the same cell from the dropdown menu that supports search, filtering, and full keyboard navigation.
- Once selected, values are stored directly in the table's source data as an array, keeping the data model clean.
- Each selected item is rendered inside the cell as a removable chip, making it easy to review or adjust selections made.
- The multiSelect cell type offers a flexible set of options so you can adjust both its behavior and presentation:
- allowEmpty: Defines whether an empty selection is considered valid (enabled by default).
- placeholder: Shows informative text in the cell when no values are selected.
- visibleRows: Sets how many options are visible at once in the dropdown list.
- maxSelections: Restricts the number of items a user can choose.
- sourceSortFunction: Applies custom logic to control how options are ordered.
- enterCommits: Specifies whether pressing Enter finalizes the selection and closes the editor.
- searchInput: Enables or disables the built-in search field within the dropdown.
- filteringCaseSensitive: Determines whether the search function distinguishes between uppercase and lowercase characters.
Simpler Definition for Custom Cell
- Previously, building a custom editor often meant extending base classes, understanding the full editor lifecycle, and writing repetitive setup code. With the new rendererFactory and editorFactory helpers, you start with a small, working cell definition and extend it only where needed. The factory automatically manages container creation, positioning over the active cell, lifecycle methods (init, beforeOpen, afterOpen, afterClose), and keyboard shortcut handling.
New Themes API: Flexible and Design Systems Friendly Foundation
- This release introduces a new Themes API that makes styling your table more structured, flexible, and aligned with modern design systems. The new theme architecture is built around four core elements: Token Mapping, Icons, Colors and Light/Dark Mode. Instead of relying on scattered CSS overrides, themes now use a consistent token model with scalable color palettes (100-900, similar to Tailwind or Material Design) and size tokens based on an 8px grid system (size-1 = 8px, size-2 = 16px, etc.). This color and sizing model now makes it much easier to connect Handsontable with existing design systems.
- A new Density feature lets you switch between compact, default, and comfortable spacing modes, helping you adapt the table to different UX needs without rewriting styles. Styling can still be customized through CSS variables, but now also via a Token API in JavaScript, enabling runtime adjustments and better flexibility.
- This release also focused on simplifying theme setup. The Main theme is now applied automatically, so there's no need to manually declare a theme or import separate CSS files. In previous versions, you had to include handsontable.js, handsontable.css, and a separate theme stylesheet, but now you only need handsontable.js to get started, reducing setup steps and making integration cleaner.
Theme Builder Updates
- Alongside the Themes API improvements, the Theme Builder has been updated to align with the new token structure. It now features a redesigned interface that is cleaner and more intuitive to navigate. With clear token descriptions, per-token reset options, and real-time previews, it's easier to understand how each change impacts the table design and make full use of Theme Builder capabilities.
Dependency Reduction
- Version 17.0.0 focuses on reducing external dependencies to optimize bundle size, improve loading performance, and give you more control over the runtime environment.
- Numeric Formatting - Numeric cells now use the native Intl.NumberFormat API. The previous pattern and culture options based on numbro.js are deprecated in 17.0.0 and will be removed in the next major release.
- Date and Time Formatting - Date and time cells now use intl-date and intl-time, powered by Intl.DateTimeFormat. String-based Moment.js formats are deprecated and scheduled for removal in the next major version. This change improves performance and aligns formatting with modern, locale-aware APIs.
- Built-in HyperFormula - The built-in HyperFormula engine used by the Formulas plugin is deprecated in 17.0.0 and will be removed from package.json in version 18.0. Handsontable will no longer bundle HyperFormula by default. If you use the Formulas plugin, you should install HyperFormula directly in your project and pass it to the plugin configuration (with licenseKey: 'internal-use-in-handsontable'). This change reduces the default package size and gives you control over the formula engine version used in your application.
- HTML Sanitization - Introduced a new sanitizer option that lets you define your own HTML sanitization logic. DOMPurify is still used by default in 17.0.0 (with a deprecation warning), but it will be removed in the next major release.
- Polyfills - In 17.0, Handsontable no longer includes core-js, which previously provided polyfills for older JavaScript features. Handsontable now targets modern JavaScript environments. If you need to support older browsers, you can add the required polyfills in your own application setup, based on your specific compatibility requirements.