TanStack / table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table
https://tanstack.com/table
MIT License
25.11k stars 3.07k forks source link

Cannot read properties of undefined (reading 'rows') #5098

Open ghost opened 1 year ago

ghost commented 1 year ago

Describe the bug

Cannot read properties of undefined (reading 'rows') with basic example on github

const defaultData = [ { firstName: "tanner", lastName: "linsley", age: 24, visits: 100, status: "In Relationship", progress: 50, }, { firstName: "tandy", lastName: "miller", age: 40, visits: 40, status: "Single", progress: 80, }, { firstName: "joe", lastName: "dirte", age: 45, visits: 20, status: "Complicated", progress: 10, }, ];

const columns = [ columnHelper.accessor("firstName", { cell: (info) => info.getValue(), footer: (info) => info.column.id, }), columnHelper.accessor((row) => row.lastName, { id: "lastName", cell: (info) => {info.getValue()}, header: () => Last Name, footer: (info) => info.column.id, }), columnHelper.accessor("age", { header: () => "Age", cell: (info) => info.renderValue(), footer: (info) => info.column.id, }), columnHelper.accessor("visits", { header: () => Visits, footer: (info) => info.column.id, }), columnHelper.accessor("status", { header: "Status", footer: (info) => info.column.id, }), columnHelper.accessor("progress", { header: "Profile Progress", footer: (info) => info.column.id, }), ];

const table = useReactTable({ defaultData, columns, state: { columnPinning, }, getCoreRowModel: getCoreRowModel(), });

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.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() )}

Your minimal, reproducible example

local

Steps to reproduce

Basic example

Expected behavior

Work

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Windows latest Edge Chromium

react-table version

8.10.3

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

nick-tw commented 1 year ago

you have

const table = useReactTable({ defaultData, columns, state: { columnPinning, }

try this instead: const table = useReactTable({ data:defaultData, columns, state: { columnPinning, },

yannicksaenen commented 7 months ago

I have the same issue, did you find a solution?

uppuluriaditya commented 5 months ago

I have faced the same issue earlier and answer by nick-tw worked. Thanks