update Column Headers dynamically React-Table v7

Question

i need help in updating columns headers dynamically , as we are passing columns list in useTable hook , for one usecase need to update columns headers list but i cant see newly added columns.

i tried by overiding allColumns instance obj by creating custom hook.

PFA codesandbox example - https://codesandbox.io/s/example-react-table-column-hide-show-5v712?file=/src/App.js

function App() {
 const [state, setState] = React.useState(false);
 setTimeout(() => {
  columns.push({
   Header: "Age",
   accessor: "age"
  });
  setState(true);
}, 5000);
const columns = React.useMemo(
 () => [
  {
    Header: "First Name",
    accessor: "firstName"
  },
  {
    Header: "Last Name",
    accessor: "lastName"
  }
 ],
[]
);
const data = React.useMemo(() => makeData(20), []);

return (
<Styles>
  <Table columns={columns} data={data} />
</Styles>
);
}

Welcome to SO, do share a little bit of code (in addition to codesandbox), so members can reproduce your problem — artfulbeest

Sachin Sachin · Accepted Answer · 2020-06-10T19:05:40

Usetable Hooks used UseMemo for Memoization with dependencies of columns , in my case i only mutating same reference array columns , and usememo find its Equal and so not updating columns in table .

Solution 1 cloned copy of columns while passing columns to table .

Solution 2 Used columns in state and then update after timeOut.

Ref-https://www.digitalocean.com/community/tutorials/react-usememo

update Column Headers dynamically React-Table v7

1 Answers