table icon indicating copy to clipboard operation
table copied to clipboard

Cannot read properties of undefined (reading 'rows')

Open ghost opened this issue 1 year ago • 3 comments

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

  • [X] I agree to follow this project's Code of Conduct
  • [X] 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.

ghost avatar Sep 27 '23 16:09 ghost

you have

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

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

nick-tw avatar Oct 22 '23 01:10 nick-tw

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

yannicksaenen avatar Mar 22 '24 07:03 yannicksaenen

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

uppuluriaditya avatar May 18 '24 09:05 uppuluriaditya