React中Handsontable汉化配置

Handsontable 是一款功能强大的 JS Excel 表格库，这里不再过多介绍，支持 Angular、Vue2/Vue3、React，具体详情可移步官网：https://handsontable.com/docs/react-data-grid/

React 中 Handsontable 使用方法：

• 安装

npm install handsontable @handsontable/react --save

• 引入

import React, { useState } from 'react';

// 引入 React 组件
import { HotTable } from '@handsontable/react';

// 菜单汉化配置注册
import { registerLanguageDictionary, zhCN } from 'handsontable/i18n';
registerLanguageDictionary(zhCN);

// 注册所有模块
import { registerAllModules } from 'handsontable/registry';
registerAllModules();

import type { PikadayOptions } from 'pikaday';

// 导入样式
import 'handsontable/dist/handsontable.full.min.css';

const Table: React.FC = () => {
	const [hotData, setHotData] = useState([['', '', '', '', '', '', '', '', '', '']]);
	const colHeaders = [
	    '表头 1',
	    '表头 2',
	    '表头 3',
	    '表头 4',
	    '表头 5',
	    '表头 6',
	    '表头 7',
	    '表头 8',
	    '表头 9',
	    '表头 10',
	];
	// 日期汉化配置
	const datePickerConfig: PikadayOptions = {
	    i18n: {
		      previousMonth: '上一月',
		      nextMonth: '下一月',
		      months: [
		        '一月',
		        '二月',
		        '三月',
		        '四月',
		        '五月',
		        '六月',
		        '七月',
		        '八月',
		        '九月',
		        '十月',
		        '十一月',
		        '十二月',
		      ],
		      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
		      weekdaysShort: ['日', '一', '二', '三', '四', '五', '六'],
		},
	};
	 
	return (
		<HotTable
			data={hotData}
        	colHeaders={colHeaders}
			rowHeaders={true}
			undo={true}
			width="100%"
	        height="500"
	        // 列宽度均分
	        stretchH="all"
	        minRows={1}
	        minCols={10}
	        // 内容居中显示
	        className="htCenter"
	        copyPaste={{
	          pasteMode: 'shift_down',
	        }}
	        contextMenu={true}
	        // 菜单汉化配置
	        language={zhCN.languageCode}
	        // 日期控件汉化配置
	        datePickerConfig={datePickerConfig}
        	licenseKey="**********"
		/>
	)
}
export default Table

效果图