sou-react-table, 用于响应的电子表格组件

分享于 

4分钟阅读

GitHub

  繁體 雙語
A spreadsheet component for React
  • 源代码名称:sou-react-table
  • 源代码网址:http://www.github.com/miadwang/sou-react-table
  • sou-react-table源代码文档
  • sou-react-table源代码下载
  • Git URL:
    git://www.github.com/miadwang/sou-react-table.git
    Git Clone代码到本地:
    git clone http://www.github.com/miadwang/sou-react-table
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/miadwang/sou-react-table
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    React

    npm version

    用于响应的电子表格组件( 演示插件)

    SouTable

    特性

    • 表格单元格编辑
    • 从 table 编辑应用程序的数据 比如
    • 多单元格 selecting/copying/cutting/pasting
    • 箭头键选择
    • 通过拖动自动填充
    • 行/列插入/删除
    • 对z/z的数据排序
    • 行列切换
    • 水平/垂直滚动,带有粘滞头
    • 设置单元格宽度/高度样式

    安装

    软件包可以通过NPM安装:

    
    npm install sou-react-table --save
    
    
    
    

    你将需要分别安装React和 ReactDOM,因为它们不包含在包中。

    用法

    SouTable 可以用作 below。 你可以通过导入自己的css文件来对它进行样式化。

    importSouTablefrom'sou-react-table';import'sou-react-table/SouTable.css';<SouTable
     tableData={[
     [ 'City', 'Beijing', 'Shanghai', 'Guangzhou' ],
     [ 'Temperature', '5', '22', '29' ],
     [ 'Weather', 'Windy', 'Sunny', 'Rainy' ],
     ]}
     width={600}
     height={600}
     minTableCol={10}
     minTableRow={21}
     minCellWidth={50}
     cellHeight={28}
     getData={functiongetData(data) {
     console.log(data);
     }}/>

    tableData

    类型:arraysarray

    默认值:

    [
     [ 'City', 'Beijing', 'Shanghai', 'Guangzhou' ],
     [ 'Temperature', '5', '22', '29' ],
     [ 'Weather', 'Windy', 'Sunny', 'Rainy' ],
    ]

    table 数据的每一列都应该放入子 array 中。 tableData 可以是空的array

    width

    类型:number

    默认值:自动

    x 中的table的宽度。

    height

    类型:number

    默认值:自动

    x 中的table的高度。

    注意:设置宽度和高度将使滚动的头部有粘性头。

    minTableCol

    类型:number

    默认值:10

    表的最小列数。

    minTableRow

    类型:number

    默认值:21

    表的最小行数。

    minCellwidth

    类型:number

    默认值:50

    x 中单元格的最小宽度。

    cellHeight

    类型:number

    默认值:28

    x 中单元格的高度。

    getData

    类型:function

    默认值:

    functiongetData(data) {
     console.log(data);
    }

    当 table 数据更改时执行回调函数 getData。 更改的table 数据将作为参数传递。

    浏览器兼容性

    目前只有 Chrome

    欢迎所有捐赠。你可以提交任何想法作为拉请求,或者作为GitHub问题的解决。

    许可证

    版权所有( c ) 2017 Mia。 许可证许可,请参见许可证


    相关文章