Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Table support virtual #44349

Merged
merged 14 commits into from Aug 28, 2023
Merged

feat: Table support virtual #44349

merged 14 commits into from Aug 28, 2023

Conversation

zombieJ
Copy link
Member

@zombieJ zombieJ commented Aug 22, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

👀 Preview

https://preview-44349-ant-design.surge.sh/components/table-cn#components-table-demo-virtual-list

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English 🔥 Table support virtual props.
🇨🇳 Chinese 🔥 Table 支持 virtual 属性开启虚拟滚动。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

🚀 Summary

🤖 Generated by Copilot at e77224e

This pull request adds virtual scrolling support to the Table component using the RcVirtualTable component from the rc-table library. It also updates the documentation, the demo, and the styles for the Table component to reflect this new feature. Additionally, it renames the RcTable.tsx file to index.tsx and demonstrates a tooltip bug with virtual scrolling.

🔍 Walkthrough

🤖 Generated by Copilot at e77224e

  • Import RcVirtualTable component from RcTable subdirectory and use it conditionally based on virtual prop in InternalTable.tsx (link,link,link,link)
  • Add virtual prop to TableProps interface and pass it to InternalTable component in InternalTable.tsx (link,link)
  • Use useToken hook to get theme token object and calculate listItemHeight based on table size in InternalTable.tsx (link,link)
  • Add renderTimes prop to RcVirtualTable component and use custom shouldUpdate function to trigger update when data or columns change in VirtualTable.tsx (link)
  • Import genVirtualStyle function from virtual.ts and call it in genTableStyle function in index.ts (link,link)
  • Add table cell selector to genSizeStyle function in size.ts and index.ts (link,link)
  • Export genVirtualStyle function that generates CSS object for virtual table styles in virtual.ts (link)
  • Update dependency version of rc-table library in package.json (link)
  • Update documentation and demo for virtual list in table component (link,link,link,link)
    • Change description of virtual list demo and add version attribute to code block in virtual-list.md (link)
    • Replace code for virtual list demo and use built-in virtual prop and InternalTable component in virtual-list.tsx (link)
    • Add version attribute to virtual list demo code block in index.en-US.md and index.zh-CN.md (link,link)
  • Modify basic demo in tooltip component to demonstrate a bug with virtual table (link)
    • Add long title, bottom placement, and open prop to tooltip component in basic.tsx (link)

@stackblitz
Copy link

stackblitz bot commented Aug 22, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 22, 2023

package.json Show resolved Hide resolved
@github-actions
Copy link
Contributor

github-actions bot commented Aug 28, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 393.09 KB (+2.34 KB 🔺)
./dist/antd-with-locales.min.js 452.19 KB (+2.53 KB 🔺)

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 28, 2023

请教为啥 RcTable 没有直接支持 virtual 而是多一个 VirtualTable 导出的形式呢?🤔️

@zombieJ
Copy link
Member Author

zombieJ commented Aug 28, 2023

请教为啥 RcTable 没有直接支持 virtual 而是多一个 VirtualTable 导出的形式呢?🤔️

因为本质上还是通过 components 接口自定义了 body 部分,并不是直接在 Table 上改的。

@socket-security
Copy link

Removed dependencies detected. Learn more about Socket for GitHub ↗︎

🚮 Removed packages: @types/react-window@1.8.5, react-window@1.8.9

@argos-ci
Copy link

argos-ci bot commented Aug 28, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 16 changes Aug 28, 2023, 8:34 AM

@codecov
Copy link

codecov bot commented Aug 28, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (4a896e9) 100.00% compared to head (5961dd4) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #44349   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          668       670    +2     
  Lines        11325     11349   +24     
  Branches      3062      3067    +5     
=========================================
+ Hits         11325     11349   +24     
Files Changed Coverage Δ
components/table/RcTable/index.tsx 100.00% <ø> (ø)
components/table/style/index.ts 100.00% <ø> (ø)
components/table/style/size.ts 100.00% <ø> (ø)
components/table/InternalTable.tsx 100.00% <100.00%> (ø)
components/table/RcTable/VirtualTable.tsx 100.00% <100.00%> (ø)
components/table/style/virtual.ts 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@yoyo837
Copy link
Contributor

yoyo837 commented Aug 28, 2023

请教为啥 RcTable 没有直接支持 virtual 而是多一个 VirtualTable 导出的形式呢?🤔️

因为本质上还是通过 components 接口自定义了 body 部分,并不是直接在 Table 上改的。

那既然是分开的, 能做到没有 virtual 时 bundle 小一点吗(少导入东西)?

@zombieJ
Copy link
Member Author

zombieJ commented Aug 28, 2023

那既然是分开的, 能做到没有 virtual 时 bundle 小一点吗(少导入东西)?

那 API 上就会比较麻烦,index 里变成 export { Table, VirtualTable }。不能 <Table virtual />。理论上来说,antd 是上层封装,它通过属性透出,降低开发者的使用成本。如果像 rc-table 里一样使用就会比较裸。是个权衡问题。

@zombieJ zombieJ changed the title [WIP] feat: Table support virtual feat: Table support virtual Aug 28, 2023
@zombieJ zombieJ marked this pull request as ready for review August 28, 2023 08:52
@x8845723
Copy link

x8845723 commented Sep 13, 2023

virtual再加上表格的行合并,样式就错乱了,有更新计划吗?动态生成的dom中rowspan属性都没有携带,本地没办法handle

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants