-1

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 :)

0 Answers0