Multiple tables with react-virtualized

Question

I want to display multiple tables on a page. In between I want a "header" and "footer" row that spans the entire page width. Like so:

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

Is this possible with react-virtualized?

Right now I am working on making it like a react-virtualized List and then just render it all as different divs.

score 0 · Answer 1 · answered Oct 17 '18 at 14:26

If you do it with different (multiple) tables - you just add another to your page. But if you need synchronize scroll for tables you can use this example from official site. (adapted a little for your case).

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>

) }

Multiple tables with react-virtualized

1 Answers1