{"id":13805421,"url":"https://github.com/Leonard-Li777/antd-table-infinity","last_synced_at":"2025-05-13T19:31:07.402Z","repository":{"id":57180649,"uuid":"147159427","full_name":"Leonard-Li777/antd-table-infinity","owner":"Leonard-Li777","description":"An infinite scroll component based on antd-table that supports virtual scrolling","archived":false,"fork":false,"pushed_at":"2020-02-18T11:11:21.000Z","size":14558,"stargazers_count":285,"open_issues_count":29,"forks_count":47,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-15T19:51:32.198Z","etag":null,"topics":["antd","infinity-scroll","pagetable","react","table","virtual-scroll"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Leonard-Li777.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-03T06:10:52.000Z","updated_at":"2024-11-04T21:01:45.000Z","dependencies_parsed_at":"2022-09-26T17:00:42.129Z","dependency_job_id":null,"html_url":"https://github.com/Leonard-Li777/antd-table-infinity","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leonard-Li777%2Fantd-table-infinity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leonard-Li777%2Fantd-table-infinity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leonard-Li777%2Fantd-table-infinity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Leonard-Li777%2Fantd-table-infinity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Leonard-Li777","download_url":"https://codeload.github.com/Leonard-Li777/antd-table-infinity/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225254332,"owners_count":17445163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","infinity-scroll","pagetable","react","table","virtual-scroll"],"created_at":"2024-08-04T01:01:00.966Z","updated_at":"2024-11-18T21:31:12.786Z","avatar_url":"https://github.com/Leonard-Li777.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Components"],"sub_categories":["Themes"],"readme":"中文 | [English](./README_en.md)\n\n# antd-table-infinity\n\n一个基于 Antd Table 的无限滚动加载表格组件，不同普通无限滚动方案，它使用了虚拟滚动技术，拥有无可比拟的高性能！\n\n\u003e*--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![antd-table-infinity gif demo](./antd-table-infinity-page-table.gif)\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}) =\u003e void`\n`pageSize`           |  30           | 每页数据行数\n`onScroll`           |  null         | 滚动事件监听 `function(e) =\u003e void`\n`pagination`        |  { defaultCurrent: 1 } |  antd 组件 Pagination, 但仅接受如下Props: \u003cbr/\u003eposition: oneOf(['both', 'top', 'bottom']),\u003cbr/\u003eclassName: string,\u003cbr/\u003edefaultCurrent: number,\u003cbr/\u003ehideOnSinglePage: bool,\u003cbr/\u003eitemRender: func,\u003cbr/\u003eshowQuickJumper: bool,\u003cbr/\u003eshowTotal: func,\u003cbr/\u003esimple: bool,\u003cbr/\u003esize: string,\u003cbr/\u003eonChange: 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 }) =\u003e {\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 =\u003e\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      \u003cTable\n        rowKey='key'  // 非常重要，请按你的数据列正确设置，否则滚动会出问题\n        className=\"custom-classname\"\n        pagination={{\n          position: 'both',\n          defaultCurrent: 21,\n          className: 'custom-classname-pagination',\n        }}\n        loading={loading}\n        onFetch={this.handleFetch}\n        pageSize={100}\n        bidirectionalCachePages={1}\n        total={5000}\n        dataSource={[page, data]}\n        columns={columns}\n        scroll={{ x: 2500, y: 650 }}\n        bordered\n        debug\n      /\u003e\n    );\n  }\n}\n\nReactDOM.render(\n    \u003cApp /\u003e,\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() =\u003e void`\n`pageSize`           |  30           | 表格实际render行数\n`onScroll`           |  null         | 滚动事件监听 `function(e) =\u003e 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 = () =\u003e {\n    console.log('loading');\n    this.setState({ loading: true });\n    fetchData(this.state.data.length).then(newData =\u003e\n      this.setState(({ data }) =\u003e ({\n        loading: false,\n        data: data.concat(newData),\n      })),\n    );\n  };\n\n  loadMoreContent = () =\u003e (\n    \u003cdiv\n      style={{\n        textAlign: 'center',\n        paddingTop: 40,\n        paddingBottom: 40,\n        border: '1px solid #e8e8e8',\n      }}\n    \u003e\n      \u003cSpin tip=\"Loading...\" /\u003e\n    \u003c/div\u003e\n  );\n\n  render() {\n    return (\n      \u003cTable\n        rowKey='key'  // 非常重要，请按你的数据列正确设置，否则滚动会出问题\n        loading={this.state.loading}\n        onFetch={this.handleFetch}\n        pageSize={100}\n        loadingIndicator={this.loadMoreContent()}\n        columns={columns}\n        scroll={{ y: 450 }}\n        dataSource={this.state.data}\n        bordered\n        debug\n      /\u003e\n    );\n  }\n}\n\nReactDOM.render(\n    \u003cApp /\u003e,\n  document.getElementById('root')\n);\n```\n\n---\n## SumTable （无限滚动组件, 带合计行）\n\n![antd-table-infinity gif demo](./antd-table-infinity.gif)\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() =\u003e 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 = () =\u003e {\n    console.log('loading');\n    this.setState({ loading: true });\n    fetchData(this.state.data.length).then(newData =\u003e\n      this.setState(({ data }) =\u003e ({\n        loading: false,\n        data: data.concat(newData),\n      })),\n    );\n  };\n\n  render() {\n    return (\n      \u003cTable\n        rowKey='key'  // 非常重要，请按你的数据列正确设置，否则滚动会出问题\n        loading={this.state.loading}\n        onFetch={this.handleFetch}\n        pageSize={100}\n        sumData={sumData}\n        size=\"small\"\n        columns={columns}\n        scroll={{ x: 2500, y: 350 }}\n        dataSource={this.state.data}\n        bordered\n        debug\n      /\u003e\n    );\n  }\n}\n\n\nReactDOM.render(\n    \u003cApp /\u003e,\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的性能消耗。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeonard-Li777%2Fantd-table-infinity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLeonard-Li777%2Fantd-table-infinity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLeonard-Li777%2Fantd-table-infinity/lists"}