介绍

今天给大家介绍一个功能强大的、类似 Excel 的数据表格库，支持丰富的展现和交互，以及多样的单元格展现和配置，简单的来讲就是一套在线excel表格。

Handsontable 是一个强大的开源工具，提供丰富的功能，使得在网页上处理和展示数据变得简单而高效，在项目中引入 Handsontable ，可以实现类似于 Excel 的在线功能，受到众多开发者及大公司的追捧，GitHub上更是有 19.2k star。

使用

在项目中引入 Handsontable 的 CSS 和 JS 文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@8.4.0/dist/handsontable.full.min.js"></script>

创建基本的 Handsontable 实例

要创建一个基本的 Handsontable 实例，你需要准备一个 HTML 元素作为容器，并使用 Handsontable 的构造函数初始化它。

❝

实战：创建了一个包含 3 行 3 列数据的 Handsontable 实例，并启用了行头、列头、筛选器和下拉菜单等功能

❞

<div id="example"></div>

// 获取容器元素
var container = document.getElementById('example');

// 初始化 Handsontable 实例
var hot = new Handsontable(container, {
  data: [
    ['A1', 'B1', 'C1'],
    ['A2', 'B2', 'C2'],
    ['A3', 'B3', 'C3']
  ],
  rowHeaders: true,
  colHeaders: true,
  filters: true,
  dropdownMenu: true
});

以上几行代码，我们就实现了一个包含 3 行 3 列数据的 Handsontable 实例，并启用了行头、列头、筛选器和下拉菜单功能。

怎么样？用法非常简单！实际上，Handsontable 包含的功能非常多，以上代码只是一个最基础的功能。

核心实现：

• 「强大的数据处理能力：」 支持各种数据类型，包括数字、字符串、日期、时间、布尔值等，并提供丰富的 data manipulation API。
• 「丰富的交互功能：」 支持单元格编辑、筛选、排序、拖拽、复制粘贴等操作，并提供各种自定义事件和回调函数。
• 「灵活的定制性：」 支持自定义列头、行号、单元格格式、菜单等，并提供大量的插件扩展功能。

项目展示

按值过滤

多层级树形结构数据操作及展示

表格数据编辑

数据排序

基本实现了Excel的大部分功能，这个组件对于开发OA系统、财务及物资管理等系统来讲，可以说必不可少，目前亚马逊、因特、索尼等公司都在使用该组件。

如果你也有在线处理数据的需求，不妨试试 Handsontable

开源地址

https://github.com/handsontable/handsontable