FixedDataTable-无性能消耗百万级table

给你个眼神

写这篇文章的原因是,自己在遇到FixedDataTable时候,上网搜了一些文章,总没有尽人意的,或者都是英文版本,对阅读能力有要求.因此我做了对FDT的总结.

很多人可能还没有听过这个js插件,简单点,它就是一个table.那么它的强大之处在哪里?
我们先看看官网的解释:

A React table component designed to allow presenting millions of rows of data.

解读

这个插件是配合React的,它的主要优势是处理百万级数据,并且不卡顿非常流畅.并且它的滑动是不牺牲性能的.因此,一个项目追求的是完美,用户量大的时候,这个插件必定是你的左膀右臂.

你可以先看一下它的demo

demo地址
是吧,真的不卡顿且流程.并且偷偷告诉你,维护它的人是Schrödinger，Inc。是facebook公司的分支.

入门

fixed-data-table-2使用npm 安装。

npm install fixed-data-table-2

它的样式在

dist/fixed-data-table.css

主要的三种组件类型。

Table包含Column
Column包含Table
这里的Cell就是一个单元格.

contains configuration information for the entire table

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

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

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

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

可以重写Cell组件

const MyCustomCell = ({ isSpecial }) =>
      
        {isSpecial ? "I'm Special" : "I'm Not Special"}
      ;


    Col 3} //列的名称
      cell={} //相当于封装了Cell组件
      width={2000} //列的宽度
    />

如果你要开始一个React项目,我建议你使用facebook出的一款脚手架工具,
create-react-app.前提这个脚手架比较简单,网上也很多讲解.在里面使用fixed-data-table也是比较简单的.
引入:

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

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

上菜

基本介绍完了,如果你对文字理解不透彻,那么直接上菜吧.还等什么?

基本表格

demo1

render() { 
  const data = [ 
      {a : '9.1',b : 'bin1', c : '吃'},
      {a : '9.2',b : 'bin2', c : '喝'},
      {a : '9.3',b : 'bin3', c : '玩'},
    ];
return (
    
 
            

班级} width = {100} cell = {({rowIndex,...props}) => ( {data[rowIndex]['a']} )} > 姓名} cell = {({rowIndex,...props}) => ( {data[rowIndex]['b']} )} > 爱好} cell = {({rowIndex,...props}) => ( {data[rowIndex]['c']} )} >

) }

还有的功能:

固定列.

固定列

实现:只需要在对应的Column增加属性 fixed={true}
注意:将哪一列固定了,会自动排在第一列.假如我们给姓名的列增加了fixed,那么姓名就是第一列.

          班级}
            width = {100}
            cell = {({rowIndex,...props}) => (
              
                {data[rowIndex]['a']}
              
            )}
          > 

如果想这样样式,需要用到ColumnGroup
引入:import {Table, Column, Cell,ColumnGroup} from 'fixed-data-table-2';
注意点: 需要在Table上设置:groupHeaderHeight,在Column外层包围:ColumnGroup

image.png

 Name}>
          班级}
            width = {100}
            cell = {({rowIndex,...props}) => (
              
                {data[rowIndex]['a']}
              
            )}
          > 

          
          姓名}
             cell = {({rowIndex,...props}) => (
              
                {data[rowIndex]['b']}
              
            )}
          >
          
        
          爱好}
             cell = {({rowIndex,...props}) => (
              
                {data[rowIndex]['c']}
              
            )}
          >
          
                  

此刻,我想你已经开始上手了.自己开始思考挖掘吧~加油.