Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

fast-table

Package Overview
Dependencies
Maintainers
1
Versions
97
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fast-table

react table fast

  • 1.3.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
decreased by-42.86%
Maintainers
1
Weekly downloads
 
Created
Source

fast-table

一个支持大数据渲染的table表格react组件

在线Demo

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

安装

npm install fast-table

支持

  • 多数据快速渲染,虚拟渲染
  • 固定表头
  • 固定列
  • 表头排序
  • 表头分组
  • 树形数据展示

API

Table Props:

参数说明类型默认值
bordered是否显示边框Booleanfalse
className自定义classString
colMinWidth列最小宽度Number100
columns表格列的配置描述,具体项见下表Array[]-
dataSource数据数组Array[]
defaultShowCount默认显示行数Number30
emptyText空数据展示文字Function() => '暂无数据'
expandedRowByClick是否可以点击行展开Booleantrue
expandedRowKeys展开行集合String[]
fixedHeader是否固定表头Booleantrue
footerHeightFooter高度Number30
getRowHeight设置当前行占几行, 默认占1行Function(record, index):Number() => 1
headerRowHeight表头默认行高Number35
indentSize展开行首个但单元格缩进Number17
onExpandedRowsChange展开行行为触发Function
onScrollEnd滚动至页面底部触发Function
refreshEnable是否可滚动最底部刷新Booleantrue
rowClassName获取行classFunction() => ''
rowHeight默认行高Number30
scrollEndPosition滚动至底部多少px触发onScrollEndNumber60
showHeader是否显示表头Booleantrue
sortMulti是否多表头排序Booleanfalse
styletable自定义样式Object{}
useScrollY使用Y轴 ScrollBooleantrue

Column Props:

参数说明类型默认值
align对齐方式String(left or center or right)left
className设置列classNameString or Function(column, record, index):String
children多行表头属性Object:Column
dataIndex列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法String-
fixed设置固定列String(left or right)
keyReact 需要的 key,如果已经设置了唯一的 dataIndex,
可以忽略这个属性
String-
onCell设置Body单元格styleFunction(column, record):Object
order默认排序规则String(desc or asc)
render生成复杂数据的渲染函数,
参数分别为当前行的值,当前行数据,行索引,
@return里面可以设置表格行/列合并
Function(text, record, index) {}-
sortEnable是否可排序Boolean
title列头显示文字String or ReactNode
width列宽度String or Number-

示例

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);

Keywords

FAQs

Package last updated on 02 Jul 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc