(ListInferencer/Antd) Nested Resource Data
Hi!
I have data fetched from the API structured like so;
{
1: [ {...},{...} ],
2: [ {...} ],
3: [ {...}, {...}, {...} ]
}
where each key-value pair maps a userID to a list of their tasks for the day -- individually structured like {task: "Wash the dishes", startBy: "May 15, 2023", done: "false"}.
The inferencer doesn't like that (
TypeError: L.map is not a function
) so I'm wondering how I should go about formatting this?
I'd like to use either ant.designs nested tables (https://ant.design/components/table#components-table-demo-nested-table) (pictured) or just have several separate tables with a header and use .map(), but its not immediately obvious to me how to do that with Antd's table format (since it's going column-wise rather than row-wise).
Any insight would be appreciated!Table - Ant Design
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises
18 Replies
Hi @avangeous. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, I can guide you on how to use Ant Design's
<Table>
component with refine.
Refine uses Ant Design's <Table>
component to render data from an API, row by row, as a table. The <Table>
component simplifies the workflow and integrates well with refine. Functionalities such as pagination and routing are implemented out of the box. You can use the useTable
hook to fetch data from your endpoint and pass its value to the Table component via the tableprops
property. Then you set unique keys for each record from the API using the rowkey
prop.
Here is an example of how to use it:
In this example, useTable
is a refine hook that fetches data from an API and wraps it with various helper hooks that make it compatible with Ant's <Table>
component.
For more detailed information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/useTable) and this blog post (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design).
As for your specific data structure and the error you're encountering, it might be best to consult the Ant Design documentation or community for more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below
correct-apricotOP•17mo ago
@kapa.ai Any information on nested tables?
Let me check the knowledge base for you. One moment! :books:
----------------------
I'm sorry, but the provided extracts do not contain specific information on how to implement nested tables with refine and Ant Design's
<Table>
component.
However, refine uses Ant Design's <Table>
component for rendering data, and it's compatible with all the features of Ant Design's <Table>
component, including nested tables. You might want to refer to the Ant Design's official documentation (https://ant.design/components/table#components-table-demo-nested-table) for more specific guidance on implementing nested tables.
For more information on how to use the <Table>
component with refine, you can refer to the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/table/useTable) and this blog post (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below
correct-apricotOP•17mo ago
@kapa.ai How can I use array.map() with the fetched resource data?
Let me check the knowledge base for you. One moment! :books:
----------------------
You can use the
array.map()
function with the fetched resource data in refine by using the useList
hook. The useList
hook fetches data from the API and returns it in a format that can be easily manipulated with JavaScript array methods like map
.
Here's an example of how you can use array.map()
with the fetched data:
In this example, useList
is used to fetch data from the "products" endpoint. The returned data
array is then modified using the map
method, and a column
property is added to each object in the array.
For more information, you can refer to this blog post (https://refine.dev/blog/react-draggable-components-with-react-dnd) and the refine documentation (https://refine.dev/docs/api-reference/core/hooks/data/useList).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1122927158348763206> kapa.ai is still learning and improving, please let us how it did by reacting below
correct-apricotOP•17mo ago
(semi-solved) I just removed the nesting API-side and made two calls a la the finefoods example on github, but i'd still like to know if its possible to deal with nested data in general
fascinating-indigo•17mo ago
@avangeous By nested data do you mean when you show one resource it shows a list of your other resources connected to it? I was stumped on this issue FOREVER and finally got it working, if you would like some reference code.
correct-apricotOP•17mo ago
nah, moreso nested data inside of a resource, i.e key-value pair where value is another dataset. curious what you mean by connected resources though?
fascinating-indigo•17mo ago
@avangeous When the resources have database associations, I dont think my use case fits yours then, I read the title and assumed you were trying to show a list of resources below another that is displayed.
correct-apricotOP•17mo ago
oh i see, like a list of products on a particular store's 'show' page ?
correct-apricotOP•17mo ago
i have something similar if so; this example is pretty useful https://github.com/refinedev/refine/tree/master/examples/finefoods-antd
GitHub
refine/examples/finefoods-antd at master · refinedev/refine
Build your React-based CRUD applications, without constraints. 🌟 Star to support our work! - refine/examples/finefoods-antd at master · refinedev/refine
correct-apricotOP•17mo ago
what i mean would be this https://example.admin.refine.dev/users/show/600
Finefoods Ant Design Admin Panel - refine
Web site created using refine
correct-apricotOP•17mo ago
unrelated to my original issue though lol might be helpful regardless
fascinating-indigo•17mo ago
@avangeous Ah I see, my use case is for a project for hospitals to build out scenarios so I have to prop drill multiple levels with resources. Maybe for your usecase look a dialogue box, for every resource and when it's clicked display that. Or if antd has an expandable list component build a list with that instead of their DataGrid
correct-apricotOP•17mo ago
yeah i used an expandable list, main thing is that its making two api calls rather than one with nested info