Multiple Handsontables

multiple_handsontables.jsx

// Main component
const DocumentsPageComponent = ({session}) => {
  const [activeEditor, setActiveEditor] = useState();

  const editor1 = useEditor({
    extensions,
    content: '',
    onFocus: ({ editor }) => {
      if (editor.isFocused) {
        setActiveEditor(editor1);
      }
    },
 });

  const editor2 = useEditor({
    extensions,
    content: '',
    onFocus: ({ editor }) => {
      if (editor.isFocused) {
        setActiveEditor(editor2);
      }
    },
 });

  const table1Ref = useRef(null);
  const table1Data = [
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
  ];

  const table2Ref = useRef(null);
  const table2Data = [
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
  ];

  return (
    <CommonPageWrapper>
      <Stack direction="column" alignItems="center" flex={1}>
        <Box sx={{backgroundColor: 'white', width: 950, height: '100vh', padding: 3}}>
          <Toolbar editor={activeEditor || editor1} />

          <DocumentTable data={table1Data} tableRef={table1Ref} />
          <EditorContent editor={editor1} />
          <DocumentTable data={table2Data} tableRef={table2Ref} />
          <EditorContent editor={editor2} />
        </Box>
      </Stack>
    </CommonPageWrapper>
  );
}

const mapStateToProps = (state) => {
  return {
    session: state.session,
  }
}

export default connect(mapStateToProps)(withRequiredAuthInfo(DocumentsPage));

//---------------------------------------------------------------------------------------------------------------
// Document Table (Handsontable component)
import React, { useState, useEffect, useRef } from 'react';
import { HotTable } from '@handsontable/react';
import './DocumentTableCellTypes';

const _ = require('lodash');

const DocumentTable = ({data, tableRef}) => {
  const [tableData, setTableData] = useState(data);

  useEffect(() => {
    setTableData(data); // Update table data when props change
  }, [data]);

  // https://handsontable.com/docs/javascript-data-grid/api/options/
  const TWO_PERIOD_CONFIG = {
    autoWrapCol: true,
    autoWrapRow: true,
    className: 'htLeft htMiddle',
    colWidths: [455, 185, 30, 185],
    columns: [
      { type: 'labelCell' },
      { type: 'valueCell' },
      { type: 'paddingCell' },
      { type: 'valueCell' },
    ],
    contextMenu: true,
    customBorders: true,
    data: tableData,  // binding to data here
    fillHandle: false,
    fixedRowsTop: 1,
    height: 'auto',
    licenseKey: 'non-commercial-and-evaluation',
    manualRowMove: true,
    minCols: 4,
    minRows: 4,
    rowHeaders: false,
    rowHeights: 36,
    tabNavigation: false,
  };

  // setting ref here
  return (
    <HotTable ref={tableRef} settings={TWO_PERIOD_CONFIG} />
  )
}

export default DocumentTable;