物料表的标题闪烁和冻结问题通过反应窗口+反应窗口无限加载程序实现

问题描述

我已经实现了带有反应窗口（基于#60）和实质性用户界面的无限滚动表。

该表格似乎已实现了主要目标，但与此相关的问题很少-

1. 尽管样式已经就位（stickyHeader道具），标题也没有停留在顶部。
2. 页眉闪烁/闪烁，同时快速向上滚动。 [重现步骤-向下滚动50％，然后快速向上滚动并观察页眉移动]。

这是codeandBox示例-https://codesandbox.io/s/react-window-with-table-elements-forked-huti6?file=/src/index.tsx:514-542

解决方法

为TableContainer overflow-x使用默认值，粘性标头应该起作用

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
  tableContainer: {
    overflowX: "initial"
  }
})

function Inner({ children,...rest },ref) {
  const { header,footer,top } = useContext(VirtualTableContext)
  const classes = useStyles();
  return (
    <TableContainer classes={{root: classes.tableContainer}} {...rest} ref={ref}>
    ...

,

作为Material UI docs的替代方案，有一个虚拟表的工作示例，该表可以使用react-virtualized来实现所需的功能。也就是说，标头是粘性的，滚动期间标头没有闪烁。

下面是一个代码框 包含一个可以反映您所需布局的有效示例。

{{3}}

,

首先介绍react-window：：react-window中的滚动条用于outercontainer，而不用于InnerContainer。现在，除非您想自己处理所有事情，否则不要尝试替换外部容器本身。所有滚动事件中还有更多内容附加到outercontainer。

想起来就像外部容器决定/获取大小，而较大的内部容器在内部滚动。

现在看一下您的情况，我假设您正在尝试使表的行为像其他任何固定了标头的表格一样，如果内容溢出，则滚动内容。您的表头在元素层次结构中比内部容器要低得多，因此您无法编写任何简单的CSS（或js逻辑）来在当前层次结构中实现。

这就是为什么即使您将stickyheader MaterialUI设置为table，它也不会停留。因为您的整个表格（MaterialUI table）在react-window的外部容器内滚动。

我建议您将表头移到react-window之外，仅将行放在react-widow中。这就是它的行为方式（即react窗口将其中的所有内容都视为可滚动的内容）。请参见下面的演示文稿之一：

有关重新设计table的小技巧（可以通过增加CSS来改善对齐方式）