TanStack
custom Data within expanding example Crashing browser
Describe the bug
Hi,
I've taken this example: https://tanstack.com/table/v8/docs/examples/react/expanding
Removed things like the search filter and some extra debug but beside that I didn't change how expanding works.
For testing purposes I went and made my own data. A simple json and to be as close to the example as possible I print out data and put that in its own object and removed the useState data and I'm just passing the object with its subRows directly to useReactTable. When doing that the browser will crash. I'm brand new to TanStack and may not be understanding how subRows works but I feel like this shouldn't be crashing when I pass it the object when all it takes is any[](Ideally this should thrown an error but not sure where it's getting stuck in almost a loop, this is an assumption).
This however, does not crash if I pass the object to the useState(initialize).
Here is the sandbox
To be more specific, in the sandbox I have where it works and where it doesn't. To highlight where it doesn't:
const data = [
{
"firstName": "Daryl",
"lastName": "Rutherford",
"age": 15,
"visits": 945,
"progress": 46,
"status": "single",
"subRows": [
{
"firstName": "Kobe",
"lastName": "Lakin",
"age": 20,
"visits": 308,
"progress": 19,
"status": "single",
"subRows": [
{
"firstName": "Edyth",
"lastName": "Klocko",
"age": 38,
"visits": 362,
"progress": 29,
"status": "single"
},
{
"firstName": "Alayna",
"lastName": "Stroman",
"age": 11,
"visits": 120,
"progress": 25,
"status": "single"
},
{
"firstName": "Carolyn",
"lastName": "Rowe-Hammes",
"age": 14,
"visits": 14,
"progress": 77,
"status": "relationship"
}
]
},
{
"firstName": "Cassandre",
"lastName": "Hudson",
"age": 27,
"visits": 488,
"progress": 65,
"status": "relationship",
"subRows": [
{
"firstName": "Cade",
"lastName": "Hartmann-Effertz",
"age": 22,
"visits": 901,
"progress": 93,
"status": "single"
},
{
"firstName": "Pietro",
"lastName": "Yost",
"age": 7,
"visits": 731,
"progress": 99,
"status": "complicated"
},
{
"firstName": "Payton",
"lastName": "Kessler",
"age": 26,
"visits": 851,
"progress": 83,
"status": "complicated"
}
]
},
{
"firstName": "Nels",
"lastName": "Kunde",
"age": 6,
"visits": 307,
"progress": 52,
"status": "complicated",
"subRows": [
{
"firstName": "Nikki",
"lastName": "Hackett",
"age": 9,
"visits": 518,
"progress": 44,
"status": "single"
},
{
"firstName": "Cornell",
"lastName": "Gulgowski",
"age": 27,
"visits": 810,
"progress": 60,
"status": "complicated"
},
{
"firstName": "Jordan",
"lastName": "Bode",
"age": 26,
"visits": 15,
"progress": 93,
"status": "relationship"
}
]
},
{
"firstName": "Alberta",
"lastName": "Heaney",
"age": 20,
"visits": 15,
"progress": 57,
"status": "complicated",
"subRows": [
{
"firstName": "Braxton",
"lastName": "Kuvalis",
"age": 11,
"visits": 366,
"progress": 93,
"status": "relationship"
},
{
"firstName": "Elyssa",
"lastName": "Rolfson",
"age": 30,
"visits": 144,
"progress": 39,
"status": "relationship"
},
{
"firstName": "Jennyfer",
"lastName": "Altenwerth",
"age": 28,
"visits": 200,
"progress": 30,
"status": "single"
}
]
},
{
"firstName": "Bertrand",
"lastName": "Shields",
"age": 40,
"visits": 733,
"progress": 20,
"status": "complicated",
"subRows": [
{
"firstName": "Liliane",
"lastName": "Hudson",
"age": 38,
"visits": 649,
"progress": 85,
"status": "single"
},
{
"firstName": "Jevon",
"lastName": "Lemke",
"age": 32,
"visits": 5,
"progress": 89,
"status": "relationship"
},
{
"firstName": "Donavon",
"lastName": "Zemlak",
"age": 11,
"visits": 20,
"progress": 62,
"status": "complicated"
}
]
}
]
}
]
const table = useReactTable({
data,
columns,
state: {
expanded,
},
onExpandedChange: setExpanded,
getSubRows: row => row.subRows,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getExpandedRowModel: getExpandedRowModel(),
debugTable: true,
})
// etc .....
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/confident-boyd-przwfd?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cloyw4otq000b356hisiifrwr%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cloyw4otp0003356h0ybmt814%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cloyw4otq0008356hc0hfqnik%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cloyw4otq000a356hjk6r9kry%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cloyw4otp0003356h0ybmt814%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cloyw4otp0002356h7q2ak4ya%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522cloyw4otp0003356h0ybmt814%2522%252C%2522activeTabId%2522%253A%2522cloyw4otp0002356h7q2ak4ya%2522%257D%252C%2522cloyw4otq000a356hjk6r9kry%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cloyw4otq0009356hce6oqi2i%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5176%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cloyw4otq000a356hjk6r9kry%2522%252C%2522activeTabId%2522%253A%2522cloyw4otq0009356hce6oqi2i%2522%257D%252C%2522cloyw4otq0008356hc0hfqnik%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cloyw4otq0004356h9xu1efl9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522cloyw4otq0005356h28uf1vza%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522build%2522%257D%252C%257B%2522id%2522%253A%2522cloyw4otq0006356hn7bkxz9e%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522serve%2522%257D%252C%257B%2522id%2522%253A%2522cloyw4otq0007356hp0sbtyfs%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%255D%252C%2522id%2522%253A%2522cloyw4otq0008356hc0hfqnik%2522%252C%2522activeTabId%2522%253A%2522cloyw4otq0004356h9xu1efl9%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
Steps to reproduce
- Uncomment Line 302 - 483 and comment out 117-299
Expected behavior
I expect it to work because I'm still passing an array. But if this isn't correct then I'd expect an error.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Linux & codesandbox
react-table version
8.10.7
TypeScript version
4.8.4
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.
I'm struggling with the same issue. I have a UI where I do some updates where when I select a row I want it to only render that selected row.
I tried this and it crashes every time.
useReactTable({
data: selectedRow ? [selectedRow] : data || [],
columns: myColumns,
getCoreRowModel: getCoreRowModel(),
});
use the useMemo() hook for passing data when we trigger any state variable that changes on the page. Changing the state variable causes re-render and don't know why the useReactTable hook is initialized to re-render all the configurations we make on the table. You can watch the debugger if your change causes anything like that by adding debugAll: true on useReactTable().
if this is the issue, passing data in the following may help you.
const table = useReactTable({
data: React.useMemo(() => data, [data]),
columns,
getCoreRowModel: getCoreRowModel(),
})
