feat: horizontal virtual

[linxianxi]

ref: https://github.com/ant-design/ant-design/discussions/48656

需要 rc-virtual-list 支持下这个 https://github.com/react-component/virtual-list/pull/265

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 0:59am

[yoyo837]

好强！ 会丢失component.header的支持吗？

[linxianxi]

好强！ 会丢失component.header的支持吗？

header 的虚拟没做，因为 Virtual Table 是上层，还改不了 Table 里的 header，应该要 Table 开口子才行，header 就一行不虚拟影响也不大，可以慢慢支持

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 97.35683% with 6 lines in your changes are missing coverage. Please review.

Project coverage is 97.93%. Comparing base (6d3796a) to head (df413af). Report is 7 commits behind head on master.

:exclamation: Current head df413af differs from pull request most recent head 2c2ac79

Please upload reports for the commit 2c2ac79 to get more accurate results.

Files	Patch %	Lines
src/VirtualTable/useHorizontalVirtual.ts	94.00%	6 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1112      +/-   ##
==========================================
- Coverage   97.97%   97.93%   -0.05%     
==========================================
  Files          51       53       +2     
  Lines        4681     4880     +199     
  Branches      594      629      +35     
==========================================
+ Hits         4586     4779     +193     
- Misses         91       97       +6     
  Partials        4        4              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[nia3y]

@linxianxi 如果支持了 horizontal 虚拟滚动会出现一个问题：如果第一次渲染的 cell 高度为 50px，向右滚动，第二次渲染出来的cell 高度为 100px，那么 row 的整体高度会出现变化 50px -> 100px。

例如，修改下 virtual.tsx demo 中的 data：

const data: RecordType[] = new Array(4 * 10000).fill(null).map((_, index) => ({
  a: `a${index}`,
  b: `b${index}`,
  c: `c${index}`,
  d: index,
  bk: (
    <strong>
      <div>HelloHelloHelloHelloHelloHelloHelloHelloHelloHello</div>
      <div>HelloHelloHelloHelloHelloHelloHelloHelloHelloHello</div>
    </strong>
  ),
  indexKey: `${index}`,
  // children: [
  //   {
  //     indexKey: `${index}-1`,
  //   },
  //   {
  //     indexKey: `${index}-2`,
  //   },
  // ],
}));

当水平支持虚拟滚动时，常见的方案是暴露一个 rowHeight 属性，固定 row 的高度。例如：agGrid 的实现：https://www.ag-grid.com/react-data-grid/row-height/

[linxianxi]

@nia3y 你说的这个高度变化不是垂直方向的虚拟滚动吗？跟水平方向的有什么关系

[nia3y]

@nia3y 你说的这个高度变化不是垂直方向的虚拟滚动吗？跟水平方向的有什么关系

你可以跑一下 demo：

[linxianxi]

@nia3y 不用提供 rowHeight 属性，两种方案

onRow={(record, index) => ({ style: { height: 100 } })}
// or
onRow={(record, index) => ({ style: { minHeight: 100 } })}