Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

custom Data within expanding example Crashing browser

Aperta
#5,162 7 commenti 2 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Esegui il CodeSandbox collegato e confronta la versione funzionante che usa useState con la versione che passa i dati personalizzati direttamente a useReactTable. Inizia dalla forma dei dati, da getSubRows e dalla configurazione dell'esempio expanding. Il lavoro è completato quando i dati annidati personalizzati non causano più il crash del browser e il comportamento della tabella expanding rimane utilizzabile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
  1. 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
  • I agree to follow this project's Code of Conduct
  • 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.
Lingua principale
TypeScript
Stelle
28.5k
Fork
3.6k
Merge medio
1g 14h
PR unite (30g)
4

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/table

Tutte le issue di TanStack/table

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.