Handsontable 18.0.0

Handsontable 18.0.0

Handsontable 的核心代码已完全用 TypeScript 重写，提高了整个代码库的长期稳定性和可维护性。发布日期：2026年6月30日

18.0.0 版本更新

特征

一个用 TypeScript 重写的核心。

  • Handsontable 的整个核心代码已从 JavaScript 重写为 TypeScript。这是一项旨在提升稳定性和开发者体验的长期投资，几乎涉及代码库的每个部分。
  • 此次重写带来了严格模式兼容性、类型感知 lint 规则，以及对内置渲染器、编辑器和验证器的更强类型定义——传递给它们的单元格属性现在使用规范的 CellProperties 接口，而不是松散的记录类型。此外，它还将渲染引擎 Walkontable 集成到主类型检查程序中，并将其作为未知逃生舱的类型转换减少了约 85%。
  • 对于所有使用该软件包的用户，之前导致 ESM 和 CJS 配置出现问题的类型声明错误和歧义问题现已修复。提供的 .d.ts 文件现在兼容 TypeScript 5.1 及更高版本，因此编辑器自动补全和类型检查功能应该可以开箱即用。
  • 由于这从根本上改变了源代码的编写和类型定义方式，因此属于破坏性变更。大多数应用程序不需要修改代码，但更严格的类型定义可能会暴露出以前隐藏的问题。

更快的渲染速度和显著降低的内存占用

  • Walkontable 现在直接渲染到 DOM，Handsoncode 也完全移除了旧的差异渲染器。这使得网格的内存占用减少了约 50%，降低了滚动时的内存使用量，并解决了处理超大型数据集时可能出现的内存溢出错误。此外，它不再在加载时立即获取整个网格的单元格元数据，而是在实际使用单元格时才进行延迟计算。对于大型数据集，这种改进效果显著：在一个 100,000 x 100 的网格上，内存占用减少了约 90%，初始渲染速度提高了约 30 倍。
  • 使用 setCellMeta 命令（例如 readOnly）设置的单元格元数据不再会被 updateSettings 重置。
  • 在 cells 函数和自定义渲染器中更快地重复调用 getSourceData()，缓存叠加对齐计算，以及在搜索、筛选、排序、自动完成和复选框渲染中更快地进行本地化感知文本比较。

新的布局系统

  • Handsontable 18.0.0 引入了一个新的布局选项，允许您控制网格周围渲染的 UI 元素的顺序，例如分页和对话框。
  • 为了实现这一点，内置 UI 现在挂载到专用包装容器中，而不是临时注入，这改变了根 DOM 结构——如果您使用自定义 CSS 或脚本来定位 Handsontable 的标记，则需要注意此重大更改。
  • 许可证通知始终显示在底部区域的最后一位，并且不可排序，通知插件现在将其提示信息渲染在网格的覆盖层中，以实现更可靠的定位。

更小、无依赖项的捆绑包

  • 移除了四个运行时依赖项——numbro、moment.js、DOMPurify 和 handsontable/pikaday——转而使用更轻量级的内置实现。这精简了软件包，并减少了传递安全性和维护问题的可能性。对于任何通过 Handsontable 间接依赖这些依赖项的用户来说，移除这些依赖项都是一项重大变更。
  • 已停用部分长期弃用的API：
    • PersistentState 插件、其 persistentState 选项及其相关钩子已被移除。
    • 核心级别的撤销/重做方法（hot.undo()、hot.redo() 等）已被移除。请改用 hot.getPlugin('undoRedo')。

一个现代化的 Angular 封装器

  • Angular 封装器已进行现代化改造，以与当前的 Angular 版本保持一致。

新的配置选项

  • 此次版本更新增加了一些配置网格的新方法：
    • 密码单元格类型的 hashRevealDelay 会在输入每个字符时短暂显示该字符，然后再将其屏蔽。
    • visibleWhen 可设置嵌套标题（“折叠”、“展开”或“始终”），允许您选择可折叠组中的哪些列在每种状态下保持可见。
    • 公共类型（例如 CellMeta、CellProperties、ColumnSettings 和 GridSettings）现在已从 handsontable 和 handsontable/base 重新导出为命名的顶级导入，因此您不再需要深入内部路径来编写代码。

主题变更

  • 简化了与边框相关的主题变量。`--ht-wrapper-border-radius` 变量已重命名为 `--ht-border-radius`，而 `--ht-wrapper-border-width` 和 `--ht-wrapper-border-color` 变量已被移除。如果您在自定义主题中引用了这些变量，则在升级时需要更新它们。

交互改进

  • 一些改动让日常交互体验更接近桌面电子表格。现在，将选区拖动到视口边缘之外时，网格会滚动并将选区扩展到新显示的单元格；自动填充选区的方向现在与拖动方向一致，这与 Google Sheets 和 Excel 的行为方式相同。

文档：新增指南、配方和 Vue 部分

  • 此版本新增了主要变更的文档。布局插槽是新布局系统的对应部分，展示了如何在网格周围的包装插槽中放置自定义 UI，并控制每个插槽中元素的顺序。TypeScript 类型文档完整收录了 Handsontable 现在导出的类型和接口，并提供了设置、钩子回调、自定义渲染器和编辑器的使用示例。此外，新增的“从 17.1 迁移到 18.0”指南将逐步指导您如何移除 moment.js、Pikaday、numbro 和 DOMPurify 依赖项，并更新 TypeScript 导入。
  • Vue 3 现在与 React 和 Angular 并列，成为官方文档中的一流框架，拥有专属章节和全新示例。Vue 开发者可以获得专为 Vue 编写的官方指南，而无需再去修改原生 JavaScript 示例。