写这篇文章的原因是,自己在遇到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/><Cell/>。
Table包含Column
Column包含Table
这里的Cell就是一个单元格.
<Table /> contains configuration information for the entire table
Table 包含了主要的配置信息.
- rowHeight={50} //行高
- rowsCount={100} //行数
- width={5000} //table宽度
- height={5050} //table的高度
- headerHeight={50} //header的高度
- data={rows}> //数据源
<Column />定义表中一列显示数据的方式
- header = { < Cell > Col 1 < / Cell > } //列的标题
- cell = { < Cell > Column 1 < / Cell > } //列内每一行的数据
- width = { 2000 } //列的宽度
可以重写Cell组件
const MyCustomCell = ({ isSpecial }) =>
<Cell>
{isSpecial ? "I'm Special" : "I'm Not Special"}
</Cell>;
<Column
header={<Cell>Col 3</Cell>} //列的名称
cell={<MyCustomCell isSpecial/>} //相当于封装了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 (
<div>
<Table
rowHeight={50} //行高
rowsCount={data.length} //行数
width={500} //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 = {300}
header = {<Cell>爱好</Cell>}
cell = {({rowIndex,...props}) => (
<Cell {...props}>
{data[rowIndex]['c']}
</Cell>
)}
>
</Column>
</Table>
</div>
)
}
还有的功能:
固定列.
实现:只需要在对应的Column增加属性 fixed={true}
注意:将哪一列固定了,会自动排在第一列.假如我们给姓名的列增加了fixed,那么姓名就是第一列.
<Column
fixed={true}
header = {<Cell>班级</Cell>}
width = {100}
cell = {({rowIndex,...props}) => (
<Cell {...props}>
{data[rowIndex]['a']}
</Cell>
)}
>
如果想这样样式,需要用到ColumnGroup
引入:import {Table, Column, Cell,ColumnGroup} from 'fixed-data-table-2';
注意点: 需要在Table上设置:groupHeaderHeight,在Column外层包围:ColumnGroup
<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>Name</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>
</ColumnGroup >
<ColumnGroup
fixed={true}
>
<Column
width = {300}
header = {<Cell>爱好</Cell>}
cell = {({rowIndex,...props}) => (
<Cell {...props}>
{data[rowIndex]['c']}
</Cell>
)}
>
</Column>
</ColumnGroup >
</Table>
此刻,我想你已经开始上手了.自己开始思考挖掘吧~加油.
