I am using Tabulator with React using the react-tabulator module.
I have used 'ref' for the table component and call actions like downloading data or whatever it may be.
import React, { Suspense, useEffect, useReducer, useRef } from 'react';
import PropTypes from 'prop-types';
import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";
import {Button } from 'react-bootstrap';
import { ReactTabulator, reactFormatter } from "react-tabulator";
import { reducer } from '../common/reducer';
import ChangeStaffCompetency from './ChangeStaffCompetency';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
window.jspdf = jsPDF;
const luxon = require('luxon');
window.DateTime = luxon.DateTime;
// Initial states of StaffCompetency
const initialState = {
changeStaffCompetencyShow: false,
staffID: "",
workflowName: "",
competentTasks: "",
competencyEditorRow: null,
};
const StaffCompetency = (props) => {
// State Handling
const [state, dispatch] = useReducer(reducer, initialState);
// Reference for the tabulator
let staffCompetencyTableRef = useRef(null);
// Action to download workloads data as 'JSON'
const downloadAsJSON = () => {
staffCompetencyTableRef.current.download("json", "RTP_Staff_Competencies.json");
}
/***
* ALL OTHER CODE
*/
return (
<>
<h3 className="text-center"> Staff Competency </h3>
<div>
<Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
</div>
<div style={{clear: 'both'}}></div>
<br></br>
<ReactTabulator
onRef={(r) => (staffCompetencyTableRef = r)}
columns={staffCompetencyTableCoumns}
options={staffCompetencyTableOptions}
/>
<ChangeStaffCompetency
show={state.changeStaffCompetencyShow}
onHide={() => dispatch({ type: "changeStaffCompetencyShow", value: false })}
staffID= {state.staffID}
workflowName= {state.workflowName}
competentTasks= {state.competentTasks}
api={props.api}
parentCallback = {handleCallback}
/>
</>
);
}
StaffCompetency.propTypes = {
api: PropTypes.object.isRequired
};
export default StaffCompetency;
ChangeStaffCompetency
is a react-bootstrap modal component which is used as a custom editor to edit the contents of the cell.
staffCompetencyTableRef
works fine on the first render but it becomes null
on rerendering; for instance when I open and close the ChangeStaffCompetency
modal.
How would I resolve this?
Thanks