diff --git a/packages/react-table/__tests__/core/core.test.tsx b/packages/react-table/__tests__/core/core.test.tsx
index 802b07d076..8e690a820f 100644
--- a/packages/react-table/__tests__/core/core.test.tsx
+++ b/packages/react-table/__tests__/core/core.test.tsx
@@ -131,9 +131,9 @@ describe('core', () => {
{header.isPlaceholder
? null
: flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
+ header.column.columnDef.header,
+ header.getContext()
+ )}
))}
@@ -160,10 +160,7 @@ describe('core', () => {
{header.isPlaceholder
? null
- : flexRender(
- header.column.columnDef.footer,
- header.getContext()
- )}
+ : flexRender(header.column.columnDef.footer, header.getContext())}
|
))}
@@ -264,4 +261,63 @@ describe('core', () => {
expect(rowModel.flatRows.length).toEqual(3)
expect(rowModel.rowsById['2']?.original).toEqual(defaultData[2])
})
+
+ it('renders the table if accessorKey is an array index', () => {
+ const Table = () => {
+ const table = useReactTable({
+ data: [
+ ['Hello', 'World', 'Just', 'Testing'],
+ ],
+ columns: [
+ { header: 'Name', accessorKey: 0 },
+ { header: 'Col1', accessorKey: 1 },
+ { header: 'Col2', accessorKey: 2 },
+ { header: 'Col3', accessorKey: 3 },
+ ],
+ getCoreRowModel: getCoreRowModel(),
+ });
+
+ return (
+
+
+
+ {table.getFlatHeaders().map((header) => (
+ |
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+ |
+ ))}
+
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+ | {flexRender(cell.column.columnDef.cell, cell.getContext())} |
+ ))}
+
+ ))}
+
+
+ )
+ }
+
+ RTL.render()
+
+ const thead = RTL.screen.getByTestId("thead")
+ expect(RTL.within(thead).getByText(/name/i)).toBeInTheDocument()
+ expect(RTL.within(thead).getByText(/col1/i)).toBeInTheDocument()
+ expect(RTL.within(thead).getByText(/col2/i)).toBeInTheDocument()
+ expect(RTL.within(thead).getByText(/col3/i)).toBeInTheDocument()
+
+ const tbody = RTL.screen.getByTestId("tbody")
+ expect(RTL.within(tbody).getByText(/hello/i)).toBeInTheDocument()
+ expect(RTL.within(tbody).getByText(/world/i)).toBeInTheDocument()
+ expect(RTL.within(tbody).getByText(/just/i)).toBeInTheDocument()
+ expect(RTL.within(tbody).getByText(/testing/i)).toBeInTheDocument()
+ })
})
diff --git a/packages/table-core/src/core/column.ts b/packages/table-core/src/core/column.ts
index 9d25215d5c..96738fc947 100644
--- a/packages/table-core/src/core/column.ts
+++ b/packages/table-core/src/core/column.ts
@@ -32,7 +32,7 @@ export function createColumn(
...columnDef,
} as ColumnDefResolved
- const accessorKey = resolvedColumnDef.accessorKey
+ const accessorKey = typeof resolvedColumnDef.accessorKey !== 'undefined' ? String(resolvedColumnDef.accessorKey) : undefined
let id =
resolvedColumnDef.id ??
diff --git a/packages/table-core/src/types.ts b/packages/table-core/src/types.ts
index 3487c535db..3a75e7a5dd 100644
--- a/packages/table-core/src/types.ts
+++ b/packages/table-core/src/types.ts
@@ -283,7 +283,7 @@ export type ColumnDefResolved<
TData extends RowData,
TValue = unknown
> = Partial>> & {
- accessorKey?: string
+ accessorKey?: string | number
}
export interface Column