I made a button to try and change the header
based on language, but when i click it, the table wont re-render, what am I doing wrong? :/
const englishHeaderOptions = ['english'..etc]
const frenchHeaderOptions = ['french',..etc]
const [headerOptions, setHeaderOptions] = useState(englishHeaderOptions);
const [columns, setColumns] = useState(regularColumns);
const regularColumns = useMemo(
() => [
{
accessorKey: 'Company',
header: headerOptions[0]
},
{...
}
], [headerOptions]);
const changeToEnglishHeaders = () => {
setHeaderOptions(englishHeaderOptions);
};
const changeToFrenchHeaders = () => {
setHeaderOptions(frenchHeaderOptions);
};
return(
<MenuItem onClick={() => { handleCloseMenu(); changeToEnglishHeaders();}}>English</MenuItem>
<MenuItem onClick={() => { handleCloseMenu(); changeToFrenchHeaders();}}>French</MenuItem>
<MaterialReactTable
columns={columns}
data={data}
enableHiding={false}>
)
I tried the above and expected the column headings to change but nothing did. When I console log "headerOptions", it shows me what I want to see but it doesn't appear on the page. HALP!
Please be kind, I'm new :)