Material-ui: [docs]表已虚拟化

我们希望当前的API允许与react-virtualized进行简单集成。 我们愿意对实现进行任何更改，以使集成更简单。

在文档中有一个演示示例会很棒。

如果可以帮助您，那么这里是列表/菜单https://codesandbox.io/s/oQ0nkl5pk的集成示例

@oliviertassinari我在没有react-virtualized情况下做到了，因为那是一团糟，并且在mui组件上不能很好地工作。
此外，我当前的解决方案是具有动态表格高度和动态列宽度的纯CSS固定thead和可滚动tbody（也在Safari上进行了测试）。
带有可滚动tbody的永远在最前的主题是数据网格的必备条件。

我添加了滚动消除抖动，调整性能并修复了一些小故障，但是效果很好：我“虚拟”地渲染了大约2400行，非常平滑。

有关Table组件的问题：

1. 如何在MUI组件中使用ref ？ 我正在自动计算TableThead高度：问题是

<TableHead ref={ ref => this.tableThead = ref }>

不会返回TableThead的实际DOM容器元素，而是React实例（在非DOM元素上应用ref时React的本机行为），因为这应该在TableThead组件本身； 其他组件可能需要这样做，那么为什么在每个MUI组件上都没有一个refHandler ，它将在第一个呈现的元素中应用给定的回调？ （我希望我能通过@ _ @对此进行解释）
我当前的解决方案很奇怪

const theadHeight = ReactDOM.findDOMNode(this.tableThead).clientHeight; // eslint-disable-line react/no-find-dom-node

这意味着使用已弃用的findDomNode并同时禁用eslint。

1. 为什么将border-bottom应用于单元格而不是行？

2. 拥有stripe={true}道具自动剥离TableBody行怎么办？

3. 为什么.MuiIconButton.root具有zIndex样式的属性？ 🤔

我希望对此发表一些稳定的信息，以便您可以大致了解一下。

很抱歉打扰您，但是我大量使用mui @ next，所以我发现了很多用例！

我在没有进行react-virtualized的情况下就做到了，因为那是一团糟，并且在mui组件上不能很好地工作。

噢，那真是可耻。 知道我们能做些什么吗？

1. 您可以尝试innerRef获得对TableHead的引用。 ref将为您提供withStyles(TableHead)组件的参考。 如果这样不起作用，我们可以公开rootRef属性。 这是我们已经在使用的模式。

2. 没有线索

3. 条纹是什么意思？
4. 我已在＃7467中将其删除

~~噢，那真是可耻。

实际上是由react-virtualized自己的容器，本机table/thead/tbody DOM元素以及需要具有可滚动的tbody的问题混合而成的。
它需要太多的工作：只需为MuiTable制作临时解决方案就很容易了。

1. 公开rootRef会很棒（假设TableThead render方法中的Thead TableThead主要元素是Thead DOM元素本身）

2. 那么应该将border-bottom移到tr吗？ 我应该把这个问题专门讨论吗？

3. 我的意思是条纹行：使用like tr:nth-child(odd) { backgroundColor: f2f2f2很容易实现，但是由于我们已经有了方便的hover={true}着色，为什么不拥有方便的striped={true}呢？ :)

4. 大！

1. 👍听起来很计划，这里有一个例子，欢迎PR。
2. Bootstrap也在做同样的事情，我认为通过在TableCell上使用它可以提供更大的灵活性。
3. 因为它不在规范中，并且可以在userland上简单实现？
4. 👍

1. 我不确定在每个组件上仅具有ref={rootRef} 。
   使用它的开发人员可能（大部分）需要控制DOM。
   在您的示例中， <FormControl ref={rootRef} ...>将再次返回对React组件的引用（因为FormControl不是DOM元素），并将使开发人员使用我不得不使用的解决方法。
   也许我们应该让rootRef表现如下：

呈现组件的容器是DOM元素吗？

• 如果是，则在其上应用ref={rootRef}
• 否则在其上应用rootRef={rootRef} =>它将传播到第一个DOM元素：这样，编码器将始终具有真实的DOM引用

我能想到的所有解决方案都具有muiRef和rootRef属性，其中前者将回调应用于“ mui component”容器（如果有），而后者将回调应用于我之前说过。
这样，开发人员可以轻松地同时拥有MUI引用和DOM引用（无论他需要什么，只要他需要）。
您认为这有意义吗？

1. 真？ @ _ @

2. 行动！ 我总是忘记材料规格

1. 哦，我还没有考虑过这种情况。 您所指的问题如下：
2. 组件A具有ref和rootRef属性
3. React拦截ref并将其应用于元素
4. 组件B接收rootRef属性，并将其作为引用应用到根组件C
5. React拦截此ref并将其应用于元素

但是，如果组件C也具有rootRef属性怎么办？
组件A可以位于用户区域，组件B可以是TextField，而组件C可以是FormControl。

所以我的回答是，起初我们引入rootRef作为简单的帮助器。 我们还没有实现工业化。 因此，我认为当前行为具有确定性，简单性，并且不受您描述的限制的影响，如果人们对访问底层dom元素感兴趣，则可以使用findDOMNode API。

