【React】类excel表格的开源项目handsontable

前言

• 最近在浏览时发现了一个开源项目handsontable，功能相当强大。
• 虽然handsontable是dom做的，但是不妨碍其类似于canvas那种excel的操作手感。

官网

• https://handsontable.com/docs/

安装

npm install handsontable @handsontable/react
1

基础demo

import Handsontable from "handsontable";
import { HotTable, HotColumn } from "@handsontable/react";
import "handsontable/dist/handsontable.min.css";

const hotData = Handsontable.helper.createSpreadsheetData(10, 5);
const secondColumnSettings = {
	title: "Second column header",
	readOnly: true,
};

const App = () => {
	return (
		<HotTable data={hotData} licenseKey="non-commercial-and-evaluation">
			<HotColumn title="First column header" />
			<HotColumn settings={secondColumnSettings} />
		</HotTable>
	);
};
export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

column相关

基础column

• 基础不用说了，主要就是传title改变列名。另外还会有个colHeaders支持动态传递。
• 值得注意的就是这个colHeaders可以传dom但是是字符串拼的，这样可以简单支持自定义样式，见该示例：https://jsfiddle.net/handsoncode/0gfjkesd

嵌套表头

• 嵌套表头也比较常见，使用nestedHeaders制作：

<HotTable
			data={hotData}
			language={zhCN.languageCode}
			licenseKey="non-commercial-and-evaluation"
			nestedHeaders={[
				["A", { label: "B", colspan: 8 }, "C"],
				[
					"D",
					{ label: "E", colspan: 4 },
					{ label: "F", colspan: 4 },
					"G",
				],
				[
					"H",
					{ label: "I", colspan: 2 },
					{ label: "J", colspan: 2 },
					{ label: "K", colspan: 2 },
					{ label: "L", colspan: 2 },
					"M",
				],
				["N", "O", "P", "Q", "R", "S", "T", "U", "V", "W"],
			]}
		></HotTable>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

列拖拽移动

• 该表格自带列拖拽移动只要加上manualColumnMove属性即可。不像别的表单需要结合react-dnd之类自己实现。

列下拉菜单

• 类似excel的对齐筛选等菜单，配置dropdownMenu即可开启。
• 更多配置可以通过传递对象：

  dropdownMenu: [
    'remove_col',
    '---------',
    'make_read_only',
    '---------',
    'alignment'
  ]
1
2
3
4
5
6
7

列过滤

• 类似excel的自带过滤，配置filters即可加载与dropmenu下。

锁列

• 左侧锁列配置 fixedColumnsStart={1}表示第一列冻结。

row相关

基础row

• 使用bindRowsWithHeaders将行标题改成序号。

树状

• 树状也是配置个nestedRows: true,在数据源格式传递树状结构即可。
• 文档定位：https://handsontable.com/docs/row-parent-child/#overview

内置单元格模块

• 文档定位：https://handsontable.com/docs/modules/#overview
• 其内置了很多单元格模块，需要先注册，在对单元格type进行设定即可使用：

import {
  registerCellType, // cell types' registering function
  AutocompleteCellType,
  CheckboxCellType,
  DateCellType,
  DropdownCellType,
  HandsontableCellType,
  NumericCellType,
  PasswordCellType,
  TextCellType,
  TimeCellType,
} from 'handsontable/cellTypes';
1
2
3
4
5
6
7
8
9
10
11
12

• 比如注册了NumericCellType则在column设置type即可。

	<HotColumn
				settings={{
					title: "jjjj",
					type: "numeric",
				}}
			/>
1
2
3
4
5
6

• 单元格模块内置了很多校验等规则，相当于对cell的封装。

国际化

• 文档定位：https://handsontable.com/docs/language/#about-language-settings
• 从i18n包里可以捞到汉化包，注册进入并使用即可：

import { registerLanguageDictionary, zhCN } from "handsontable/i18n"

registerLanguageDictionary(zhCN);
1
2
3

• 使用：

<HotTable
			data={hotData}
			language={zhCN.languageCode}
			licenseKey="non-commercial-and-evaluation"
		>
1
2
3
4
5

licence

• 感觉这个比较可惜，个人项目科研等免费用，其他需要交钱。