React 表格组件，支持多数据首次快速渲染

在线 Demo

https://paul-long.github.io/react-components/

安装

npm install fast-table-pro --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 | - | | onColSpan | merge cell | Function(column, record):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-pro';
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
• 1.4.8-beta-42
  • 添加水平单元格合并