
Handsontable 15.0.0:引入主题和功能性 React Wrapper
、
我们很高兴地宣布,Handsontable 15.0 是一个重大更新,在定制、性能和 React 集成方面都有显著改进。全新、强大的主题系统为您提供了自定义表格外观的充分灵活性,让您可以立即创建现代、时尚的设计。React 开发人员将受益于新的功能性 React 封装器,使 Handsontable 的集成比以往更加容易。此外,我们还对性能进行了优化,即使在处理大型数据集时也能提高速度和响应速度。
为确保顺利升级,我们准备了一份详细的迁移指南。如果您遇到任何问题,请随时在我们的 GitHub 问题板上报告错误,或联系我们的支持团队。
如何升级
- JavaScript npm install handsontable
- Functional wrapper for React npm install handsontable @handsontable/react-wrapper
- Class-based React npm install handsontable @handsontable/react
- Angular npm install handsontable @handsontable/angular
- Vue npm install handsontable @handsontable/vue3
- 从 NuGet下载
- 在 GitHub上查看和克隆
- 从公共 CDN 导入: jsDelivr, UNPKG
新主题系统
在 Handsontable 15.0 中,我们完全重新设计了 CSS,使您可以完全控制表格的外观。通过 180 多个 CSS 变量,您现在可以调整每个细节,以满足您的确切要求。如果您已经在使用 Handsontable,现有的 CSS 将作为经典主题在未来的版本中继续得到支持。
我们在文档中添加了一个新的主题页面,全面介绍了新系统,并向您展示了如何在项目中有效使用该系统。
随着新主题的推出,有一个重大变化需要注意。在更新的 CSS 设置中,你需要导入两个文件,而不是只有一个:核心样式表和主题样式表。具体操作如下:

// 导入基本样式
import "handsontable/styles/handsontable.min.css";
// 导入主题
import "handsontable/styles/ht-theme-main.min.css";
在本次更新中,我们将推出两个开箱即用的主题,您可以立即使用:
- 主要主题:受电子表格启发的设计,非常适合批量编辑任务和直观的数据输入。
- 地平线主题:简洁、极简的布局,专为数据显示和分析而设计,具有细微的行分隔符,以提高可读性。
这两个主题都带有明暗模式,并可以自动调整到首选的配色方案。

主要主题:灯光模式

主要主题:暗黑模式

地平线主题:灯光模式

地平线主题:暗黑模式
查看 Handsontable 文档中的演示,尝试新的主题并查看它们的实际效果。
新功能 React Wrapper
我们很高兴推出新的@handsontable/react-wrapper,旨在简化将 Handsontable 集成到您的功能性 React 项目中的过程。
您会喜欢它的原因如下:
- React hooks 支持:使用 React hooks 轻松管理 Handsontable 的状态和交互。
- 改进的性能:更少的重新渲染和更轻量的实现意味着优化的性能,即使对于大型数据集也是如此。
- 面向未来:采用最新的 React 最佳实践构建,确保与未来更新的兼容性。
这种方法减少了样板代码并与 React 的声明式风格完美契合,使您的项目更易于维护。
合并单元格的行和列虚拟化
现在,处理包含合并单元格的大型数据集将更加顺畅。在此版本中,我们为合并单元格引入了虚拟化功能,使您可以处理包含跨越数千行和列的合并单元格的表格,而不会降低性能。
依赖关系更新
我们更新了多个依赖项,以提高性能和安全性:
- 替换了 pikaday:我们用内部维护的 @handsontable/pikaday 替换了 pikaday。
- DOMpurify 更新:我们通过更新到最新版本的 dompurify 解决了最近的安全问题。
- Numbro 更新
为什么要升级?
Handsontable 15.0 为每个人带来了一系列令人兴奋的新功能。升级后可利用现代主题,通过明暗模式轻松定制数据网格,打造时尚、专业的设计。新的功能性 React 封装器简化了工作流程并提高了性能。合并单元格虚拟化增强了处理大型数据集的能力,使其更快更流畅。此外,更新的依赖项通过解决漏洞问题提高了安全性和可靠性。
发布说明
新增
- 增加了对合并单元格的行和列虚拟化的支持。#11162
- 增加了语言文件缺少的类型。#11236
- 增加了对新主题的支持,包括 main 和 horizo??n。#11144
- React:将 @handsontable/react-wrapper 添加到 monorepo。#11212
改进
- 重大变化:更新了生产依赖项(用 @handsontable/pikaday 替换了 pikaday,更新了 numbro 和 dompurify)#10929
- 重构了列拉伸逻辑,将其移至单独的插件并修复了与列宽度错位相关的错误。#11210
- 更新了下拉菜单和上下文菜单选项的输入。#11237
- 更新了 monorepo 以利用 Node 22。#11265
删除
- 重大变化:从上下文菜单的对齐子菜单中删除了复选标记。#11278
- 从 TextEditor 和 PasswordEditor 的 TEXTAREA 元素中删除了 aria-hidden。#11218
修复
- 修复了自动完成和下拉编辑器的容器大小计算。#11201
- 修复了 updateSettings 调用后下拉菜单的焦点管理。#11205
- 修复了在启用嵌套标题插件的情况下移动列时列选择中断的问题。#11206
- 修复了启用快速 IME 编辑选项时复制值的问题。#11243
- 修复了在 package.json 中导出通用库的问题。#11247
- 修复了合并单元格中的复选框切换问题。#11252
- 为 Focus Catcher 添加了缺少的“name”属性。#11256
- 修复了复选框类型单元格的数据删除问题。#11263
- 修复了嵌套标题的水平滚动问题。#11269
- 修复了过滤器的下拉容器与下拉内容大小不匹配的问题。 #11273
- 修复了隐藏已选列时抛出的错误。#11277
- 修复了显示注释时单元格快速编辑模式无法正常工作的问题。#11280
- 修复了当键设置为未定义时触发键盘事件的错误。#11281
- 修复了密码输入单元格的输入宽度计算。#11283
- 修复了 setDataAtCell 方法缺少源参数的问题。#11287
- 修复了顶部覆盖错位问题,垂直滚动条消失后可见。#11289
如果您在更新过程中遇到问题,请使用以下支持渠道之一:
- 在开发者论坛上发起讨论
- 在 Stack Overflow 上提问
- 在 GitHub 讨论中报告问题