Skip to content

Paul-Long/fast-table

Repository files navigation

Fast Table

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

npm package NPM downloads Dependencies DevDependencies Gitter Codecov Issues need help

在线 Demo

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

安装

rc-select

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