Reactjs 具有虚拟化的react的多个表

我想在一个页面上显示多个表。在这两者之间，我想要一个“页眉”和“页脚”行，跨越整个页面宽度。像这样：

<div>Some header text here</div>
<table>
    ....
</table>
<div>Some footer text here</div>
<div>Some header text here</div>
<table>
    ....
</table>
<div>Some footer text here</div>
<div>Some header text here</div>
<table>
    ....
</table>
<div>Some footer text here</div>

这里有一些标题文本
....
这里有一些页脚文本
这里有一些标题文本
....
这里有一些页脚文本
这里有一些标题文本
....
这里有一些页脚文本

react虚拟化是否可能实现这一点

---

现在，我正在将其制作成一个react虚拟化列表，然后将其全部呈现为不同的div。

如果使用不同的（多个）表，则只需将另一个表添加到页面中即可。 但若你们需要同步表格的滚动，你们可以在官方网站上使用这个例子。（根据您的情况稍作调整）

从'react virtualized'导入{Grid，List，ScrollSync}
导入“react virtualized/styles.css”；//只需要导入一次
功能渲染（道具）{
返回(
{（{clientHeight，clientWidth，onScroll，scrollHeight，scrollLeft，scrollTop，scrollWidth}）=>(
)}

) }

import { Grid, List, ScrollSync } from 'react-virtualized'
import 'react-virtualized/styles.css'; // only needs to be imported once

function render (props) {
  return (
    <ScrollSync>
      {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
      <div className='Table'>
        <div className='LeftColumn'>
          <List
            scrollLeft={scrollLeft}
          {...props}
        />
      </div>
      <div className='RightColumn'>
        <Grid
          onScroll={onScroll}
          {...props}
        />
      </div>
    </div>
  )}
</ScrollSync>