Is it possible to async fetch subrows?
For a project with a lot of layering it would be nice if I can fetch the subrows asynchronously. Would this be possible? I can't find an example for it.
I was thinking about using either a custom component for the subrows that does its own data fetching or manipulating a cache for the entire table.
Does anyone have experience with this? @Tanner Linsley maybe:)?
6 Replies
optimistic-gold•2y ago
I'll be the first to admit that this is a tedious pattern to try and implement right now
You have to hoist all of the expansion state out of the table and use it along with something like
useQueries to fetch all of the data you need. Then you have to stitch it together in the right hierarchy and pass it to your table.like-gold•2y ago
I have an example for this in MRT. https://www.material-react-table.com/docs/examples/lazy-sub-rows
Lazy Sub-Rows Material React Table Example
A Material React Table example show how use use expandable rows to fetch additional sub-rows data only after the user expands the row.
like-gold•2y ago
It's probably one of a dozen ways to do it. It's somewhat complicated on the back-end, especially if supporting sorting, filtering, and pagination
React Query caching makes it somewhat more performant at least
foreign-sapphireOP•2y ago
Cool thanks a lot for the responses!
This is exactly what I'm looking for:)
Team backend will never forgive me
ugly-tan•15mo ago
what is bugging me is the loading state, for the global one I've figured out that I can use the table meta object.
But with lazy sub-rows I need to know when every subrows is loading or not 🤔
harsh-harlequin•14mo ago
what i did is doing a fetchQuery on the collapsed rows when hovering over the expand and the selection buttons which i have in each row. that way there's a few millisecs when I display a loading state and the button is disabled, but it's barely noticable