antd-table-infinity

by Leonard-Li777

Leonard-Li777 / antd-table-infinity

An infinite scroll component based on antd-table that supports virtual scrolling

233 Stars 39 Forks Last release: Not found Other 49 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

中文 | English

antd-table-infinity

一个基于 Antd Table 的无限滚动加载表格组件,不同普通无限滚动方案,它使用了虚拟滚动技术,拥有无可比拟的高性能!

--by 客如云(keruyun.com)前端团队

为什么会有这个库?

众所周知,Antd Table 组件只有翻页模式,我们需要将其改为滚动无限加载,但是 Antd Table 其本身是基于React.Component继承的,而非PureComponent,所以在大数据下存在严重的性能问题。

基于虚拟滚动技术,我们实现了无论表格有多少数据,始终只render指定行数的表格,拥有了高性能滚动,理论上支持无限量数据,拥有最佳用户体验。

本库稍加改动理论上也支任意第三方表格组件!

运行演示

  • git clone https://github.com/Leonard-Li777/antd-table-infinity.git
  • yarn install
  • yarn run storybook
  • check
    localhost:9001

antd-table-infinity gif demo

兼容说明

自从 [email protected] 添加了 IntersectionObserver Polyfill, 现在兼容所有主流浏览器!!!

~~由于使用了 IntersectionObserver 提高滚动监听性能,支持浏览器如下~~

  • ~~Chrome 51+~~
  • ~~Firefox 61+~~
  • ~~Edge 17+~~
  • ~~iOS Safari 不兼容~~

使用了 React 新的 API getDerivedStateFromProps 等

  • React 16.4.0+

API 说明


PageTable (分页无限滚动)

快速开始


  • npm install antd-table-infinity
  • import { PageTable } from 'antd-table-infinity'
    ;
  • import 'antd-table-infinity/index.css'
    ;

使用方法


antd-table-infinity 导出一个模块

PageTable
, 它接收如下props:

Option

default Description

loading
| false | 表示加载状态,展示loading效果
loadingIndicator
| null | 自定义一个react组件去展示loading动画,否则使用内置动画
onFetch
| noop | 加载数据,Fetch数据:
function({page, pageSize}) => void
pageSize
| 30 | 每页数据行数
onScroll
| null | 滚动事件监听
function(e) => void
pagination
| { defaultCurrent: 1 } | antd 组件 Pagination, 但仅接受如下Props:
position: oneOf(['both', 'top', 'bottom']),
className: string,
defaultCurrent: number,
hideOnSinglePage: bool,
itemRender: func,
showQuickJumper: bool,
showTotal: func,
simple: bool,
size: string,
onChange: func,
bidirectionalCachePages
| Infinity | 1 ~ maxPage ,当前页附近双向缓存的页数,最小为1,最大为maxPage,Infinity相当于maxPage
total
| 0 | 数据总条数
dataSource
| undefined | 格式: [page, data], 当fetch成功,传递给组件的页码和数据
debug
| false | 是否显示Debug console.log信息 ... | ... | 其它 Antd Table Props

示例代码


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Spin } from 'antd';
import { PageTable as Table } from 'antd-table-infinity';
import { columns, fetchData } from './stories/Table/mockData';

class App extends Component { state = { page: 1, data: [], loading: false, }; handleFetch = ({ page, pageSize }) => { console.warn('loading', { page, pageSize });

const startIndex = (page - 1) * pageSize;

this.setState({ loading: true });
fetchData(startIndex, pageSize).then(data =>
  this.setState({
    loading: false,
    data,
    page,
  }),
);

};

render() { const { page, data, loading } = this.state;

return (
  </pre><table rowkey="key" classname="custom-classname" pagination="{{" loading="{loading}" onfetch="{this.handleFetch}" pagesize="{100}" bidirectionalcachepages="{1}" total="{5000}" datasource="{[page," data columns="{columns}" scroll="{{" bordered debug position:="" defaultcurrent:="" classname:="" x:="" y:=""></table>
);

} }

