custom Data within expanding example Crashing browser
Les mainteneurs répondent en général sous 1 jour
Personne n'a encore pris cette issue.
Évaluation
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Accessibilité débutants
- 48/100
- Type d'issue
- Bug
- Clarté
- Plutôt claire
- Activité
- Calme
- Stack technique
- react, typescript
- Domaine
- frontend
Piste de recherche
Exécutez le CodeSandbox lié et comparez la version fonctionnelle utilisant useState avec la version qui transmet directement les données personnalisées à useReactTable. Commencez par la structure des données, getSubRows et la configuration de l’exemple expanding. Le travail est terminé lorsque les données imbriquées personnalisées ne font plus planter le navigateur et que le comportement de la table expanding reste utilisable.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Description
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
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
- 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.
- Langage dominant
- TypeScript
- Étoiles
- 28.5k
- Forks
- 3.6k
- Merge moyen
- 2 j 3 h
- PR mergées (30 j)
- 3
Préparer son environnement
- Aucun Dockerfile ni fichier Docker Compose
- Propose un modèle de pull request
- Lire le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Autres issues de TanStack/table
-
Difficulté 1/5 Moins d'une heure Accessibilité débutants 78/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 4/5 3-5 jours Accessibilité débutants 38/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 5/5 Plus d'une semaine Accessibilité débutants 35/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 3/5 1-2 jours Accessibilité débutants 78/100
Les mainteneurs répondent en général sous 1 jour
-
Difficulté 5/5 Plus d'une semaine Accessibilité débutants 35/100
TanStack/table#6577 · 6 commentaires ·
Les mainteneurs répondent en général sous 1 jour
Toutes les issues de TanStack/table
Issues similaires
-
refactor
Difficulté 2/5 Une demi-journée Accessibilité débutants 84/100
Les mainteneurs répondent en général sous 5 jours
-
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
OHDSI/Data2Evidence#3450 ·
Les mainteneurs répondent en général sous 2 jours
-
e2e-failure ready-to-code
Difficulté 2/5 1-3 heures Accessibilité débutants 90/100
redhat-developer/rhdh-plugin-export-overlays#4011 · 1 commentaire ·
Les mainteneurs répondent en général sous 1 jour
-
automation missing-model model-sync provider:ofox
Difficulté 2/5 1-3 heures Accessibilité débutants 72/100
anomalyco/models.dev#8421 ·
Les mainteneurs répondent en général sous 1 jour
-
SlackAdapter and TelegramAdapter are not assignable to Adapter under exactOptionalPropertyTypesOuverte
Difficulté 2/5 1-3 heures Accessibilité débutants 76/100
Les mainteneurs répondent en général sous 1 jour