{"_id":"@botanic-cms/antd-table-infinity","_rev":"2-b09d745eb6de61e4973353bc94c97cbb","name":"@botanic-cms/antd-table-infinity","dist-tags":{"latest":"1.1.7"},"versions":{"1.1.5":{"name":"@botanic-cms/antd-table-infinity","version":"1.1.5","scripts":{"storybook":"start-storybook -p 9001 -c .storybook","start":"umi dev","clean":"rimraf umd lib es","build:cjs":"better-npm-run build-cjs","build:es":"better-npm-run build-es","build:umd":"better-npm-run build-umd","build":"yarn clean && yarn build:cjs && yarn build:es && yarn build:less","build:less":"lessc src/components/Table/index.less ./index.css","lint":"eslint ./**/*.jsx  --ext .jsx --ext .js --fix","prepublishOnly":"npm version patch && yarn build"},"betterScripts":{"build-cjs":{"command":"babel src/components/Table --out-dir lib","env":{"BABEL_ENV":"cjs"}},"build-es":{"command":"babel src/components/Table --out-dir es","env":{"BABEL_ENV":"es"}},"build-umd":{"command":"babel src/components/Table --out-dir umd","env":{"BABEL_ENV":"umd"}}},"main":"lib/index.js","module":"es/index.js","jsnext:main":"es/index.js","keywords":["antd","table","infinity","virtual","scroll","loading","虚拟表格滚动","表格无限滚动加载"],"contributors":[{"name":"keruyun.com"}],"author":{"name":"seaeye777@qq.com"},"bugs":{"url":"https://github.com/Leonard-Li777/antd-table-infinity/issues"},"private":false,"repository":{"type":"git","url":"git+https://github.com/Leonard-Li777/antd-table-infinity.git"},"license":"MIT","description":"An infinite scroll component based on antd table that supports virtual scrolling & high-performance form http://keruyun.com/","publishConfig":{"registry":"http://registry.npmjs.org","access":"public"},"peerDependencies":{"react":">=16.4.0","react-dom":">=16.4.0"},"dependencies":{"antd-table-infinity":"^1.1.2","intersection-observer":"^0.5.1","lodash.throttle":"^4.1.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@babel/plugin-proposal-decorators":"^7.0.0","@babel/plugin-proposal-do-expressions":"^7.0.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-proposal-export-namespace-from":"^7.0.0","@babel/plugin-proposal-function-bind":"^7.0.0","@babel/plugin-proposal-function-sent":"^7.0.0","@babel/plugin-proposal-json-strings":"^7.0.0","@babel/plugin-proposal-logical-assignment-operators":"^7.0.0","@babel/plugin-proposal-nullish-coalescing-operator":"^7.0.0","@babel/plugin-proposal-numeric-separator":"^7.0.0","@babel/plugin-proposal-optional-chaining":"^7.0.0","@babel/plugin-proposal-pipeline-operator":"^7.0.0","@babel/plugin-proposal-throw-expressions":"^7.0.0","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/plugin-syntax-import-meta":"^7.0.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@storybook/react":"^3.4.10","babel-core":"^6.26.3","better-npm-run":"^0.1.1","lodash":"^4.17.11","rimraf":"^2.6.2","storybook-readme":"^3.3.0","umi":"^2.2.6","umi-plugin-react":"^1.2.3"},"engines":{"node":">=8.11.2"},"gitHead":"74581b8e54e16bbb25964228763f0255ab7dadc0","homepage":"https://github.com/Leonard-Li777/antd-table-infinity#readme","_id":"@botanic-cms/antd-table-infinity@1.1.5","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-1U0O8izCAFrt7T82lGEYi+I904OHrNBf0C/iKiXnIsBSNt7GhbwddzxJ6kBWEA3cSe+cKCeT9oXxKWD+5JG9yQ==","shasum":"a9d71bad4a5f0bc4f068c6fa03dc7d77b7ad1e32","tarball":"https://registry.npmjs.org/@botanic-cms/antd-table-infinity/-/antd-table-infinity-1.1.5.tgz","fileCount":31,"unpackedSize":168024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8RbGCRA9TVsSAnZWagAA7zsP/RTG2yrJL8NLlSpuGHJX\nOn8jajvy19JmPDsnmUdDP5DJkJiRydMfzO4NlCv2tj/ZXCYNKi7MwcTKiWU3\nyxhsz/ShM94MyTougejpCsl8vAUN3MdlhHkla9fpjWDtgtfLBsoQbxLNZktA\ndMtVIC6Oa6KjaPHNwWzsSfBItVxVyii4rSyp5UbZwEDVjOgvOwI+cMqsn4Hm\n/XwYrQ9CS6WLVk5VuIwSd5iDFI1mec5eOaUZKjHNavPVl7TJ57EzLzXgOLLS\n7M6ZrqSR64HK3cgdMwvm5EXAIgXNsVecmHprOU+fTXlHLjniYIaA3E8qadbp\nBpLpx3+0ZQ50t7Hz8HElxjrmjDvqJL/XQCQf9pQAn9RJekDpZ5Mr6FVgveLC\n8GBzHm4Y7YYjVyfcHSfMML5jjRoocea7ugCuqeOjNERNNTBvDr/xygDMUsWG\nXEw+RSD3O8VAaHpbTMIeFYpCDVSarPIXYCsklLQbxAXJxJhTDXWoKfhneCAL\nZQUux7Up2Dk0zVZy8yS8FjAbVrTZKK7anvR9yxbTEGgvBNtg00DP3BGiimTC\nZI5Gbb8Ak2B03j3h1ganrUuqsiW9Bj4t+Dzd9h7jd6zXAWPautim4di4FaAx\n5ixsQt3uSZ2JUoEXzPgNHhUJadud4WS7ehzVwrVsVOuRPI0W8jHyBt1EwPmY\nUZqm\r\n=BQ4e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlIuzHtZA/kmOSedkdPQdho9edsxhfZY7buhQGuS0GlAiAUGnKw61cErTkM0pHwHc/9o7SCjPEDdwBYkXXBEO4KKA=="}]},"maintainers":[{"name":"daniele_s","email":"dnl.s.1992@gmail.com"}],"_npmUser":{"name":"daniele_s","email":"dnl.s.1992@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-table-infinity_1.1.5_1592858310249_0.32329673837677664"},"_hasShrinkwrap":false},"1.1.7":{"name":"@botanic-cms/antd-table-infinity","version":"1.1.7","scripts":{"storybook":"start-storybook -p 9001 -c .storybook","start":"umi dev","clean":"rimraf umd lib es","build:cjs":"better-npm-run build-cjs","build:es":"better-npm-run build-es","build:umd":"better-npm-run build-umd","build":"yarn clean && yarn build:cjs && yarn build:es && yarn build:less","build:less":"lessc src/components/Table/index.less ./index.css","lint":"eslint ./**/*.jsx  --ext .jsx --ext .js --fix","prepublishOnly":"npm version patch && yarn build"},"betterScripts":{"build-cjs":{"command":"babel src/components/Table --out-dir lib","env":{"BABEL_ENV":"cjs"}},"build-es":{"command":"babel src/components/Table --out-dir es","env":{"BABEL_ENV":"es"}},"build-umd":{"command":"babel src/components/Table --out-dir umd","env":{"BABEL_ENV":"umd"}}},"main":"lib/index.js","module":"es/index.js","jsnext:main":"es/index.js","keywords":["antd","table","infinity","virtual","scroll","loading","虚拟表格滚动","表格无限滚动加载"],"contributors":[{"name":"keruyun.com"}],"author":{"name":"seaeye777@qq.com"},"bugs":{"url":"https://github.com/Leonard-Li777/antd-table-infinity/issues"},"private":false,"repository":{"type":"git","url":"git+https://github.com/Leonard-Li777/antd-table-infinity.git"},"license":"MIT","description":"An infinite scroll component based on antd table that supports virtual scrolling & high-performance form http://keruyun.com/","publishConfig":{"registry":"http://registry.npmjs.org","access":"public"},"peerDependencies":{"react":">=16.4.0","react-dom":">=16.4.0"},"dependencies":{"antd-table-infinity":"^1.1.2","intersection-observer":"^0.5.1","lodash.throttle":"^4.1.1"},"devDependencies":{"@babel/cli":"^7.0.0","@babel/core":"^7.0.0","@babel/plugin-proposal-decorators":"^7.0.0","@babel/plugin-proposal-do-expressions":"^7.0.0","@babel/plugin-proposal-export-default-from":"^7.0.0","@babel/plugin-proposal-export-namespace-from":"^7.0.0","@babel/plugin-proposal-function-bind":"^7.0.0","@babel/plugin-proposal-function-sent":"^7.0.0","@babel/plugin-proposal-json-strings":"^7.0.0","@babel/plugin-proposal-logical-assignment-operators":"^7.0.0","@babel/plugin-proposal-nullish-coalescing-operator":"^7.0.0","@babel/plugin-proposal-numeric-separator":"^7.0.0","@babel/plugin-proposal-optional-chaining":"^7.0.0","@babel/plugin-proposal-pipeline-operator":"^7.0.0","@babel/plugin-proposal-throw-expressions":"^7.0.0","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/plugin-syntax-import-meta":"^7.0.0","@babel/preset-env":"^7.0.0","@babel/preset-react":"^7.0.0","@storybook/react":"^3.4.10","babel-core":"^6.26.3","better-npm-run":"^0.1.1","lodash":"^4.17.11","rimraf":"^2.6.2","storybook-readme":"^3.3.0","umi":"^2.2.6","umi-plugin-react":"^1.2.3"},"engines":{"node":">=8.11.2"},"gitHead":"3b66ca3e27c7d7f81e8c59315149d0e31b324385","homepage":"https://github.com/Leonard-Li777/antd-table-infinity#readme","_id":"@botanic-cms/antd-table-infinity@1.1.7","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-bUl157OVyxllIegozffSyhzcgKlgGQcWeFHhzQGO0VTH1J7jgBX2vLHCEHwa4L40rtw/rgEk/n9A5NBY7zCMZA==","shasum":"e7a8f06e567247562888a1971ef5cc938e303ec9","tarball":"https://registry.npmjs.org/@botanic-cms/antd-table-infinity/-/antd-table-infinity-1.1.7.tgz","fileCount":31,"unpackedSize":167925,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8RgUCRA9TVsSAnZWagAAMQ8QAJFNIy5op8GtA6XcoyVm\nWodneuxgjGy8m6Ut1coeRN87drbuvzofHYsLPvyysocpnAtwPY308/Wk3kem\nEaQA7MBNpp5rZBfkjq+pFNksU4rUzoHb6tF+pqPmWQHgdAmhzLKR4Wfo4GEZ\n/vFAxxIBwsmy9TpHrJD2Uds3rpV32JSgJhn3FdQ8REd95HwL6drNTuw5YeLw\nOE/C3x71nmGX0hVvqdVIx7t0DCSfmiffp8ULeZ41Qwzqyy4cwjNiq6CKy/Tn\nZM3aK2yW3BNi2SAaJ6f6/X+Zqgb36ZHootgFFzQ+PXuLaL1gzpKJT9FTbto9\nLgVr/W6mYSen+a0yu3ruFTjhdaz7e/NuQBd8Jbgp4L/UCQHDACT+GnsL3ZPi\nem/WGiUJKAcvHhgP1okB6jdPZGGUUkP5bfooiYFWvN/s7/tUHDnUReXO12Nb\nJpwuc15fjOh0NpFmDUZnvP4KTDdIymwfSw+BTmSQ9wWPPANo9z6NTOAbd5XC\niEl3tenpU7ueP8YsuzncmrxI36gvQpccB/hDveQ+O4iNjJNbNh4khBfz/y9C\nhS2x4da4RaXjqXMKW2on7CZDmoFB3qNh8pKXalkG70YtzbibJ1st1WdDHXE/\nfWHU6Whc9+I1AfjP7vd/qNevRGNTkG4qxffpDMYrDWj97ypiVajXMpA4EZwK\n8KwR\r\n=1xr6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS6qX/Q9poITMzxjsmn2BYPO3mcyAbK4eBQSr358RaZQIgGXHiKqsztcfX6U5SssIpKQGqTXC5A4/k6ifDjNbaHdA="}]},"maintainers":[{"name":"daniele_s","email":"dnl.s.1992@gmail.com"}],"_npmUser":{"name":"daniele_s","email":"dnl.s.1992@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-table-infinity_1.1.7_1592858644082_0.6470026640750768"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-22T20:38:29.985Z","1.1.5":"2020-06-22T20:38:30.382Z","modified":"2022-04-04T20:13:37.131Z","1.1.7":"2020-06-22T20:44:04.305Z"},"maintainers":[{"name":"daniele_s","email":"dnl.s.1992@gmail.com"}],"description":"An infinite scroll component based on antd table that supports virtual scrolling & high-performance form http://keruyun.com/","homepage":"https://github.com/Leonard-Li777/antd-table-infinity#readme","keywords":["antd","table","infinity","virtual","scroll","loading","虚拟表格滚动","表格无限滚动加载"],"repository":{"type":"git","url":"git+https://github.com/Leonard-Li777/antd-table-infinity.git"},"contributors":[{"name":"keruyun.com"}],"author":{"name":"seaeye777@qq.com"},"bugs":{"url":"https://github.com/Leonard-Li777/antd-table-infinity/issues"},"license":"MIT","readme":"中文 | [English](./README_en.md)\r\n\r\n# antd-table-infinity\r\n\r\n一个基于 Antd Table 的无限滚动加载表格组件，不同普通无限滚动方案，它使用了虚拟滚动技术，拥有无可比拟的高性能！\r\n\r\n>*--by 客如云（keruyun.com）前端团队*\r\n\r\n### **为什么会有这个库?**\r\n众所周知，Antd Table 组件只有翻页模式，我们需要将其改为滚动无限加载，但是 Antd Table 其本身是基于React.Component继承的，而非PureComponent，所以在大数据下存在严重的性能问题。\r\n\r\n基于虚拟滚动技术，我们实现了无论表格有多少数据，始终只render指定行数的表格，拥有了高性能滚动，理论上支持无限量数据，拥有最佳用户体验。\r\n\r\n本库稍加改动理论上也支任意第三方表格组件！\r\n\r\n### **运行演示**\r\n- `git clone https://github.com/Leonard-Li777/antd-table-infinity.git`\r\n- `yarn install`\r\n- `yarn run storybook`\r\n- check `localhost:9001`\r\n\r\n![antd-table-infinity gif demo](./antd-table-infinity-page-table.gif)\r\n\r\n### **兼容说明**\r\n\r\n**自从 antd-table-infinity@1.1.0 添加了 [IntersectionObserver Polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill), 现在兼容所有主流浏览器！！！**\r\n\r\n~~由于使用了 IntersectionObserver 提高滚动监听性能，支持浏览器如下~~\r\n\r\n- ~~Chrome 51+~~\r\n- ~~Firefox 61+~~\r\n- ~~Edge 17+~~\r\n- ~~iOS Safari 不兼容~~\r\n\r\n使用了 React 新的 API getDerivedStateFromProps 等\r\n\r\n- React 16.4.0+\r\n\r\n\r\n\r\n### API 说明\r\n---\r\n\r\n# PageTable (分页无限滚动)\r\n\r\n### 快速开始\r\n---\r\n- `npm install antd-table-infinity`\r\n- `import { PageTable } from 'antd-table-infinity'`;\r\n- `import 'antd-table-infinity/index.css'`;\r\n\r\n### 使用方法\r\n---\r\nantd-table-infinity 导出一个模块 `PageTable`, 它接收如下props:\r\n\r\nOption               | default       | Description              \r\n---------------------|---------------|-----------------------------------------------\r\n`loading`            |  false        | 表示加载状态，展示loading效果\r\n`loadingIndicator`   |  null         | 自定义一个react组件去展示loading动画，否则使用内置动画\r\n`onFetch`            |  noop         | 加载数据，Fetch数据: `function({page, pageSize}) => void`\r\n`pageSize`           |  30           | 每页数据行数\r\n`onScroll`           |  null         | 滚动事件监听 `function(e) => void`\r\n`pagination`        |  { defaultCurrent: 1 } |  antd 组件 Pagination, 但仅接受如下Props: <br/>position: oneOf(['both', 'top', 'bottom']),<br/>className: string,<br/>defaultCurrent: number,<br/>hideOnSinglePage: bool,<br/>itemRender: func,<br/>showQuickJumper: bool,<br/>showTotal: func,<br/>simple: bool,<br/>size: string,<br/>onChange: func, \r\n`bidirectionalCachePages`             |  Infinity        |  1 ~ maxPage ，当前页附近双向缓存的页数，最小为1，最大为maxPage，Infinity相当于maxPage\r\n`total`             |  0        |  数据总条数\r\n`dataSource`             | undefined       |   格式: [page, data], 当fetch成功，传递给组件的页码和数据\r\n`debug`              |  false        | 是否显示Debug console.log信息\r\n...                  |  ...          | 其它 Antd Table Props\r\n\r\n### 示例代码\r\n---\r\n\r\n``` javascript\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Spin } from 'antd';\r\nimport { PageTable as Table } from 'antd-table-infinity';\r\nimport { columns, fetchData } from './stories/Table/mockData';\r\n\r\nclass App extends Component {\r\n  state = {\r\n    page: 1,\r\n    data: [],\r\n    loading: false,\r\n  };\r\n  handleFetch = ({ page, pageSize }) => {\r\n    console.warn('loading', { page, pageSize });\r\n\r\n    const startIndex = (page - 1) * pageSize;\r\n\r\n    this.setState({ loading: true });\r\n    fetchData(startIndex, pageSize).then(data =>\r\n      this.setState({\r\n        loading: false,\r\n        data,\r\n        page,\r\n      }),\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const { page, data, loading } = this.state;\r\n\r\n    return (\r\n      <Table\r\n        rowKey='key'  // 非常重要，请按你的数据列正确设置，否则滚动会出问题\r\n        className=\"custom-classname\"\r\n        pagination={{\r\n          position: 'both',\r\n          defaultCurrent: 21,\r\n          className: 'custom-classname-pagination',\r\n        }}\r\n        loading={loading}\r\n        onFetch={this.handleFetch}\r\n        pageSize={100}\r\n        bidirectionalCachePages={1}\r\n        total={5000}\r\n        dataSource={[page, data]}\r\n        columns={columns}\r\n        scroll={{ x: 2500, y: 650 }}\r\n        bordered\r\n        debug\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\nReactDOM.render(\r\n    <App />,\r\n  document.getElementById('root')\r\n);\r\n```\r\n## InfinityTable （无限滚动组件）\r\n### 快速开始\r\n- `npm install antd-table-infinity`\r\n- `import { InfinityTable } from 'antd-table-infinity'`;\r\n\r\n### 使用方法\r\nantd-table-infinity 导出一个模块 `InfinityTable`, 它接收如下props:\r\n\r\nOption               | default       | Description              \r\n---------------------|---------------|-----------------------------------------------\r\n`loading`            |  false        | 表示加载状态，展示loading效果\r\n`loadingIndicator`   |  null         | 自定义一个react组件去展示loading动画，否则使用内置动画\r\n`onFetch`            |  noop         | 滚动到底部事件回调，Fetch数据: `function() => void`\r\n`pageSize`           |  30           | 表格实际render行数\r\n`onScroll`           |  null         | 滚动事件监听 `function(e) => void`\r\n`debug`              |  false        | 是否显示Debug console.log信息\r\n...                  |  ...          | 其它 Antd Table Props\r\n\r\n### 示例代码 \r\n``` javascript\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Spin } from 'antd';\r\nimport { InfinityTable as Table } from 'antd-table-infinity';\r\nimport { columns, fetchData } from './stories/Table/mockData';\r\n\r\nclass App extends Component {\r\n  state = {\r\n    data: [],\r\n    loading: false,\r\n  };\r\n  handleFetch = () => {\r\n    console.log('loading');\r\n    this.setState({ loading: true });\r\n    fetchData(this.state.data.length).then(newData =>\r\n      this.setState(({ data }) => ({\r\n        loading: false,\r\n        data: data.concat(newData),\r\n      })),\r\n    );\r\n  };\r\n\r\n  loadMoreContent = () => (\r\n    <div\r\n      style={{\r\n        textAlign: 'center',\r\n        paddingTop: 40,\r\n        paddingBottom: 40,\r\n        border: '1px solid #e8e8e8',\r\n      }}\r\n    >\r\n      <Spin tip=\"Loading...\" />\r\n    </div>\r\n  );\r\n\r\n  render() {\r\n    return (\r\n      <Table\r\n        rowKey='key'  // 非常重要，请按你的数据列正确设置，否则滚动会出问题\r\n        loading={this.state.loading}\r\n        onFetch={this.handleFetch}\r\n        pageSize={100}\r\n        loadingIndicator={this.loadMoreContent()}\r\n        columns={columns}\r\n        scroll={{ y: 450 }}\r\n        dataSource={this.state.data}\r\n        bordered\r\n        debug\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\nReactDOM.render(\r\n    <App />,\r\n  document.getElementById('root')\r\n);\r\n```\r\n\r\n---\r\n## SumTable （无限滚动组件, 带合计行）\r\n\r\n![antd-table-infinity gif demo](./antd-table-infinity.gif)\r\n\r\n### 快速开始\r\n- `npm install antd-table-infinity`\r\n- `import { SumTable } from 'antd-table-infinity'`;\r\n- `import 'antd-table-infinity/index.css'`;\r\n\r\n### 使用方法\r\nantd-table-infinity 导出一个模块 `SumTable`, 它接收如下props:\r\n\r\nOption               | default       | Description              \r\n---------------------|---------------|-----------------------------------------------\r\n`loading`            |  false        | 表示加载状态，展示loading效果\r\n`loadingIndicator`   |  null         | 自定义一个react组件去展示loading动画，否则使用内置动画\r\n`onFetch`            |  noop         | 滚动到底部事件回调，Fetch数据: `function() => void`\r\n`pageSize`           |  30           | 表格实际render行数\r\n`sumData`            |  null         | 合计行数据\r\n`debug`              |  false        | 是否显示Debug console.log信息\r\n...                  |  ...          | 其它 Antd Table Props\r\n\r\n### 示例代码 \r\n``` javascript\r\nimport React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport { Spin } from 'antd';\r\nimport { SumTable as Table } from 'antd-table-infinity';\r\nimport { columns, fetchData } from './stories/Table/mockData';\r\nimport 'antd-table-infinity/index.css';\r\n\r\nclass App extends Component {\r\n  state = {\r\n    data: [],\r\n    loading: false,\r\n  };\r\n  handleFetch = () => {\r\n    console.log('loading');\r\n    this.setState({ loading: true });\r\n    fetchData(this.state.data.length).then(newData =>\r\n      this.setState(({ data }) => ({\r\n        loading: false,\r\n        data: data.concat(newData),\r\n      })),\r\n    );\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Table\r\n        rowKey='key'  // 非常重要，请按你的数据列正确设置，否则滚动会出问题\r\n        loading={this.state.loading}\r\n        onFetch={this.handleFetch}\r\n        pageSize={100}\r\n        sumData={sumData}\r\n        size=\"small\"\r\n        columns={columns}\r\n        scroll={{ x: 2500, y: 350 }}\r\n        dataSource={this.state.data}\r\n        bordered\r\n        debug\r\n      />\r\n    );\r\n  }\r\n}\r\n\r\n\r\nReactDOM.render(\r\n    <App />,\r\n  document.getElementById('root')\r\n);\r\n```\r\n---\r\n\r\n### 注意事项\r\n\r\n1. antd-table-infinity是基于Antd Table的上一层封装，因此使用的时候，确保你的项目已安装antd组件库\r\n- `import  { InfinityTable, SumTable, PageTable } 'antd-table-infinity'`; 只包含表格组件的代码\r\n- `import 'antd-table-infinity/index.css'`; 只包含PageTable、SumTable组件的css\r\n\r\n\r\n2. 如果你的项目没有安装 antd 组件库, 请使用全量打包文件\r\n- `import { InfinityTable, SumTable, PageTable } from 'antd-table-infinity/dist/index.js'`; 包含所有代码及使用到的antd相关组件的所有代码\r\n- `import 'antd-table-infinity/index.css'`; 只包含PageTable、SumTable组件的css\r\n- `import 'antd-table-infinity/dist/index.css'`; 包含使用到的antd相关组件的所有css\r\n\r\n3. 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)\r\n\u001b\r\n### 已发现问题\r\n\r\n- 当做单元格编辑功能的时候（如在input中连继输入字符，本质上是 Antd Table 接收新的props的反复渲染）,在开发模式下会存在性能问题，生产环境不会存在！主要是来自 HMR 和 Redux DevTools的性能消耗。","readmeFilename":"README.md"}