diff --git a/packages/react-table/tests/core/core.test.tsx b/packages/react-table/tests/core/core.test.tsx index d6f8e76178..ce95c9044d 100644 --- a/packages/react-table/tests/core/core.test.tsx +++ b/packages/react-table/tests/core/core.test.tsx @@ -1,3 +1,4 @@ +import '@testing-library/jest-dom/vitest' import * as React from 'react' import { describe, expect, it } from 'vitest' import { act, renderHook } from '@testing-library/react-hooks' @@ -263,4 +264,66 @@ 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 [data] = React.useState<[string, string, number][]>(() => [ + ['Tanner', 'Linsley', 29], + ]) + const [columns] = React.useState[]>( + () => [ + { header: 'First Name', accessorKey: 0 }, + { header: 'Last Name', accessorKey: 1 }, + { header: 'Age', accessorKey: 2 }, + ] + ) + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + }) + + return ( + + + + {table.getFlatHeaders().map(header => ( + + ))} + + + + {table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => ( + + ))} + + ))} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ ) + } + + RTL.render() + + const thead = RTL.screen.getByTestId('thead') + expect(RTL.within(thead).getByText(/first name/i)).toBeInTheDocument() + expect(RTL.within(thead).getByText(/last name/i)).toBeInTheDocument() + expect(RTL.within(thead).getByText(/age/i)).toBeInTheDocument() + + const tbody = RTL.screen.getByTestId('tbody') + expect(RTL.within(tbody).getByText(/tanner/i)).toBeInTheDocument() + expect(RTL.within(tbody).getByText(/linsley/i)).toBeInTheDocument() + expect(RTL.within(tbody).getByText(29)).toBeInTheDocument() + }) }) diff --git a/packages/table-core/src/core/column.ts b/packages/table-core/src/core/column.ts index 97ee3e68d4..15912a3659 100644 --- a/packages/table-core/src/core/column.ts +++ b/packages/table-core/src/core/column.ts @@ -75,7 +75,10 @@ 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 26bf47939e..6768d6f8d0 100644 --- a/packages/table-core/src/types.ts +++ b/packages/table-core/src/types.ts @@ -334,7 +334,7 @@ export type ColumnDefResolved< TData extends RowData, TValue = unknown, > = Partial>> & { - accessorKey?: string + accessorKey?: string | number } export interface Column