一款React版本的excel插件(react-jexcel)
背景介绍
在日常开发中,会遇到一些web端Excel报表的需求,或者,日常的一些Table
组件,从灵活性或性能上不能满足需求,这就需要一款轻量级的Excel组件,本组件在我闲暇之余完成,后续还会不断的完善和补充。
环境
- react >=16.8
地址
github: https://github.com/sorryljt/react-jexcel
npm: https://www.npmjs.com/package/react-jexcel
简介
基于jspreadsheet v4版本,封装的React 版本的轻量级Excel插件,开箱即用,配置简单,极大的方便了React开发着对于excel或者报表的使用需求,本插件将提供完善的demo和中文文档...
文档和demo将不断完善,欢迎大家PR
快速开始
安装
yarn add React-Jexcel
// or
npm instll React-Jexcel
在项目中使用
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 (
<>
<ReactJexcel
data={data}
rowResize={true}
ref={ref}
/>
<div>
<button onClick={addRow}>addRow</button>
</div>
</>
)
};
效果截图
属性(Props)
属性名 | 含义 | 类型 |
---|---|---|
data | 表格数据 | Array ,eg:[[1,2,3,4]] |
columns | 列信息 | 见下方列信息 |
rowResize | 是否可调整行高 | boolean |
rows | 初始列信息 | object eg:{3: {height: '300px'}},代表第3列300px高 |
minDimensions | 表格最小尺寸 | [cols, rows] |
allowExport | 是否允许导出 | boolean ,为true 时,ctrl +s 可导出 |
columnDrag | 是否允许列拖动 | boolean ,为true 时,可拖动列头交换列顺序 |
其他属性 | 待完善中文文档 | 可参照原本英文文档属性props |
方法(methods)
本组件支持ref
直接调用其方法,全部方法待完善中文文档,如需,可自行到官网查找,直接调用即可
方法名 | 作用 | 备注 |
---|---|---|
insertRow | 新增一行 | myTable.insertRow([mixed], [integer], [boolean]); |
deleteRow | 删除一行 | myTable.deleteRow([integer], [integer]); |
getData | 获取表格数据 | myTable.getData([bool]); |