react-table: hooks.visibleColumns undefined

Question

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
selectedFlatRows,
state: { selectedRowIds }} = useTable(
{
  columns: COLUMNS,
  data: testdata,
},
useRowSelect,
(hooks) => {
  hooks.visibleColumns.push((columns) => [
    {
      id: "selection",

      Header: ({ getToggleAllRowsSelectedProps }) => (
        <div>
          <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
        </div>
      ),
Cell: ({ row }) => (
        <div>
          <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
        </div>
      )
    },
    ...columns
  ]);
}

);

the code above results in Uncaught TypeError: Cannot read properties of undefined (reading 'push') because somehow hooks.visibleColumns is undefined. I'm using react inside of a rails app so idk if that might be causing any issues, but besides the hooks part everything seems to be working normal. Any idea on how I can fix this?

Any help is appreciated

score 1 · Answer 1 · answered Jul 05 '22 at 13:38

I think you should add return after push() below:

(hooks) => {   
    hooks.visibleColumns.push((columns) => {
    return [
    {
      id: "selection",

      Header: ({ getToggleAllRowsSelectedProps }) => (
        <div>
          <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
        </div>
      ), Cell: ({ row }) => (
        <div>
          <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
        </div>
      )
    },
    ...columns   ]; }); }

react-table: hooks.visibleColumns undefined

1 Answers1