other-emerald
other-emeraldโ€ข2y ago

Update Table items asynchronously

Hello! I am experimenting with refine and I have a couple locations where I populate a table by: 1) Making a get list call 2) Iterating through the list items and making multiple get one calls (to get more information about each item) Ideally, I would like to update the table every time one of the async calls from [2] returns. How can I set this up using a custom data provider? Thank you!
12 Replies
Omer
Omerโ€ข2y ago
Hey @misstsuliu ๐Ÿ‘‹, Welcome, we are glad to see you! Which UI framework are you using?
other-emerald
other-emeraldโ€ข2y ago
Currently experimenting with antD
Omer
Omerโ€ข2y ago
You can create a custom component for calling useOne on expendedRowRenderer. https://github.com/refinedev/refine/blob/master/examples/table/antd/advancedTable/src/pages/posts/list.tsx#L142 You can find an one of example here https://refine.dev/docs/examples/table/antd/advancedTable/
Advanced Table | refine
Multiple record deletion, modification, and other features can be used simultaneously in a table. It's an example of a Advanced Table made with refine's customization feature.
GitHub
refine/list.tsx at master ยท refinedev/refine
Build your React-based CRUD applications, without constraints. - refine/list.tsx at master ยท refinedev/refine
other-emerald
other-emeraldโ€ข2y ago
I will try this out! Thanks so much ๐Ÿ™‚ So reading through, this is fairly close to what I want... However, I would like the information shown in the table columns directly rather than under the expanded view for each row. Is there any way to do that? Additionally, for future ref, is there a way to do this using material UI too?
Omer
Omerโ€ข2y ago
I will create an example for you โšก๏ธ
other-emerald
other-emeraldโ€ข2y ago
This makes sense, thanks!! If there are two or more columns that require information from that separate API call, will there be an optimization to only make 1 call?
other-emerald
other-emeraldโ€ข2y ago
Hello! I wanted to provide an update that using the "render" prop within the Table.Column ended up working out! Even if I had several columns that used the same getOne call, it seems the redundant calls are aggregated ๐Ÿ™‚
Omer
Omerโ€ข2y ago
That's great, actually the way to avoid this is to use useMany ๐ŸŽฏ
other-emerald
other-emeraldโ€ข2y ago
I am assuming you mean providing ids in query? Unfortunately our API doesn't currently support a query parameter with a list of all ids, so the GET call needs to be looped over every id.
Omer
Omerโ€ข2y ago
Ah I got it ๐Ÿ™‚