1.0.2 • Published 7 years ago
re-slider-table v1.0.2
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