Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

custom Data within expanding example Crashing browser

Offen
#5,162 7 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
48/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Führe die verknüpfte CodeSandbox aus und vergleiche die funktionierende useState-Version mit der Version, die die benutzerdefinierten Daten direkt an useReactTable übergibt. Beginne mit der Datenstruktur, getSubRows und der Konfiguration des expanding-Beispiels. Als abgeschlossen gilt die Aufgabe, wenn die benutzerdefinierten verschachtelten Daten den Browser nicht mehr zum Absturz bringen und das Verhalten der expanding-Tabelle weiterhin nutzbar bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.
Vorherrschende Sprache
TypeScript
Sterne
28.5k
Forks
3.6k
Ø Merge
1 T. 14 Std.
Gemergte PRs (30 T.)
4

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/table

Alle Issues in TanStack/table

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.