Fast Table
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 |
| pullDown | pull data | 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 |
| rowSelection | Row selection, config | Object | null |
Column Props
| props | describe | type | default value |
|---|---|---|---|
| align | alignment | String(left or center or right) |
left |
| className | set className | StringorFunction(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 ) |
- |
Row Selection
| props | describe | type | default value |
|---|---|---|---|
| selectedKeys | controlled selected row keys | string[] | [] |
| onSelect | callback executed when select one row | Function(record, selected, selkectedKeys) | |
| type | select model, checkbox(multi-select) or radio(radio-select) |
checkbox or radio
|
checkbox |
| useSelectAll | select all enable | boolean |
false |
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.
pulldown
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.
rowselection
Row selection
示例
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
);Version Log
- 1.4.8-beta.17
- 添加向前添加数据滚动条位置设置
- 1.4.8-beta.16
- fixed onClick bug
