R
Refine

ask-any-question

Show ant design table list on show page of parent

Sstormy-gold4/1/2024
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
Kkapa.ai4/1/2024
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:
import { useShow, useMany } from "@refinedev/core";
import { Show, TextField } from "@refinedev/antd";
import { Typography, Table } from "antd";

const { Title } = Typography;

export const BuildingShow = () => {
const { queryResult } = useShow();
const { data, isLoading } = queryResult;
const building = data?.data;

const { data: offersData, isLoading: offersLoading } = useMany({
resource: `buildings/${building?.id}/offers`,
queryOptions: { enabled: !!building?.id },
});

return (
<Show isLoading={isLoading}>
<Title level={5}>Building Id</Title>
<TextField value={building?.id ?? ""} />
<Title level={5}>Building Name</Title>
<TextField value={building?.name} />
<Title level={5}>Offers</Title>
{offersLoading ? (
"Loading offers..."
) : (
<Table dataSource={offersData?.data} rowKey="id">
{/* Define your columns here */}
</Table>
)}
</Show>
);
};
import { useShow, useMany } from "@refinedev/core";
import { Show, TextField } from "@refinedev/antd";
import { Typography, Table } from "antd";

const { Title } = Typography;

export const BuildingShow = () => {
const { queryResult } = useShow();
const { data, isLoading } = queryResult;
const building = data?.data;

const { data: offersData, isLoading: offersLoading } = useMany({
resource: `buildings/${building?.id}/offers`,
queryOptions: { enabled: !!building?.id },
});

return (
<Show isLoading={isLoading}>
<Title level={5}>Building Id</Title>
<TextField value={building?.id ?? ""} />
<Title level={5}>Building Name</Title>
<TextField value={building?.name} />
<Title level={5}>Offers</Title>
{offersLoading ? (
"Loading offers..."
) : (
<Table dataSource={offersData?.data} rowKey="id">
{/* Define your columns here */}
</Table>
)}
</Show>
);
};
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: ----------------------
Kkapa.ai4/1/2024
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
Sstormy-gold4/1/2024
@kapa.ai I basically want to show the list screen of the offers, inside the show screen of the currently selected building
Kkapa.ai4/1/2024
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:
import { useShow } from "@refinedev/core";
import { Show, TextField, List } from "@refinedev/antd";
import { Typography } from "antd";

const { Title } = Typography;

export const BuildingShow = () => {
const { queryResult } = useShow();
const { data, isLoading } = queryResult;
const building = data?.data;

return (
<Show isLoading={isLoading}>
<Title level={5}>Building Id</Title>
<TextField value={building?.id ?? ""} />
<Title level={5}>Building Name</Title>
<TextField value={building?.name} />
<Title level={5}>Offers</Title>
<List
resource={`buildings/${building?.id}/offers`}
paginationPosition="none"
>
{/* Define your list fields here */}
</List>
</Show>
);
};
import { useShow } from "@refinedev/core";
import { Show, TextField, List } from "@refinedev/antd";
import { Typography } from "antd";

const { Title } = Typography;

export const BuildingShow = () => {
const { queryResult } = useShow();
const { data, isLoading } = queryResult;
const building = data?.data;

return (
<Show isLoading={isLoading}>
<Title level={5}>Building Id</Title>
<TextField value={building?.id ?? ""} />
<Title level={5}>Building Name</Title>
<TextField value={building?.name} />
<Title level={5}>Offers</Title>
<List
resource={`buildings/${building?.id}/offers`}
paginationPosition="none"
>
{/* Define your list fields here */}
</List>
</Show>
);
};
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: ----------------------
Kkapa.ai4/1/2024
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below
Sstormy-gold4/1/2024
@kapa.ai so "/buildings/{buildingId}/offers" is the backend Url aka the url to the datasource for the offers
Kkapa.ai4/1/2024
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:
<List resource={`buildings/${building?.id}/offers`}>
{/* Define your list fields here */}
</List>
<List resource={`buildings/${building?.id}/offers`}>
{/* Define your list fields here */}
</List>
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: ----------------------
Kkapa.ai4/1/2024
<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
remove layout styles on specific routeI am using antd themedlayoutv2. Can I not use the layout styles for a specific route in my app?useFormin useForm from "@refinedev/antd", how to refetch data when in "edit" and clone mode?useCustom call function directlyI am wanting to call the function that useCustom would call to fetch reason being I have some componmap ColumnsHow to correct this code, i´m getting error in the dataIndex mapping columns: { title: "filter on key inside nested JSON# [FEATURE] Deep Filtering on Nested JSON Fields in Supabase I'm currently working on a project usihey guys, i need a help for creatinghey guys, i need a help for creating dockerfile with nginx configuration for refinedev nestjs. is angraphql codegen generate querySo im following the guide of refine and how to use graphql codegen but it states to write the querieWhat is the best way to install the latest version from GitHub into my project?I want to check if one of the latest commits that is on GitHub will fix an issue that I have. Is theNextJS + NestJS Query Auth0 api/auth/callback/auth0 Not FoundWhen i have the given template above and try to login i am instantly getting ``` { "message": "CanCustomLoginLogohello, can i customize the login page <AuthPage> with my custom logo and color without altering the savePropsHow to after save props open view page?Fetch data from websiteHow do I fetch específic data from an online website?Animation on main Page?Hi guys, short question, does anyone happen to know how / with what they made the animation on theirhide formhow to unhide a form on selectpropsOperatorsHow can I use greater than the right operand in typescriptPaginationHow to use pagination mode off and list all itens of the resourcePopup.js ErrorHello! I'm following the amazing CRM application tut by JavaScript Mastery and stumbled across an isMany requests using formI have this kind of form ``` const { form, formProps, saveButtonProps, onFinish, queryResult } overtime.elapsedTime not reported when isFetching on on isLoadingovertime.elapsedTime not reported when isFetching only on isLoadingFully customize menu items AntDNow the menu items are following the order of resources of <Refine>. I want to have a fully customi