table.js

import React from 'react';
import TablesComp from '../../components/TablesComp';
import OptionStrikeCol from '../../components/OptionStrikeCol';
import { optionColumnNames } from './tableData';
import Grid from '@material-ui/core/Grid';
import { useSelector } from 'react-redux';
import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';

const OptionChainTable = () => {

  const displayColSelect = false;
  const callsRowData = useSelector((state) => state.expiryInstrument.callRowData)
  const putsRowData = useSelector((state) => state.expiryInstrument.putsRowData)

  return (
    <ScrollSync>
      <Grid container spacing={0}>
        <Grid item xs={6}>
          <ScrollSyncPane group="horizontal">
            <div style={{overflow: 'auto'}}>
            <TablesComp
              columnsNames={optionColumnNames}
              rowDatas={callsRowData}
              display={displayColSelect}
              name="call"
            />
            </div>
          </ScrollSyncPane>
        </Grid>
        <Grid item xs={1} >
          <OptionStrikeCol />
        </Grid>
        <Grid item xs={5}>
          <ScrollSyncPane group="horizontal">
            <div style={{overflow: 'auto'}}>
            <TablesComp
              columnsNames={optionColumnNames}
              rowDatas={putsRowData}
              display={displayColSelect}
              name="put"
            />
            </div>
          </ScrollSyncPane>
        </Grid>
      </Grid>
    </ScrollSync>
  );
};

export default OptionChainTable;