# Sou React Table
[![npm version](https://badge.fury.io/js/sou-react-table.svg)](https://badge.fury.io/js/sou-react-table)
A spreadsheet component for React ([Demo](https://miadwang.github.io/sou-react-table/))
![SouTable](./screenshot.png?raw=true "SouTable")
## 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
- Horizontal / vertical scrolling with sticky headers
- Styling cell width / height
## 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. You can style it by importing your own css file.
```js
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'],
]}
width={600}
height={600}
minTableCol={10}
minTableRow={21}
minCellWidth={50}
cellHeight={28}
getData={function(data) {
console.log(data);
}}
/>
```
### `tableData`
type: `array` of `arrays`
default value:
```js
[
['City', 'Beijing', 'Shanghai', 'Guangzhou'],
['Temperature', '5', '22', '29'],
['Weather', 'Windy', 'Sunny', 'Rainy'],
]
```
Each column of the table data should be put into a child array.
`tableData` can be an empty `array`.
### `width`
type: `number`
Default value: auto
The width of the table in px.
### `height`
type: `number`
Default value: auto
The height of the table in px.
**Note: Setting width and height will make the table scroll with sticky headers.**
### `minTableCol`
type: `number`
Default value: 10
The minimum number of columns of the table.
### `minTableRow`
type: `number`
Default value: 21
The minimum number of rows of the table.
### `minCellwidth`
type: `number`
Default value: 50
The minimum width of the cell in px.
### `cellHeight`
type: `number`
Default value: 28
The height of the cell in px.
### `getData`
type: `function`
default value:
```js
function getData(data) {
console.log(data);
}
```
Callback function `getData` is executed when table data changes. The changed table data will be passed as the parameter.
## Browser Compatibility
Only **Chrome** at present.
## Contributing
Welcome all contributions. You can submit any ideas as [pull requests](https://github.com/miadwang/sou-react-table/pulls) or as [GitHub issues](https://github.com/miadwang/sou-react-table/issues).
## License
Copyright (c) 2017 Mia Wang. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
没有合适的资源?快使用搜索试试~ 我知道了~
react-React的电子表格组件
共19个文件
js:7个
md:3个
json:2个
需积分: 48 5 下载量 116 浏览量
2019-08-15
02:12:36
上传
评论 1
收藏 203KB ZIP 举报
温馨提示
React的电子表格组件
资源推荐
资源详情
资源评论
收起资源包目录
react-React的电子表格组件.zip (19个子文件)
sou-react-table-master
.eslintrc 549B
stories
index.stories.js 520B
src
SouTable.jsx 46KB
index.js 61B
.npmignore 89B
.storybook
config.js 278B
addons.js 86B
CONTRIBUTING.md 396B
LICENSE 1KB
screenshot.png 114KB
README.md 3KB
dist
SouTable.js 60KB
index.js 329B
.gitignore 25B
.babelrc.js 115B
CHANGELOG.md 611B
package-lock.json 359KB
SouTable.css 4KB
package.json 2KB
共 19 条
- 1
资源评论
weixin_39841848
- 粉丝: 509
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功