无限滚动加载表格组件

yarn add antd-table-infinity

滚动加载例子：

import React 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 React.Component {
  
  constructor(props) {
      super(props);
      this.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 = () => (
    <div style={{
        textAlign: 'center',
        paddingTop: 40,
        paddingBottom: 40,
        border: '1px solid #e8e8e8',
      }}>
      <Spin tip="Loading..." />
    </div>
  );
 
  render() {
    return (
      <Table
        rowKey='key'  // 非常重要，请按你的数据列正确设置，否则滚动会出问题
        loading={this.state.loading}
        onFetch={this.handleFetch}
        pageSize={100}
        loadingIndicator={this.loadMoreContent()}
        columns={columns}
        scroll={{ y: 450 }}
        dataSource={this.state.data}
        bordered
        debug
      />
    );
  }
}
 
ReactDOM.render(
    <App />,
  document.getElementById('root')
);

不滚动数据加载例子：

import React from 'react';
import { Empty } from 'antd';
import { InfinityTable as Table } from 'antd-table-infinity';
import 'antd-table-infinity/index.css';

class InfinityTable extends React.Component {

   timeoutId=null;
   
   constructor(props) {
      super(props);
      this.state = {
         details: [], 
         checkedIds: []
      };
   }
   
   componentWillUnmount() {
    	clearTimeout(this.timeoutId);
    	this.setState = (state, callback) => {
    	};
   }
	
   loadDatas=()=>{
      	const originalDetails = _.cloneDeep(this.state.details);
      	promise.then(({details})=>{
      	    details=_.uniqBy(_.concat(originalDetails, details), 'id');
      	    this.setState({details:details})
      	    this.timeoutId = await setTimeout(this.loadDatas, 2000);
            if (isOver) {
                clearTimeout(this.timeoutId);
            }
      	})
   }
   
   render() {
      const { details, checkedIds } = this.state;
      const { columns } = this.props;
      let rowSelection = {
         selectedRowKeys: checkedIds,
         getCheckboxProps: () => ({
            disabled: true
         }),
         columnWidth: 32
      };
      return (
         <Table rowKey='id'
               bordered
               pageSize={100}
               dataSource={details}
               columns={columns}
               scroll={{ y: 572 }}
               rowSelection={rowSelection}
               locale={{
                  emptyText: <Empty description="无数据"
                               image={Empty.PRESENTED_IMAGE_SIMPLE}/>
               }}/>
      );
   }
}

export default InfinityTable;

来源链接：www.npmjs.com/package/ant…