fast-table v1.4.7
React表格组件,支持多数据首次快速渲染
在线Demo
https://paul-long.github.io/react-components/
安装
npm install fast-table --save-dev
支持
- 多数据快速渲染,虚拟渲染
- 固定表头
- 固定列
- 表头排序
- 表头分组
- 树形数据展示
- 固定行至顶部或者底部
- 子表格订制
- 表头自由排序
API
Table Props
props | describe | type | default value |
---|---|---|---|
bordered | show bordered | Boolean | false |
bodyMaxHeight | body max height | Number or String | |
className | custom class | String | |
colMinWidth | min column width | Number | 100 |
columns | set table header | Array[] | - |
dataSource | data | Array[] | |
defaultShowCount | default show rows | Number | 30 |
emptyText | empty show | Function | () => '暂无数据' |
expandedRowByClick | on click row expanded | Boolean | true |
expandedRowKeys | expanded rows | String[] | |
expandedRowRender | expanded render | Function | |
fixedHeader | fixed header | Boolean | true |
footerHeight | Footer height | Number | 30 |
getRowHeight | span row | Function(record, index):Number | () => 1 |
headerRowHeight | header row height | Number | 35 |
headerSortable | header sortable | Boolean | false |
indentSize | expanded indent size | Number | 17 |
onExpandedRowsChange | on expanded change | Function | |
onHeaderSortable | on header sort end | Function | |
onHeaderRow | header row event listener | Function | |
onScrollEnd | scroll to bottom | Function | |
onSort | on sort | Function | |
onRow | row events listener | Function | |
refreshEnable | use scroll end | Boolean | true |
rowClassName | row className | Function | () => '' |
rowHeight | default row height | Number | 30 |
scrollEndPosition | scroll to bottom px to refresh | Number | 60 |
scrollSize | set scroll default size | Object | {x: 8, y: 8} |
showHeader | show header | Boolean | true |
sortMulti | multi sort enable | Boolean | false |
style | table style | Object | {} |
useScrollY | use y Scroll | Boolean | true |
Column Props
props | describe | type | default value |
---|---|---|---|
align | alignment | String(left or center or right ) | left |
className | set className | Stringor Function(column , record , index ):String | |
children | child columns | Object:Column | |
dataIndex | data key,use a.b.c | String | - |
fixed | fixed column | String(left or right ) | |
key | unique identifier (can ignore) | String | - |
onCell | custom cell style | Function(column, record):Object | |
onHeaderCell | custom header cell style | Function(column):Object | |
order | default order | String(desc or asc ) | |
render | render cell | Function(text, record, index) {} | - |
sortEnable | sort enable | Boolean | |
title | header cell text | String or ReactNode | |
width | width | String or Number | - |
DataSource Props
props | describe | type | default value |
---|---|---|---|
isFixed | fixed row | true or String(top or bottom ) | - |
bordered
show border , default false
.
bodyMaxHeight
set table body max height, not default.
className
set className.
colMinWidth
header cell min width, default 100
.
dataSource
table data.
defaultShowCount
show count, default 30
emptyText
empty show content.
expandedRowByClick
whether expanded when click on a row, default true
.
expandedRowKeys
expanded keys.
expandedRowRender
custom expanded row.
fixedHeader
wherther fixed header. default true
footerHeight
footer height, default 30
.
getRowHeight
custom row height.
headerRowHeight
header row height. default 35
.
headerSortable
header sortable enabled, default false
.
indentSize
expanded indent size, default 17
.
onExpandedRowsChange
expanded on row changed.
onHeaderSortable
header on sortable end.
onHeaderRow
listen on header row events.
onScrollEnd
listen on scroll bottom.
onSort
listen on sort header.
onRow
listen on row events.
refreshEnable
scroll to bottom for refresh.
rowClassName
row className.
rowHeight
row height, default 30
.
scrollEndPosition
Scroll to the bottom how many pixels from the bottom trigger the refresh.
scrollSize
setting scroll size, default {x: 8, y: 8}
.
showHeader
show header, default true
.
sortMulti
sort multi, default false
.
style
table style.
useScrollY
use scroll Y.
示例
import Table from 'fast-table';
const columns = [
{
title: '第一列',
align: 'left',
dataIndex: 'key',
sortEnable: true,
order: true,
fixed: 'left',
width: 100,
render: (text) => (<span>{text}</span>),
onCell: () => ({color: '#F9C152'})
},
{
title: '第二列',
dataIndex: 'key0',
width: 100,
fixed: 'left',
sortEnable: true
},
{
title: '第三列',
dataIndex: 'key1',
width: 100,
bodyStyle: {background: '#122024', color: '#11A1FF'}
},
{
title: '第四列',
align: 'left',
dataIndex: 'key2',
width: 130
},
{
title: '第五列',
align: 'left',
dataIndex: 'key3',
width: 120
},
{
title: '第六列',
align: 'left',
fixed: 'right',
dataIndex: 'key4',
width: 100,
}
];
const dataSource = [
{key: 0, key0: 'a', key1: 'b', key2: 'c', key3: 'd', key4: 'e'}
];
const otherProps = {};
ReactDOM.render(<Table columns={columns} dataSource={dataSource} {...otherProps} />, mountNode);
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago