Несколько таблиц с реагирующей виртуализацией

Question

Я хочу отобразить несколько таблиц на странице. Между ними я хочу строки «верхний и нижний колонтитулы», которые занимают всю ширину страницы. Вот так:

<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>

Возможно ли это при реагирующей виртуализации?

Сейчас я работаю над тем, чтобы сделать его похожим на реагирующе-виртуализированный список, а затем просто отображаю его как разные элементы div.

Answer 1

Если вы делаете это с разными (несколькими) таблицами - вы просто добавляете другую на свою страницу. Но если вам нужна синхронизация прокрутки для таблиц, вы можете использовать этот пример с официального сайта. (адаптировано немного для вашего случая).

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>

) }