app.jsx

import React, { Component } from 'react';
import { Grid, ScrollSync, AutoSizer } from 'react-virtualized';
import 'react-virtualized/styles.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className='Table' style={{width: 600, height: 400}}>
          <AutoSizer>
            {({ width, height }) =>
              <ScrollSync>
                {({ onScroll, scrollLeft }) => (
                  <div>
                    <div className='TableHeader'>
                      <Grid
                        scrollLeft={scrollLeft}
                        style={{overflowX: 'hidden'}}
                        width={width}
                        height={30}
                        columnWidth={200}
                        rowHeight={30}
                        columnCount={100}
                        rowCount={1}
                        cellRenderer={({ columnIndex, isScrolling, rowIndex }) => `H${columnIndex}`}
                      />
                    </div>
                    <div className='TableData'>
                      <Grid
                        onScroll={onScroll}
                        width={width}
                        height={height-30}
                        columnWidth={200}
                        rowHeight={30}
                        columnCount={100}
                        rowCount={100}
                    cellRenderer={({ columnIndex, isScrolling, rowIndex }) => `C${rowIndex}:${columnIndex}`
                      />
                    </div>
                  </div>
                )}
              </ScrollSync>
            }
          </AutoSizer>
        </div>
      </div>
    );
  }
}