динамически обновлять заголовки столбцов React-Table v7

Question

Мне нужна помощь в динамическом обновлении заголовков столбцов, поскольку мы передаем список столбцов в хуке useTable, для одного варианта использования необходимо обновить список заголовков столбцов, но я не вижу недавно добавленных столбцов.

Я попытался переопределить объект экземпляра allColumns, создав собственный крючок.

PFA codeandbox пример - 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>
);
}

Answer 1

Usetable Hooks использовали UseMemo для Memoization с зависимостями столбцов, в моем случае я изменяю только те же столбцы ссылочного массива, а usememo находит его Equal и, следовательно, не обновляет столбцы в таблице.

Решение 1 клонированная копия столбцов при передаче столбцов в таблицу.

Решение 2 Используемые столбцы в состоянии и затем обновляются после timeOut.

Ссылка https://www.digitalocean.com/community/tutorials/react-usememo