1.0.3 • Published 1 year ago

react-jexcel v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

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>
    </>
  )
};

效果截图

npm.io

属性(Props)

属性名含义类型
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

方法(methods)

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

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

贡献者

sorryljt

欢迎大家提PR