conscious-sapphire•4mo ago

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

kapa.ai•4mo ago

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: ----------------------

kapa.ai•4mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•4mo ago

@kapa.ai I basically want to show the list screen of the offers, inside the show screen of the currently selected building

kapa.ai•4mo ago

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: ----------------------

kapa.ai•4mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

conscious-sapphire•4mo ago

@kapa.ai so "/buildings/{buildingId}/offers" is the backend Url aka the url to the datasource for the offers

kapa.ai•4mo ago

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: ----------------------

kapa.ai•4mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below