Show ant design table list on show page of parent
I have a resource called building, one building can have multiple offers (which is not part of the json, but is instead a call like /buildings/{buildingId}/offers. I would like to show the offers that belong to currently selected building in the show menu
8 Replies
Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To display the offers that belong to the currently selected building in the show menu, you can use the
useShow
hook from Refine to fetch the data for the selected building. Then, you can use the useMany
hook to fetch the offers for that building.
Here's a simplified example based on the knowledge sources:
In this example, we're using the useShow
hook to fetch the data for the selected building. Once we have the building's data, we use the useMany
hook to fetch the offers for that building. The useMany
hook's resource
prop is set to buildings/${building?.id}/offers
, which corresponds to the /buildings/{buildingId}/offers
endpoint you mentioned. The queryOptions
prop is set to { enabled: !!building?.id }
, which means the query will only run once we have a building ID.
The offers are then displayed in an Ant Design Table
component. You'll need to define the columns for the table based on the structure of your offers data.
Please note that this is a simplified example and you might need to adjust it based on your actual data structure and API endpoints.
For more information, you can refer to the following documentation pages:
- useShow hook (https://refine.dev/docs/api-reference/core/hooks/data/useShow/)
- useMany hook (https://refine.dev/docs/api-reference/core/hooks/data/useMany/)
- Show component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/show)
- Ant Design Table component (https://ant.design/components/table/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-goldOP•8mo ago
@kapa.ai I basically want to show the list screen of the offers, inside the show screen of the currently selected building
Let me check the knowledge base for you. One moment! :books:
----------------------
To display the list screen of the offers inside the show screen of the currently selected building, you can use the
List
component from Refine inside the Show
component. You can use the useShow
hook to fetch the data for the selected building and then use the resource
prop of the List
component to fetch the offers for that building.
Here's a simplified example based on the knowledge sources:
In this example, we're using the useShow
hook to fetch the data for the selected building. Once we have the building's data, we use the List
component to display the offers for that building. The resource
prop of the List
component is set to buildings/${building?.id}/offers
, which corresponds to the /buildings/{{buildingId}}/offers
endpoint you mentioned.
You'll need to define the fields for the list based on the structure of your offers data.
Please note that this is a simplified example and you might need to adjust it based on your actual data structure and API endpoints.
For more information, you can refer to the following documentation pages:
- useShow hook (https://refine.dev/docs/api-reference/core/hooks/data/useShow/)
- List component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/list)
- Show component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/show)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-goldOP•8mo ago
@kapa.ai so "/buildings/{buildingId}/offers" is the backend Url aka the url to the datasource for the offers
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes,
/buildings/{buildingId}/offers
is the backend URL or the URL to the data source. This URL is used to fetch the offers for a specific building from your backend API.
In the context of Refine, this URL is used as the resource
prop in the List
component or in data fetching hooks like useMany
. The resource
prop or parameter is used by Refine to construct the full URL for the HTTP request.
For example, if your base API URL is <http://localhost:3001
,> and you use buildings/{buildingId}/offers
as the resource
, Refine will send a request to <http://localhost:3001/buildings/{buildingId}/offers
> to fetch the data.
Here's a simplified example:
In this example, buildings/${building?.id}/offers
is used as the resource
prop in the List
component. This tells Refine to fetch the data from the /buildings/{buildingId}/offers
endpoint of your API.
For more information, you can refer to the following documentation pages:
- List component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/list)
- Data fetching in Refine (https://refine.dev/docs/data/data-fetching)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below