[React] table.options.getCoreRowModel is not a function but getCoreRowModel is passed

[bnn1]

Hi guys. I'm building table component with react-table and chakra-ui, but I encountered an error and I don't know how to solve it.

My code is:

const Table = <T, V>({ isLoading, ...props }: CustomTableProps<T, V>) => {
  const modifiedProps = new Proxy(props, {
    get: (target, prop, receiver) => {
      if (prop === 'getCoreRowModel' && !target[prop]) {
        return getCoreRowModel()
      }
      if (prop === 'data' && !target[prop]) {
        return Array.from({ length: 20 })
      }
      return Reflect.get(target, prop, receiver)
    },
  }) as TableOptions<T>

  const table = useReactTable<T>(modifiedProps)

  const { rows } = table.getRowModel()

  return (
    <TableContainer>
      <ChakraTable>
        <TableCaption></TableCaption>
        <Thead>
          <Tr>
            <Th></Th>
          </Tr>
        </Thead>
        <Tbody>
          {rows.map((row) => (
            <Tr key={row.id}>
              <Skeleton isLoaded={!isLoading}>
                {row.getVisibleCells().map((cell) => (
                  <Td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </Td>
                ))}
              </Skeleton>
            </Tr>
          ))}
        </Tbody>
        <Tfoot></Tfoot>
      </ChakraTable>
    </TableContainer>
  )
}

When I load a page with a table I get error: "table.options.getCoreRowModel is not a function". If I console log modifiedProps.getCoreRowModel I can clearly see a function. The error only occurs when using proxy - if I instead use something like this it's all working:

...
const defaultProps = { getCoreRowModel: getCoreRowModel() }
const modifiedProps = deepmerge(defaultProps, props);
...

Is it a bug or am I doing something wrong?

[vinaystanch]

Same issue

[KevinVandy]

You're passing in the getCoreRowModel option wrong