写这篇文章的原因是,自己在遇到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 时候,会自动出现滚动条.
上菜
基本介绍完了,如果你对文字理解不透彻,那么直接上菜吧.还等什么?
基本表格
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
Name}>
班级}
width = {100}
cell = {({rowIndex,...props}) => (
{data[rowIndex]['a']}
|
)}
>
姓名}
cell = {({rowIndex,...props}) => (
{data[rowIndex]['b']}
|
)}
>
爱好}
cell = {({rowIndex,...props}) => (
{data[rowIndex]['c']}
|
)}
>
此刻,我想你已经开始上手了.自己开始思考挖掘吧~加油.