@damianobarbati是否在此处提到的虚拟列表？

我猜listComponent = TableBody，itemComponent = TableRow？

我已经开始了这个项目，该项目使用了您可能感兴趣的Material 1.0的react-virtualized。

https://github.com/techniq/mui-table

这项工作仍在进行中（请参阅https://github.com/techniq/mui-table/blob/master/TODO.md），但可能对您有用。 缺少文档，但请看一下故事以了解如何使用它。

@techniq这看起来很有希望😄！ 我认为最好在某个时候修改表文档部分：
-https://github.com/DevExpress/devextreme-reactive~~ （商业许可）

• https://github.com/gregnb/mui-datatables
• https://github.com/techniq/mui-table

我们也可以将其添加到https://material-ui-next.com/discover-more/related-projects/#material-ui-specific-projects部分。
因此，让我们知道项目何时更成熟。 我认为我们可以接受拉动请求以促进该项目:)。

我已经在这里完成了react-virtual-list的PR， https：//github.com/clauderic/react-tiny-virtual-list/pull/30允许它与material-ui一起使用。 我努力使react-virtual能够工作并创建有效的HTML，因为它具有div的硬编码。

抄送： @kgregory

@eyn很好！ 我刚刚使用react-virtualized和material-ui完成了无限滚动表的实现。 我希望很快就能总结出来。 当我这样做时，我会将其链接到此问题的任何将来的访问者，并可能在文档中作为示例。

@kgregory您完成了要点吗？ 我仍在寻找虚拟化Material UI表的基本解决方案，而且不容易找到……这将是很大的帮助！

感谢您的工作！

@neofox不，对不起。 我从不回避它，但您的回覆是一个很好的提醒。 我会尝试找时间把一些东西放在一起。

@oliviertassinari您的示例中的第一个注释中的一个应该显示如何将材料列表与react虚拟化列表一起使用不起作用。 你还有那个例子吗？

@rolandjitsu对不起，我没有任何例子。 这就是这个问题的实质。

@oliviertassinari知道了。 我以为这个问题是关于桌子的，而不是<List> ，还是涵盖了列表？

@rolandjitsu列表，表格，纸张，网格列表。 这都一样。 这个问题是关于添加一个简单的演示，以便人们可以看到该模式并将其应用于不同的组件。 该表是您可能需要虚拟化的组件。

@oliviertassinari ，如果您能指出正确的方向，我想material-ui @ next与react-virtualized集成在一起？

@ hassan-zaheer是的，我认为在表docs页面末尾进行带有react-virtualized的简单演示可以解决问题:)。

你好在研究我的项目时碰巧偶然发现了这个线程。 我想知道关于演示或使用文档是否有任何更新？ @kgregory或您能否提供结合这两者的任何见解？ 使桌子看起来与风格连贯会很好

@ zd-project您可以看一下我的mui-virtualized-table项目。

它曾经是mui-table，但我决定分叉2并支持不同的用例（ mui-table直接利用DOM并允许您使用position: sticky和<table>布局之类的东西（行/列跨度，自动宽度等）难以通过虚拟反应来实现。

话虽如此， mui-virtualized-table刚刚添加了一个不错的PR调整大小的列。

这个家伙在哪儿？

@techniq ，感谢mui-virtualized-table ！ 这很棒！ 我们是否有可能将其合并到mui-org/material-ui ？

如果有人打开一个向文档介绍演示的PR，我会很高兴。 这样，我们可以检查是否可以改进表API，以更好地与虚拟化策略集成。

@mastertinner为什么我们需要将其添加到核心？ 虚拟化是一种优化策略。 并非每个人都提供大型数据集，因此我不会给每个人的数据包增加负担。

@mastertinner我们可以从在文档中引用它的项目开始，例如在这里：https:

👍听起来像是计划

@mastertinner虽然我仍然使用它（需要虚拟化时），但是当我不需要虚拟化时我也使用我的新mui-table ，并且可以利用dom（使用table ， tr ， td ，或用于布局的CSS网格，除去显式列宽度等的需要），并使一些先进的图案像的多个position: sticky报头（象此）

@rogerstorm用30美元资助了这个问题。 在IssueHunt上查看

决定今天就玩这个游戏，我不推荐😭这是到目前为止我制作的内容：

请原谅滞后，我的笔记本电脑不是很好👎它使用Material-UI组件和react-virtualized组件

@joshwooding我已经完成了与您完全相同的操作，即虚拟化+固定标头（仅滚动条位于主体上） 。 如果您的实现使用两个单独的<Table> s，那么我认为您会遇到与我发现的问题相同的问题。

• 材质的对齐道具（例如numeric ）不起作用，因为您可能会使用<div>类的组件在<TableCell>内进行布局。
• 您可以为td和tr提供css属性以使其正确虚拟化。 无法将height或max-height赋予td和tr而材料的<TableCell>具有其自身的填充，边距，因此固定行的高度很难。

