SpreadJS React Plugin

基于 SpreadJS 和 Ant Design 的 React 表格插件。

功能特点

• 基于 SpreadJS 的强大表格功能
• 集成 Ant Design 组件库
• TypeScript 支持
• 易于集成和使用

安装

npm install @anotherlover/dtc-func-plugin

安装必须的依赖

npm install @grapecity/spread-sheets @grapecity/spread-sheets-react antd

使用

import React from 'react';
import SpreadSheet from '@anotherlover/dtc-func-plugin';

const App = () => {
  const handleChange = (data) => {
    console.log('表格数据变化:', data);
  };

  const handleCellClick = (row, col, value) => {
    console.log(`点击单元格: 行${row}, 列${col}, 值${value}`);
  };

  return (
    <SpreadSheet 
      data={[["姓名", "年龄"], ["张三", 25]]}
      readOnly={false}
      onChange={handleChange}
      onCellClick={handleCellClick}
    />
  );
};

export default App;

API

Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | width | 表格宽度 | string | number | '100%' | | height | 表格高度 | string | number | '600px' | | data | 表格数据 | any[][] | [] | | readOnly | 是否只读 | boolean | false | | showGrid | 是否显示网格线 | boolean | true | | showHeader | 是否显示表头 | boolean | true | | theme | 主题 | 'light' | 'dark' | 'light' | | allowSort | 是否允许排序 | boolean | true | | allowFilter | 是否允许筛选 | boolean | true | | allowResize | 是否允许调整大小 | boolean | true |

事件

| 事件名 | 说明 | 参数 | | --- | --- | --- | | onChange | 数据变化时的回调 | (data: any[][]) => void | | onSelectionChange | 选择范围变化时的回调 | (range: { row: number; col: number; rowCount: number; colCount: number }) => void | | onCellClick | 单元格点击时的回调 | (row: number, col: number, value: any) => void |

示例

只读模式

<SpreadSheet 
  data={[["姓名", "年龄"], ["张三", 25]]}
  readOnly={true}
/>

自定义样式

<SpreadSheet 
  width={800}
  height={400}
  showGrid={false}
  theme="dark"
/>

监听事件

<SpreadSheet 
  onChange={(data) => console.log('数据变化:', data)}
  onSelectionChange={(range) => console.log('选择范围:', range)}
  onCellClick={(row, col, value) => console.log('点击单元格:', row, col, value)}
/>