react-jexcel

React-Jexcel

$3

基于jspreadsheet v4版本，封装的React 版本的轻量级Excel插件，开箱即用，配置简单，极大的方便了React开发着对于excel或者报表的使用需求，本插件将提供完善的demo和中文文档...

文档和demo将不断完善，欢迎大家PR👏

$3

#### 安装

``shell
yarn add React-Jexcel
// or
npm instll React-Jexcel
`

#### 在项目中使用

`tsx
import React, { useRef } from 'react';
import { ReactJexcel } from 'react-jexcel';

export default () => {
const ref = useRef(null)
const addRow = () => {
ref.current.jexcel.insertRow()
}
const data = [
['Mazda', 2001, 2000],
['Pegeout', 2010, 5000],
['Honda Fit', 2009, 3000],
['Honda CRV', 2010, 6000],
];
return (
<>
data={data}
rowResize={true}
ref={ref}
/>




)
};
`

#### 效果截图


$3

| 属性名 | 含义 | 类型 |
| ------------- | -------------- | ------------------------------------------------------------ |
| data | 表格数据 | Array,eg:[[1,2,3,4]] |
| columns | 列信息 | 见下方列信息 |
| rowResize | 是否可调整行高 | boolean |
| rows | 初始列信息 | objecteg:{3: {height: '300px'}},代表第3列300px高 |
| minDimensions | 表格最小尺寸 | [cols, rows] |
| allowExport | 是否允许导出 | boolean,为true时，ctrl + s可导出 |
| columnDrag | 是否允许列拖动 | boolean,为true时，可拖动列头交换列顺序 |
| 其他属性 | 待完善中文文档 | 可参照原本英文文档属性props |

$3

本组件支持ref直接调用其方法，全部方法待完善中文文档，如需，可自行到官网查找，直接调用即可

| 方法名 | 作用 | 备注 |
| --------- | ------------ | --------------------------------------------------- |
| insertRow | 新增一行 | myTable.insertRow([mixed], [integer], [boolean]); |
| deleteRow | 删除一行 | myTable.deleteRow([integer], [integer]);` |
| getData | 获取表格数据 | myTable.getData([bool]); |

$3

sorryljt

欢迎大家提PR