大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

前言

开始介绍Handsontable之前，先说一个在线表格编辑的研发案例。

一开始在做在线表格时，语雀团队采用的是“SpreadJs+二次开发”的模式，后来发现功能越来越难做，维护和开发成本上升。于是，2019年5月语雀团队弃用了SpreadJs，开始自研。所以，本文也不再聚焦SpreadJs（如果有兴趣可以阅读文末资料），而是向大家介绍另一个在线表格控件Handsontable。话不多说，直接开始。

1.Handsontable是什么？

Handsontable 是一个 JavaScript 组件，它将数据网格功能与类似电子表格的用户体验相结合。提供数据绑定、数据验证、过滤、排序和 CRUD 操作，可以在React、Angular、Vue等前端技术栈中使用。

数以千计的商业应用程序依靠 Handsontable 来输入、编辑、验证、清理来自远程源（例如数据库和 API）或来自 HTML 文档、Excel 文件、Google 表格和手动输入的数据。

从NPM的使用数据来看，最近周下载量也达到了124k左右，而且基本维持稳定。

2.Handsontable突出能力

2.1 提供所有电子表格功能

使用 Handsontable 就像使用 Excel 或 Google 表格一样，没有陡峭的学习曲线，从第一天开始就可以高效工作。

2.2 对开发人员友好的 API

Handsontable 易于实施、灵活且超级可定制。可以使用自定义插件扩展它并编辑源代码以将其设计为自有产品。此外，还提供全面的 API、有用的教程以及社区和商业支持。

2.3 性能保证

可以处理大量数据，而不必担心性能问题。各行各业的大公司和初创公司都使用 Handsontable 来构建应用程序。

3.Handsontable基础功能

多列排序
非连续选择
数据过滤
导出到文件
数据验证
条件格式
合并单元格
冻结行/列
移动行/列
调整行/列
隐藏行/列
上下文菜单
评论等

5.与React/Vue/Angular框架集成

5.1 React集成

创建一个容器

然后直接在项目代码中使用：

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';
const container = document.querySelector('#example');
// 获取容器
const hot = new Handsontable(container, {
    data: [['', 'Tesla', 'Volvo', 'Toyota', 'Ford'], ['2019', 10, 11, 12, 13], ['2020', 20, 11, 14, 13], ['2021', 30, 15, 12, 13]],
    rowHeaders: true,
    colHeaders: true,
    licenseKey: 'non-commercial-and-evaluation' 
  // 仅供非商业用途
});

5.2 Vue集成

5.3 Angular集成

/* file: app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
      
          
          
          
      
    
  `,
})
export class AppComponent {
  dataset: any[] = [
    {id: 1, name: 'Ted Right', address: 'Wall Street'},
    {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
    {id: 3, name: 'Joan Well', address: 'Broadway'},
    {id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
    {id: 5, name: 'Michael Fair', address: 'Lombard Street'},
    {id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
    {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
    {id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
  ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HotTableModule } from '@handsontable/angular';
import { registerAllModules } from 'handsontable/registry';
import { AppComponent } from './app.component';
// register Handsontable's modules
registerAllModules();

@NgModule({
  imports: [ BrowserModule, HotTableModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

6.本文总结

本文主要和大家介绍一个优秀的在线表格控件Handsontable。因为笔者也没有在生产项目中使用、部署过Handsontable，所以只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么好的在线表格解决方案，还原在评论区留言。

参考资料

https://github.com/handsontable/handsontable

https://handsontable.com/

https://juejin.cn/post/6980236406597779463

https://www.grapecity.com.cn/developer/spreadjs