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
Hey @misstsuliu 👋,
Welcome, we are glad to see you! Which UI framework are you using?
metropolitan-bronze•2y ago
Currently experimenting with antD
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
metropolitan-bronze•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?
I will create an example for you ⚡️
Omer Faruk APLAK
StackBlitz
Refine Use Table Example (forked) - StackBlitz
Run official live example code for Refine Use Table, created by Refinedev on StackBlitz
metropolitan-bronze•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?
Can you check this section of tutorial?
https://refine.dev/docs/tutorials/ant-design-tutorial/#handling-relationships
Your First App using Ant Design | refine
Introduction
metropolitan-bronze•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 🙂
That's great, actually the way to avoid this is to use
useMany 🎯metropolitan-bronze•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.
Ah I got it 🙂