FixedDataTable-百万行数据无性能消耗的table

主要配合React，官网地址：
https://schrodinger.github.io/fixed-data-table-2/fixed-right-columns.html

优势：

• 处理百万级数据,且不卡顿非常流畅.滑动是不牺牲性能的.用户量大的项目时,这个插件首选
• 无限滚动 支持无限滚动，快速渲染
• 自定义样式 自定义样式较方便，比如自定义单元格里图片样式、表头背景颜色等
• 信息提示 鼠标移动到某单元格，显示相关信息

简单demo实现:

1、安装
npm install fixed-data-table-2

2、 css样式位置
node_modules\fixed-data-table-2\dist\fixed-data-table.css

3、常用组件

• Table ：包含Column
• Column： 包含Cell
• Cell ：表示单元格.

4、Table 包含了主要的配置信息.

rowHeight={50} //行高
rowsCount={100} //行数
width={5000} //table宽度
height={5050} //table的高度
headerHeight={50} //header的高度
data={rows}> //数据源

5、定义表中一列显示数据的方式

header = { < Cell > Col 1 < / Cell > } //列的标题
cell = { < Cell > Column 1 < / Cell > } //列内每一行的数据
width = { 2000 } //列的宽度

6、组件使用插件

效果图

组件的源码

import React from 'react'
import { Table, Column, Cell } from 'fixed-data-table-2'
import 'fixed-data-table-2/dist/fixed-data-table.css'

class App extends React.Component {
  render() {
    const data = [
      { a: '班级1', b: '张三', c: '吃饭' },
      { a: '班级2', b: '李四', c: '睡觉' },
      { a: '班级3', b: '王五', c: '打豆豆' },
    ]
    return (
      <div>
        <Table
          rowHeight={50} //行高
          rowsCount={data.length} //行数
          width={400} //table宽度
          height={200} //table的高度s
          headerHeight={50} //header的高度
        >
          <Column
            header={<Cell>班级</Cell>}
            width={100}
            cell={({ rowIndex, ...props }) => (
              <Cell {...props}>{data[rowIndex]['a']}</Cell>
            )}
          ></Column>
          <Column
            width={100}
            header={<Cell>姓名</Cell>}
            cell={({ rowIndex, ...props }) => (
              <Cell {...props}>{data[rowIndex]['b']}</Cell>
            )}
          ></Column>
          <Column
            width={200}
            header={<Cell>爱好</Cell>}
            cell={({ rowIndex, ...props }) => (
              <Cell {...props}>{data[rowIndex]['c']}</Cell>
            )}
          ></Column>
        </Table>
      </div>
    )
  }
}

export default App

6、滚动条

如果table的高度小于 rowHeight * rowsCount + headerHeight 时候,会自动出现滚动条.

7、 行属性

api有onRowClick、onRowDoubleClick、onRowMouseDown、onRowMouseEnter、onRowMouseLeave，可实现长时间点击行，行高亮等。

8、固定列

只需要在对应的Column增加属性 fixed={true}

9、合并单元格

需要在Table上设置:groupHeaderHeight,在Column外层包围:ColumnGroup，需要用到ColumnGroup

10、用到固定列与合并单元格的组件demo

效果图：此处设置了锁定列为"姓名”

组件的源码

import React from 'react'
import { Table, Column, Cell, ColumnGroup } from 'fixed-data-table-2'
import 'fixed-data-table-2/dist/fixed-data-table.css'

class App extends React.Component {
  render() {
    const data = [
      { a: '班级1', b: '张三', c: '吃饭' },
      { a: '班级2', b: '李四', c: '睡觉' },
      { a: '班级3', b: '王五', c: '打豆豆' },
    ]
    return (
      <div>
        <Table
          groupHeaderHeight={50}
          rowHeight={50} //行高
          rowsCount={data.length} //行数
          width={400} //table宽度
          height={200} //table的高度s
          headerHeight={50} //header的高度
          {...this.props}
        >
          <ColumnGroup fixed={true} header={<Cell>学生信息</Cell>}>
            <Column
              fixed={true}
              header={<Cell>班级</Cell>}
              width={100}
              cell={({ rowIndex, ...props }) => (
                <Cell {...props}>{data[rowIndex]['a']}</Cell>
              )}
            ></Column>
            <Column
              width={100}
              header={<Cell>姓名</Cell>}
              cell={({ rowIndex, ...props }) => (
                <Cell {...props}>{data[rowIndex]['b']}</Cell>
              )}
            ></Column>

            <Column
              width={300}
              header={<Cell>爱好</Cell>}
              cell={({ rowIndex, ...props }) => (
                <Cell {...props}>{data[rowIndex]['c']}</Cell>
              )}
            ></Column>
          </ColumnGroup>
        </Table>
      </div>
    )
  }
}

export default App