[v6] Externalize columns data array

[raszkiewicz]

I'm trying to create a generic "one-table-to-display-all" view based on a data provided from the parent component to the component where react-table is used.

First piece which I was looking to externalize was columns array data set which simple will decide on how UI is going to look.

I had it set in the main code for the component where react-table was used as

const columns = useMemo(
    () => [
        {
            Header: state => (
                <input
                    type="checkbox"
                    checked={allToggled}
                    onChange={() => handleToggleAll(allToggled)}
                />
            ),
            className: "text-center sticky",
            headerClassName: "react-table-header-checkbox sticky",
            width: 35,
            sortable: false,
            Cell: row => (
                <input
                    type="checkbox"
                    checked={toggled[row.index]}
                    onChange={() => handleToggle(row.index)}
                />
            )
        },

        {
            Header: () => headerName("Last Name", "lastName"),
            accessor: "lastName",
            filterable: false,
            className: "text-center tblLastName",
            headerClassName: "react-table-header-class tblLastName",
            width: getColumnWidth(data, 'lastName',  "Last Name"),
            sortable: true
        },
        {
            Header: () => headerName("First Name", "firstName"),
            accessor: "firstName",
            filterable: false,
            className: "text-center tblFirstName",
            headerClassName: "react-table-header-class tblFirstName",
            width: getColumnWidth(data, 'firstName',  "First Name"),
            sortable: true
        },
       ....
    ]
);

which was working fine but when I have moved that part as a child component and then tried to import it to the parent component with the react-table as

const columns = useMemo(
   () => tblColumns(data, sortByValue, sortByOrder, toggled, setToggled, allToggled, setAllToggled, setSelected))

bu it was complaining about missing states like data or allToggled etc in the "externalized" component.

My question is if this approach is possible if so what I have missed?

[raszkiewicz]

I have solved that problem as

I was not able to find perfect solution but workaround mentioned below was good enough for me to achieve what I was looking for.

I have created common table headers index file which contains all locations for table headers:

tableHeaders.jsx

let tablelHeaders = {};

tableHeaders['propA'] = require('../tableA/tableAheaders.jsx').default;
tableHeaders['propB'] = require('../tableB/tableBheaders.jsx').default;
tableHeaders['propC'] = require('../tableB/tableCheaders.jsx').default;
...
tableHeaders['propX'] = require('../tableX/tableXheaders.jsx').default;

export default tableHeaders

and then in the view for the main component specify prop for that:

<MyTable tableHeaders="propA" />

and in the MyTable component access it as require instead of import

MyTable.jsx:

import tableHeaders from "tableHeaders.jsx;

....


const tableColumns = tablelHeaders[props.tableHeaders];

Hope it will helps someone else or somebody else will came up with better solution.