ReactDOM.render( , document.getElementById('root') );

InfinityTable (无限滚动组件)

快速开始

  • npm install antd-table-infinity
  • import { InfinityTable } from 'antd-table-infinity'
    ;

使用方法

antd-table-infinity 导出一个模块

InfinityTable
, 它接收如下props:

Option

default Description

loading
| false | 表示加载状态,展示loading效果
loadingIndicator
| null | 自定义一个react组件去展示loading动画,否则使用内置动画
onFetch
| noop | 滚动到底部事件回调,Fetch数据:
function() => void
pageSize
| 30 | 表格实际render行数
onScroll
| null | 滚动事件监听
function(e) => void
debug
| false | 是否显示Debug console.log信息 ... | ... | 其它 Antd Table Props

示例代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Spin } from 'antd';
import { InfinityTable as Table } from 'antd-table-infinity';
import { columns, fetchData } from './stories/Table/mockData';

class App extends Component { state = { data: [], loading: false, }; handleFetch = () => { console.log('loading'); this.setState({ loading: true }); fetchData(this.state.data.length).then(newData => this.setState(({ data }) => ({ loading: false, data: data.concat(newData), })), ); };

loadMoreContent = () => (

);

render() { return (

); } }

ReactDOM.render( , document.getElementById('root') );


SumTable (无限滚动组件, 带合计行)

antd-table-infinity gif demo

快速开始

  • npm install antd-table-infinity
  • import { SumTable } from 'antd-table-infinity'
    ;
  • import 'antd-table-infinity/index.css'
    ;

使用方法

antd-table-infinity 导出一个模块

SumTable
, 它接收如下props:

Option

default Description

loading
| false | 表示加载状态,展示loading效果
loadingIndicator
| null | 自定义一个react组件去展示loading动画,否则使用内置动画
onFetch
| noop | 滚动到底部事件回调,Fetch数据:
function() => void
pageSize
| 30 | 表格实际render行数
sumData
| null | 合计行数据
debug
| false | 是否显示Debug console.log信息 ... | ... | 其它 Antd Table Props

示例代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Spin } from 'antd';
import { SumTable as Table } from 'antd-table-infinity';
import { columns, fetchData } from './stories/Table/mockData';
import 'antd-table-infinity/index.css';

class App extends Component { state = { data: [], loading: false, }; handleFetch = () => { console.log('loading'); this.setState({ loading: true }); fetchData(this.state.data.length).then(newData => this.setState(({ data }) => ({ loading: false, data: data.concat(newData), })), ); };

render() { return (

); } }

ReactDOM.render( , document.getElementById('root') );


注意事项

  1. antd-table-infinity是基于Antd Table的上一层封装,因此使用的时候,确保你的项目已安装antd组件库
  2. import  { InfinityTable, SumTable, PageTable } 'antd-table-infinity'
    ; 只包含表格组件的代码
  3. import 'antd-table-infinity/index.css'
    ; 只包含PageTable、SumTable组件的css
  4. 如果你的项目没有安装 antd 组件库, 请使用全量打包文件

  5. import { InfinityTable, SumTable, PageTable } from 'antd-table-infinity/dist/index.js'
    ; 包含所有代码及使用到的antd相关组件的所有代码
  6. import 'antd-table-infinity/index.css'
    ; 只包含PageTable、SumTable组件的css
  7. import 'antd-table-infinity/dist/index.css'
    ; 包含使用到的antd相关组件的所有css
  8. rowKey='key' 非常重要,antd-table需要的每行数据的唯一键值,否则滚动翻页会出问题,实在没有,请用 uuid 库创建 参考:https://ant.design/components/table-cn/#%E6%B3%A8%E6%84%8F

    已发现问题

  • 当做单元格编辑功能的时候(如在input中连继输入字符,本质上是 Antd Table 接收新的props的反复渲染),在开发模式下会存在性能问题,生产环境不会存在!主要是来自 HMR 和 Redux DevTools的性能消耗。

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.