0

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

1 Answer 1

1

I solved the issue by changing the type of my useRef variable (staffCompetencyTableRef) to const and used the property of const variables to do my work.

const StaffCompetency = (props) => {

    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);
    
    // Reference for the tabulator
    const 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.current = r.current)}
                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}
            />
        </>
    );
}

It kind of feels like a trick. If anyone knows a better approach, please do comment.

Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.