Array index as an accessorKey in ColumnDef does not work

[naavis]

Describe the bug

The TanStack documentation describes that you can use array indices as the accessorKey value if your data is in the form of nested arrays: https://tanstack.com/table/v8/docs/guide/column-defs#array-indices

However, if you do that, the library will crash when rendering the table.

Your minimal, reproducible example

https://codesandbox.io/s/hungry-breeze-50qbjx

Steps to reproduce

Create a table by calling useReactTable set the data to nested arrays, and use numbers as the accessorKeys. Below is a React component that reproduces it:

const Table =() => {
  const table = useReactTable({
    data: [
      ['Hello', 1, 2, 3],
      ['World', 4, 5, 6],
    ],
    columns: [
      { header: 'Name', accessorKey: 0 },
      { header: 'Col1', accessorKey: 1 },
      { header: 'Col2', accessorKey: 2 },
      { header: 'Col3', accessorKey: 3 },
    ],
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        <tr>
          {table.getFlatHeaders().map((header) => (
            <th key={header.id}>
              {header.isPlaceholder
                ? null
                : flexRender(header.column.columnDef.header, header.getContext())}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
});

Expected behavior

The table renders normally and does not crash.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11, Chrome 112.0.5615.121

react-table version

8.8.5

TypeScript version

No response

Additional context

As a workaround you can make a string out of the number, and the table works as expected. I.e. the following works fine:

columns: [
  { header: 'Name', accessorKey: '0' },
  { header: 'Col1', accessorKey: '1' },
  { header: 'Col2', accessorKey: '2' },
  { header: 'Col3', accessorKey: '3' }
]

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[fw6]

Hi buddy, your accessorKey type is incorrect. Just change it to a string.
accessorKey?: string & typeof TData

[naavis]

Hi! That is my point. The linked documentation says integers are fine: https://tanstack.com/table/v8/docs/guide/column-defs#array-indices So either the documentation is wrong or the code is wrong.

And I mentioned the type of the key under "Additional context" in my original post.

[C-Higgins]

This is still an issue. Additionally, when using the createColumnHelper, it will not accept string numbers like "0"; it only allows for actual numbers, which do not work.

[schardev]

Unfortunately, the issue still persists. I fixed it using an accessor function:

columnHelper.accessor((row) => row[0], { ... })

But it would be great if the maintainers update the documentation to help others avoid running into this bug