Stuck in Expandable react-table after feeding getSubRows the same row back

[faqeerhussein]

I am trying to expand the row, so that I can show the 'further detail' into expanded row. my data does not contain any subRows, so i provided useReactTable hook's option getSubRows with same row back like, getSubRows: row => ([row]), , but it gives me error as RangeError: Maximum call stack size exceeded at node_modules\@tanstack\table-core\build\lib\index.mjs (2786:189) @ Array.join() .. Can someone help this noob here?

[TonyVeigel]

https://tanstack.com/table/v8/docs/api/features/expanding#getrowcanexpand

[trend-alan-bie]

The getSubRows function is used to retrieve the sub-rows of a given row. If you return the row itself as the result, the table will treat this returned array as containing sub-rows. Consequently, the table will call getSubRows again with this row as the parameter, leading to an infinite recursive loop.

The correct way is to use the sub-component feature: https://tanstack.com/table/latest/docs/framework/react/examples/sub-components