Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Leonard-Li777/antd-table-infinity

An infinite scroll component based on antd-table that supports virtual scrolling
https://github.com/Leonard-Li777/antd-table-infinity

antd infinity-scroll pagetable react table virtual-scroll

Last synced: 24 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
中文 | [English](./README_en.md)



# 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](./antd-table-infinity-page-table.gif)



### **兼容说明**



**自从 [email protected] 添加了 [IntersectionObserver Polyfill](https://github.com/w3c/IntersectionObserver/tree/master/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



### 示例代码

---



``` javascript

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 (

      

    );

  }

}



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



### 示例代码 

``` javascript

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](./antd-table-infinity.gif)



### 快速开始

- `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



### 示例代码 

``` javascript

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组件库

- `import  { InfinityTable, SumTable, PageTable } 'antd-table-infinity'`; 只包含表格组件的代码

- `import 'antd-table-infinity/index.css'`; 只包含PageTable、SumTable组件的css



2. 如果你的项目没有安装 antd 组件库, 请使用全量打包文件

- `import { InfinityTable, SumTable, PageTable } from 'antd-table-infinity/dist/index.js'`; 包含所有代码及使用到的antd相关组件的所有代码

- `import 'antd-table-infinity/index.css'`; 只包含PageTable、SumTable组件的css

- `import 'antd-table-infinity/dist/index.css'`; 包含使用到的antd相关组件的所有css



3. rowKey='key' 非常重要，antd-table需要的每行数据的唯一键值，否则滚动翻页会出问题，实在没有，请用 uuid 库创建 参考：[https://ant.design/components/table-cn/#%E6%B3%A8%E6%84%8F](https://ant.design/components/table-cn/#%E6%B3%A8%E6%84%8F)



### 已发现问题



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