Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

custom Data within expanding example Crashing browser

Abierto
#5,162 7 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
48/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Ejecuta el CodeSandbox enlazado y compara la versión funcional con useState con la versión que pasa los datos personalizados directamente a useReactTable. Empieza por la estructura de los datos, getSubRows y la configuración del ejemplo de expanding. Se considera completado cuando los datos anidados personalizados ya no provocan el bloqueo del navegador y el comportamiento de la tabla expanding sigue siendo utilizable.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
28.4k
Forks
3.6k
Merge medio
1 d 14 h
PR fusionados (30 d)
4

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/table

Todos los issues de TanStack/table

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.