T
TanStack•3y ago
absent-sapphire

React Table v7 - Expanded rows

Hello, I have implemented expandable rows in my react component with 2 levels nesting; something along the lines of rounds > groups > matches So what i ended up having is a table rendering rows of individual rounds, and whenever i click one it will expand and a row of the relevant group will show up and so on Let's say i am already at the match row level; The way i'm capturing its id is by doing as follows: row.original.id - What i would also like to do is capture its parent rows ids, in which case it's the relevant group and round id. How do i that? Thanks in advance~
1 Reply
absent-sapphire
absent-sapphireOP•3y ago
TL;DR: how do i get access to the parent row's data if i click on a sub-row? For future reference, here's the solution i came up with. 
      const grandParentRowIndex = row.id.split('.').slice(0, -2).join('.') // string
      const grandParentRow = rowsById[grandParentRowIndex] // Row || undefined;
      const grandParentRowId = grandParentRow?.original.id // string || undefined

      const parentRowIndex = row.id.split('.').slice(0, -1).join('.') // string
      const parentRow = rowsById[parentRowIndex] // Row || undefined;
      const parentRowId = parentRow?.original.id // string || undefined

      const currentRowId = row.original.id // string
      const grandParentRowIndex = row.id.split('.').slice(0, -2).join('.') // string
      const grandParentRow = rowsById[grandParentRowIndex] // Row || undefined;
      const grandParentRowId = grandParentRow?.original.id // string || undefined

      const parentRowIndex = row.id.split('.').slice(0, -1).join('.') // string
      const parentRow = rowsById[parentRowIndex] // Row || undefined;
      const parentRowId = parentRow?.original.id // string || undefined

      const currentRowId = row.original.id // string
I hope none's eyes will bleed while reading this code 😆 🤣

Did you find this page helpful?