{"_id":"@bconnorwhite/antd-table-infinity","_rev":"2-3b97aa8fd1a5a1fc0abc1d6119997bfd","name":"@bconnorwhite/antd-table-infinity","dist-tags":{"latest":"1.1.6"},"versions":{"1.1.4":{"name":"@bconnorwhite/antd-table-infinity","version":"1.1.4","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:umi && yarn build:less","build:less":"lessc src/components/Table/index.less ./index.css","build:umi":"rimraf dist & DEBUG=umi:* HTML=none umi build","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/ConnorWhite/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.7.0","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":"2c36a67999c8ad92a5ec967b01986d403c62b9e5","homepage":"https://github.com/ConnorWhite/antd-table-infinity#readme","_id":"@bconnorwhite/antd-table-infinity@1.1.4","_nodeVersion":"13.5.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-QkndUnMP/PCwCMz5cx/1Aeuz0NllrpcsUoURH4fh1PjvpI5TtsIMtS+3r44mj7VeEuhlMz9GT/GTdlPCrao5IA==","shasum":"096ae3304b3ed6398524816d4f0b699a9b89eed9","tarball":"https://registry.npmjs.org/@bconnorwhite/antd-table-infinity/-/antd-table-infinity-1.1.4.tgz","fileCount":33,"unpackedSize":1600239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeLh19CRA9TVsSAnZWagAAvlMP/jQDqHAVpP6v+t5nFzlE\n9UydndO+XhZm/WpNKGQRrK5VZmbGpMMWJf+Ms0p4EGWCDcGwSYEXIK11fOkw\nDw+Bc3K6pqtUmcAsH6cvwnJl6VwgNysa4R2lUHsyJCHAG0WJ4j6wms8Sb3wx\nrlza+ZcOS6RI3lPu04TgmaTRZeCknVStd5GpYOgPgRQo7P3Ry6+lz76hObAs\nEnZvlhnLNx/PbTRLS19/3XMAK/u159kosUkXhXZFMmX5A3dpoB8x3YoQzcJu\nzXb2Gh0ttGB3PlAuy/bN42XGY7kAdWkjR0voAxB1x84C0ZRoX5cQZPlcgSRL\nifLnyH/ZIIfvxD91zXAM7sCcIoM5y30NtCzKSBjiPwCHq0zdJIXdg53/WvpD\n1cLO9aaHFEbAuDc0qABy2lSev1qjLFwT7BNWzVetW7PuIjuZLjArhY3HIYnz\nzV+xhZ/nzxC/i8KY72faCR0u1DYbcAIxM9k6BEAuUdQfKZ+lZFiQprK7qG5q\nE+ibkcxDefDBjSrE+5QTt3fwdTProKXhE59sblq2LZ9CKdEgMyW0eG2w4Cjn\nOF4z2RApVpwEx2BZlTMoRlxKFVwqrIMSyvHSB+y0glKr3VsI88PL62xM6e+g\nL/XiNclpc0akM/idyXcUJdj5zoxwF9o9BNttSMTy9fM8go6jhWNFsUv9WiGt\nFckw\r\n=mvm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJHK+xgEeI1GwS+EvC9hK61aAfIvKoYpzhe/HIF+JvagIhAIL+L53wHIP/YHSwv1QzRPeLtaa5s9/7+njNAJEuek0K"}]},"maintainers":[{"name":"bconnorwhite","email":"connor.bcw@gmail.com"}],"_npmUser":{"name":"bconnorwhite","email":"connor.bcw@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-table-infinity_1.1.4_1580080508753_0.5620589322321132"},"_hasShrinkwrap":false},"1.1.6":{"name":"@bconnorwhite/antd-table-infinity","version":"1.1.6","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:umi && yarn build:less","build:less":"lessc src/components/Table/index.less ./index.css","build:umi":"rimraf dist & DEBUG=umi:* HTML=none umi build","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/ConnorWhite/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":{"intersection-observer":"^0.11.0","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","antd-table-infinity":"^1.1.6","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":"c7db4a28448612afc77a72c6c632120d920debb3","homepage":"https://github.com/ConnorWhite/antd-table-infinity#readme","_id":"@bconnorwhite/antd-table-infinity@1.1.6","_nodeVersion":"14.9.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-tFCtYu2ccz5NaBQCSTUBCmkNTWEfJSJkYe0HpUpp9FmGpSmb9fAV1aI4IW8zrahtmyb0a+kZFW4f2s60lKty6w==","shasum":"965c390bff30dbbb7ba63339438d701d08bbcfd6","tarball":"https://registry.npmjs.org/@bconnorwhite/antd-table-infinity/-/antd-table-infinity-1.1.6.tgz","fileCount":33,"unpackedSize":1601900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWQMSCRA9TVsSAnZWagAAkfAQAI2tF4W4b3UaEVtkoiKa\nl4hYngp99lan8INmlsH3paEcgwqCNLKXsYrMSiBmjWi2qjh+8t3ZGbYQ5+fw\nnvVeHrS0UvoL6OylkizcqIFtun5zKctzkU3EwBSyGJe5MXcQLwHT5EIz9V7e\nrEKuTtd/ZfNeQvLDuggjYUYC16dKeMIgCLzbRuA2sz+aRcWIZBBkTU/e65du\nSaXESNs7vblyaaB/q7rfdmNqGt2P5p+6ztvR0mwgFRa3YlBXrPnrKOBkNYPU\n8Kr/tftAiFufhrWDSU/hmqIMZbBPXQMAdUUrjokOlldLD+I4D8WwK1NR9EnK\npeh4+Um5FKtlNSJKsKjXujxE0sLV5C9lWyUa0NaOCSvNbbx40C9iBVmhaMRD\nt+Oemo6ehwTfpsEXLx+wo9mH5ivbS8kcGTigRiRoHcAzikUgPywp+K7iQN+u\nLaVoIabWCQGwWxtIct4KFi29jp/EetvAuSqZDSzNu4oUjdr8DLhemg625CYm\nWhRKVVBqIm+WG5Jk3EbgVHcuzNgKgr6L2nmGtrNoyro9cxBCQ74lmKM+tSlN\nxQkLMdqpfZ2JBlDBGeikKvWwQBbpCxhrz1tvbrLIT7LejfdFrUgfWnT5F5RB\ne6CHqULOBJFbMHlTcTSnPfVBOxYbWpedjrjCz13fM7xRWCG60jCOG1ZXkhj4\nSeXE\r\n=Prg9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGGeDX2HELHICsWQSgSdz7AW/T5vkOmirHjX0IK11pmQIgY6a+HZ+Rs0gc5eZag5JSrCMzCwXETonZSv4dbJzTI4A="}]},"maintainers":[{"name":"bconnorwhite","email":"connor.bcw@gmail.com"}],"_npmUser":{"name":"bconnorwhite","email":"connor.bcw@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/antd-table-infinity_1.1.6_1599669009779_0.7215300575503654"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-26T23:15:08.711Z","1.1.4":"2020-01-26T23:15:08.927Z","modified":"2022-04-04T18:02:10.763Z","1.1.6":"2020-09-09T16:30:09.995Z"},"maintainers":[{"name":"bconnorwhite","email":"connor.bcw@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/ConnorWhite/antd-table-infinity#readme","keywords":["antd","table","infinity","virtual","scroll","loading","虚拟表格滚动","表格无限滚动加载"],"repository":{"type":"git","url":"git+https://github.com/ConnorWhite/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)\n\n# antd-table-infinity\n\n一个基于 Antd Table 的无限滚动加载表格组件，不同普通无限滚动方案，它使用了虚拟滚动技术，拥有无可比拟的高性能！\n\n>*--by 客如云（keruyun.com）前端团队*\n\n### **为什么会有这个库?**\n众所周知，Antd Table 组件只有翻页模式，我们需要将其改为滚动无限加载，但是 Antd Table 其本身是基于React.Component继承的，而非PureComponent，所以在大数据下存在严重的性能问题。\n\n基于虚拟滚动技术，我们实现了无论表格有多少数据，始终只render指定行数的表格，拥有了高性能滚动，理论上支持无限量数据，拥有最佳用户体验。\n\n本库稍加改动理论上也支任意第三方表格组件！\n\n### **运行演示**\n- `git clone https://github.com/Leonard-Li777/antd-table-infinity.git`\n- `yarn install`\n- `yarn run storybook`\n- check `localhost:9001`\n\n\n\n### **兼容说明**\n\n**自从 antd-table-infinity@1.1.0 添加了 [IntersectionObserver Polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill), 现在兼容所有主流浏览器！！！**\n\n~~由于使用了 IntersectionObserver 提高滚动监听性能，支持浏览器如下~~\n\n- ~~Chrome 51+~~\n- ~~Firefox 61+~~\n- ~~Edge 17+~~\n- ~~iOS Safari 不兼容~~\n\n使用了 React 新的 API getDerivedStateFromProps 等\n\n- React 16.4.0+\n\n\n\n### API 说明\n---\n\n# PageTable (分页无限滚动)\n\n### 快速开始\n---\n- `npm install antd-table-infinity`\n- `import { PageTable } from 'antd-table-infinity'`;\n- `import 'antd-table-infinity/index.css'`;\n\n### 使用方法\n---\nantd-table-infinity 导出一个模块 `PageTable`, 它接收如下props:\n\nOption | default | Description \n---------------------|---------------|-----------------------------------------------\n`loading` | false | 表示加载状态，展示loading效果\n`loadingIndicator` | null | 自定义一个react组件去展示loading动画，否则使用内置动画\n`onFetch` | noop | 加载数据，Fetch数据: `function({page, pageSize}) => void`\n`pageSize` | 30 | 每页数据行数\n`onScroll` | null | 滚动事件监听 `function(e) => void`\n`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, \n`bidirectionalCachePages` | Infinity | 1 ~ maxPage ，当前页附近双向缓存的页数，最小为1，最大为maxPage，Infinity相当于maxPage\n`total` | 0 | 数据总条数\n`dataSource` | undefined | 格式: [page, data], 当fetch成功，传递给组件的页码和数据\n`debug` | false | 是否显示Debug console.log信息\n... | ... | 其它 Antd Table Props\n\n### 示例代码\n---\n\n``` javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Spin } from 'antd';\nimport { PageTable as Table } from 'antd-table-infinity';\nimport { columns, fetchData } from './stories/Table/mockData';\n\nclass App extends Component {\n state = {\n page: 1,\n data: [],\n loading: false,\n };\n handleFetch = ({ page, pageSize }) => {\n console.warn('loading', { page, pageSize });\n\n const startIndex = (page - 1) * pageSize;\n\n this.setState({ loading: true });\n fetchData(startIndex, pageSize).then(data =>\n this.setState({\n loading: false,\n data,\n page,\n }),\n );\n };\n\n render() {\n const { page, data, loading } = this.state;\n\n return (\n \n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n```\n## InfinityTable （无限滚动组件）\n### 快速开始\n- `npm install antd-table-infinity`\n- `import { InfinityTable } from 'antd-table-infinity'`;\n\n### 使用方法\nantd-table-infinity 导出一个模块 `InfinityTable`, 它接收如下props:\n\nOption | default | Description \n---------------------|---------------|-----------------------------------------------\n`loading` | false | 表示加载状态，展示loading效果\n`loadingIndicator` | null | 自定义一个react组件去展示loading动画，否则使用内置动画\n`onFetch` | noop | 滚动到底部事件回调，Fetch数据: `function() => void`\n`pageSize` | 30 | 表格实际render行数\n`onScroll` | null | 滚动事件监听 `function(e) => void`\n`debug` | false | 是否显示Debug console.log信息\n... | ... | 其它 Antd Table Props\n\n### 示例代码 \n``` javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Spin } from 'antd';\nimport { InfinityTable as Table } from 'antd-table-infinity';\nimport { columns, fetchData } from './stories/Table/mockData';\n\nclass App extends Component {\n state = {\n data: [],\n loading: false,\n };\n handleFetch = () => {\n console.log('loading');\n this.setState({ loading: true });\n fetchData(this.state.data.length).then(newData =>\n this.setState(({ data }) => ({\n loading: false,\n data: data.concat(newData),\n })),\n );\n };\n\n loadMoreContent = () => (\n \n \n \n );\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n```\n\n---\n## SumTable （无限滚动组件, 带合计行）\n\n\n\n### 快速开始\n- `npm install antd-table-infinity`\n- `import { SumTable } from 'antd-table-infinity'`;\n- `import 'antd-table-infinity/index.css'`;\n\n### 使用方法\nantd-table-infinity 导出一个模块 `SumTable`, 它接收如下props:\n\nOption | default | Description \n---------------------|---------------|-----------------------------------------------\n`loading` | false | 表示加载状态，展示loading效果\n`loadingIndicator` | null | 自定义一个react组件去展示loading动画，否则使用内置动画\n`onFetch` | noop | 滚动到底部事件回调，Fetch数据: `function() => void`\n`pageSize` | 30 | 表格实际render行数\n`sumData` | null | 合计行数据\n`debug` | false | 是否显示Debug console.log信息\n... | ... | 其它 Antd Table Props\n\n### 示例代码 \n``` javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { Spin } from 'antd';\nimport { SumTable as Table } from 'antd-table-infinity';\nimport { columns, fetchData } from './stories/Table/mockData';\nimport 'antd-table-infinity/index.css';\n\nclass App extends Component {\n state = {\n data: [],\n loading: false,\n };\n handleFetch = () => {\n console.log('loading');\n this.setState({ loading: true });\n fetchData(this.state.data.length).then(newData =>\n this.setState(({ data }) => ({\n loading: false,\n data: data.concat(newData),\n })),\n );\n };\n\n render() {\n return (\n \n );\n }\n}\n\n\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n```\n---\n\n### 注意事项\n\n1. antd-table-infinity是基于Antd Table的上一层封装，因此使用的时候，确保你的项目已安装antd组件库\n- `import { InfinityTable, SumTable, PageTable } 'antd-table-infinity'`; 只包含表格组件的代码\n- `import 'antd-table-infinity/index.css'`; 只包含PageTable、SumTable组件的css\n\n\n2. 如果你的项目没有安装 antd 组件库, 请使用全量打包文件\n- `import { InfinityTable, SumTable, PageTable } from 'antd-table-infinity/dist/index.js'`; 包含所有代码及使用到的antd相关组件的所有代码\n- `import 'antd-table-infinity/index.css'`; 只包含PageTable、SumTable组件的css\n- `import 'antd-table-infinity/dist/index.css'`; 包含使用到的antd相关组件的所有css\n\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)\n\u001b\n### 已发现问题\n\n- 当做单元格编辑功能的时候（如在input中连继输入字符，本质上是 Antd Table 接收新的props的反复渲染）,在开发模式下会存在性能问题，生产环境不会存在！主要是来自 HMR 和 Redux DevTools的性能消耗。","readmeFilename":"README.md"}