主要配合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