re-slider-table
v1.0.2
Published
react slideable table component
Downloads
17
Readme
re-slider-table
a slideable table component base on swiper(https://github.com/nolimits4web/Swiper)
Install
npm install re-slider-table --save
Usage
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SliderTable from 're-slider-table';
class Basic extends Component {
render() {
const header = [{
key: 'c0',
value: 'c0',
}, {
key: 'c1',
value: 'c1',
}, {
key: 'c2',
value: 'c2',
}, {
key: 'c3',
value: 'c3',
}, {
key: 'c4',
value: 'c4',
}, {
key: 'c5',
value: 'c5',
}];
const data = [{ c0: 'c0', c1: 'c1', c2: 'c2', c3: 'c3', c4: 'c4', c5: 'c5' },
{ c0: 'c0', c1: 'c1', c2: 'c2', c3: 'c3', c4: 'c4', c5: 'c5' },
{ c0: 'c0', c1: 'c1', c2: 'c2', c3: 'c3', c4: 'c4', c5: 'c5' },
{ c0: 'c0', c1: 'c1', c2: 'c2', c3: 'c3', c4: 'c4', c5: 'c5' },
{ c0: 'c0', c1: 'c1', c2: 'c2', c3: 'c3', c4: 'c4', c5: 'c5' }];
return <SliderTable title="test" header={header} data={data} />;
}
}
ReactDOM.render(<Basic />, document.getElementById('root'));
API
| props | type | default | description | | ------------- | ----------------------------- | ------------ | ---------------- | | title | PropTypes.string.isRequired | | 表格标题 | header | PropTypes.array.isRequired | | 列表标题 | | data | ProTypes.array.isRequired | | 表格数据 | | headerWidth | PropTypes.string | 36% | 固定表头的宽度 | | baseClassName | PropTypes.string | slider-table | 组件类名 | | defaultValue | PropTypes.string | -- | 表格数据为空时默认显示的内容 | | columnNum | PropTypes.number | 2 | 每个一个滑片的列数 | | slideable | PropTypes.bool | false | 是否支持滑动 |
LICENSE
MIT