好吧，关键是<TableCell>内部的组件是不可避免的。 我想知道您是否以一种优雅的方式解决了这个问题。 如果没有，我认为虚拟化+固定标头（仅在主体上具有滚动条）很难是一个很小的（与它的功能一样小的），定义明确的组件。

@worudso当前它仅使用一个<Table>我需要找到一种方法来传递数字向下，但我也许能够使它工作。 它绝对不是一个很小的组件，我的代码仍然遍布整个地方，但是我将继续研究它，看看是否可以对其进行优化

我创建了一个沙箱，用来演示如何使用material-ui和react-virtualized生成虚拟表。 此特定示例使用react-virtualized将Table的大小调整为窗口的高度。

该要点中还提供了示例中的MuiVirtualizedTable组件。

MuiVirtualizedTable可以接受Table支持的任何道具。 rowClassName不直接应用，而是除MuiVirtualizedTable定义的其他样式外应用。

columns道具需要一个对象数组，在为每一列渲染单元格时使用。 每个对象都可以接受Column支持的任何支持。

很抱歉，我花了这么长时间。 我一直很忙

仅供参考，现在还有react-window ，应该是react-virtualized后继者。 万一有人想尝试那个。

@kgregory感谢您共享codeandbox。

@joshwooding很棒的演示。 拥有固定的标题非常好:)。 希望您能够完成实施！ 关于数字转发，是什么使您无法直接应用到单元格上？ 反应窗口与反应虚拟化

@oliviertassinari我已经为自己设定了使用Table组件的API的目标，现在看来您无法通过Column组件传递自定义道具。 尽管可能有一些方法可以不使用反应虚拟化的方法

@joshwooding您尝试过https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrenderer吗？

@oliviertassinari我已经尝试过使用HeaderRowRenderer，但是您似乎无法在不操纵现有道具的情况下通过它传递自定义道具，因为这就是创建要传递到headerRenderer的列的方法：

const renderedHeader = headerRenderer({ columnData, dataKey, disableSort, label, sortBy, sortDirection, });

@oliviertassinari对于固定高度的表格，您可以稍微编辑@kgregory的演示： https : //codesandbox.io/s/6vo8y0929k

@joshwooding看起来很棒！ 我想不出什么让它成为正式演示的地方。

@issuehuntfest已为此问题资助了60美元。 在IssueHunt上查看

@oliviertassinari我将致力于实现这一点:)

@joshwooding已提交拉取请求。 在IssueHunt上查看

@oliviertassinari已奖励在IssueHunt上查看

• ：moneybag：总存款：$ 90.00
• ：tada：存储库奖励（0％）：$ 0.00
• ：扳手：服务费（10％）：$ 9.00

@oliviertassinari已奖励

应得的。 做得好@joshwooding！

我有类似的需求，但对于列表组件...是否可以使用相同的方法来使列表正常工作？

@mdizzy是的，我们可以为列表添加类似的演示。

我现在正在尝试使用react-window将列表虚拟化（因为如果您不需要完整的API，创建者建议使用它代替虚拟化，但是最后，列表的API并没有真正改变那么多）

到目前为止，我有两个大问题：
1）列表项样式已损坏，尤其是对于诸如右图标/操作之类的东西。 我想虚拟列表注入样式不能与material-ui的样式很好地配合
2）粘性子标题也确实很乱，可能是出于相同的原因（反应窗口使用绝对位置来布置项目）

我可能会尝试进行虚拟反应，看看它们是否可以更好地协同工作

@MastroLindus我假设您首先尝试了我们的虚拟化演示？

@oliviertassinari我以自己的方式开始，发现了我上面描述的问题，用

然后，我发现了有关虚拟化演示的信息，检查了它的代码，发现这基本上就是我自己所做的事情（仅适用于表而不是列表）。

我的问题与列表有关。 总体概念是可行的，但是诸如图标，操作，粘性标题之类的东西无法正常工作。
详细来说，请参考上述评论中的两点：
第1个问题可能是react-window的问题，而react-virtualized不会出现。 我将在今天或明天尝试时尽快通知您。 也许我们很幸运，并且它将与react-virtualized一起使用。 让我们来看看。
问题2（粘性子标题无法正常工作）我认为无论如何这都需要临时解决方案，因为它们的位置可能会造成冲突。 有人为类似的问题构建了https://github.com/marchaos/react-virtualized-sticky-tree （具有对粘性标头的react-virtualized处理），但是我现在没有时间研究它

@MastroLindus我们对https://next.material-ui.com/demos/tables/#virtualized -table有什么问题？

@oliviertassinari没有。
我指定的问题仅针对虚拟列表，而不是虚拟表。 （再次：很抱歉，我正在写有关表虚拟化的问题，没有关于虚拟化列表的问题，我正在关注@mdizzy的评论）

关于列表：使用ListItemSecondaryAction，ListItemIcon和ListSubheader（带有粘性标头）似乎不起作用，因为它们的位置混乱了。
如果没有这些组件，我将获得一个可以使用react-window的基本列表（我想在react-virtualized中也可以做到这一点）

@MastroLindus我认为您可以将讨论移至＃15149。