From e4263666c2bdfeac57b1a6bb7e4e852bc398faf1 Mon Sep 17 00:00:00 2001
From: Joao Pedro Henrique <joao.pedro.hsd@gmail.com>
Date: Tue, 2 May 2023 09:42:37 -0300
Subject: [PATCH] fix: coerce accessor key to string during render

---
 .../react-table/__tests__/core/core.test.tsx  | 70 +++++++++++++++++--
 packages/table-core/src/core/column.ts        |  2 +-
 packages/table-core/src/types.ts              |  2 +-
 3 files changed, 65 insertions(+), 9 deletions(-)

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()
+                        )}
                     </th>
                   ))}
                 </tr>
@@ -160,10 +160,7 @@ describe('core', () => {
                     <th key={header.id} colSpan={header.colSpan}>
                       {header.isPlaceholder
                         ? null
-                        : flexRender(
-                            header.column.columnDef.footer,
-                            header.getContext()
-                          )}
+                        : flexRender(header.column.columnDef.footer, header.getContext())}
                     </th>
                   ))}
                 </tr>
@@ -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>
+          <thead data-testid="thead">
+            <tr>
+              {table.getFlatHeaders().map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody data-testid="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>
+      )
+    }
+
+    RTL.render(<Table />)
+
+    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<TData extends RowData, TValue>(
     ...columnDef,
   } as ColumnDefResolved<TData>
 
-  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<UnionToIntersection<ColumnDef<TData, TValue>>> & {
-  accessorKey?: string
+  accessorKey?: string | number
 }
 
 export interface Column<TData extends RowData, TValue = unknown>