React開源：sou-react-table - React Excel 控件

DiegoKleibe 7年前發布 | 45K 次閱讀 React

Sou React Table

A spreadsheet component for React

Features

  • Table cell editing
  • Data pasting from table editing applications e.g. Numbers
  • Multi-cell selecting / copying / cutting / pasting
  • Arrow key selecting
  • Auto-filling via dragging
  • Row / column inserting / deleting
  • Data sorting A-Z / Z-A
  • Row-column switching

Installation

The package can be installed via NPM:

npm install sou-react-table --save

You’ll need to install React and ReactDOM separately since they are not included in the package.

Usage

SouTable can be used as below

import SouTable from 'sou-react-table';
import 'sou-react-table/SouTable.css';


<SouTable
  tableData = [
    { 'City', 'Beijing', 'Shanghai', 'Guangzhou' },
    { 'Temperature', '5', '22', '29' },
    { 'Weather', 'Windy', 'Sunny', 'Rainy' },
  ]
  minTableCol = 10
  minTableRow = 21
  getData = function getData(data) {
    console.log(data);
  }
/>
</code></pre> 
  
tableData
 
  
type: array of arrays
 
  
Each column of the table data should be put into a child array. tableData can be an empty array .
 
  
minTableCol
 
  
type: number
 
  
The minimum number of columns of the table.
 
  
minTableRow
 
  
type: number
 
  
The minimum number of rows of the table.
 
  
getData
 
  
type: function
 
  
Callback function getData is executed when table data changes. The changed table data will be passed as the parameter.
 
  
Contributing
 
  
Welcome all contributions. You can submit any ideas as pull requests or as GitHub issues .
 
  
License
 
  
Copyright (c) 2017 Mia Wang. Licensed under MIT license, seeLICENSE for the full license.
 
  
 
 
  
 
 
  
 
 本文由用戶 DiegoKleibe 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！