T
TanStack•3y ago
wise-white

Display only relevant data on nested table

Hey all. I have a scenario where in which I've created a table which will ideally be used for both the parent table and the nested table. They will ideally use the same data data?.records. Below I'm rendering just a single object of legs for all parents (test[2]), but I'd ideally want each parent to only display its relevant legs. The app looks like the following: 
const test = data?.records?.map((leg) => leg?.legs); 
        // Parent table
        <Table
          columns={columns as unknown as Column<TBetsData>[]}
          data={(data?.records ?? []) as TBetsData[]}
          loading={status === 'loading'}
        >
        // Nested table
            <Table
              columns={subcolumns as unknown as Column<TBetLegs>[]}
              data={(test[2] ?? []) as TBetLegs[]}
              loading={status === 'loading'}
            />
        </Table>
const test = data?.records?.map((leg) => leg?.legs); 
        // Parent table
        <Table
          columns={columns as unknown as Column<TBetsData>[]}
          data={(data?.records ?? []) as TBetsData[]}
          loading={status === 'loading'}
        >
        // Nested table
            <Table
              columns={subcolumns as unknown as Column<TBetLegs>[]}
              data={(test[2] ?? []) as TBetLegs[]}
              loading={status === 'loading'}
            />
        </Table>
And the data is 
records : [
    {
        "bet_id": "6cfdc90f-a288-4b13-a7a7-e784f458aa95",
        "created_at": "2022-11-10T23:36:34Z",
        "stake": 50000,
        "legs": [ { }, { }] <--- the nested data table to display these
        ],
        "punter_id": "b2d6999e-2032-4110-8594-1f5141f4ede1",
        "punter_name": "depo sit",
        "punter_category": "Newbie"
    }, {...}, {...}
]
records : [
    {
        "bet_id": "6cfdc90f-a288-4b13-a7a7-e784f458aa95",
        "created_at": "2022-11-10T23:36:34Z",
        "stake": 50000,
        "legs": [ { }, { }] <--- the nested data table to display these
        ],
        "punter_id": "b2d6999e-2032-4110-8594-1f5141f4ede1",
        "punter_name": "depo sit",
        "punter_category": "Newbie"
    }, {...}, {...}
]
I presume I need to pass the parent index to the child, but how?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?