Add lazy loading to subrows with maintaining parent child relationship of data
Using the react-table v7 library, I'm making a table. The data I'm supplying in this table is prefetched and saved as JSON. This JSON file has the formatting that react-table requires.
But My data is very vast and has numerous deep hierarchies. Expanded option tables are what I'm making.
When I feed this data into a react-table, the rendering takes too long, which slows down the application's overall speed.
I want to add lazy loading so that when the user clicks on expand option, the children of that row should get added dynamically from my data.
I am referring to this example https://medium.com/tenjin-engineering/lazy-loading-expandable-rows-with-react-table-cd2fc86b0630 Lazy loading in this example the children data is being fetched on click is randomly created there is no hierarchy to maintain.
In My case data is already there I want to fetch children of that particular row when the user clicks on expand row button.
In summary, how can I get the children's row when the user clicks on the parent row?
I am attaching a link https://codesandbox.io/s/youthful-paper-85h1e2My Implementation to code sandbox where I created react table with static data.
Let me know if i am missing anything or you need more details. Thank you
Medium
Lazy-Loading Expandable Rows with React Table
An implementation of lazy-loading, expandable rows using React Table and React Query
0 Replies