sub resource on show page

uncertain-scarlet · 2024-04-01T21:13:33.066Z

I have a resource called order, in the backend an order has a line item, however this is not a refine resource in the frontend. How can I show a list/table of line items (specified for that order) when looking at the show page of an order? So for example when I look at order 5, it shows a list/table with line items that part of order 5. the backend url (simple rest) is /orders/:orderId/items/

K

kapa.ai•4/1/24, 9:13 PM

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•4/1/24, 9:13 PM

----------------------
You can achieve this by using the

useGetList

useGetList

useGetList

useGetList hook from Refine. This hook allows you to fetch a list of resources from your API. In your case, you can use it to fetch the line items for a specific order.

Here's a basic example of how you can use it:

import { useShow, useGetList } from "@refinedev/core";
import { Show } from "@refinedev/mui";

const OrderShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const orderId = data?.data?.id;

  const {
    data: lineItemsData,
    isLoading: lineItemsLoading,
  } = useGetList({
    resource: `orders/${orderId}/items`,
    queryOptions: {
      enabled: !!orderId,
    },
  });

  return (
    <Show isLoading={isLoading}>
      {/* Display order details here */}
      {lineItemsLoading ? (
        "Loading line items..."
      ) : (
        <div>
          {/* Display line items here */}
          {lineItemsData?.data.map((item) => (
            <div key={item.id}>{/* Display item details here */}</div>
          ))}
        </div>
      )}
    </Show>
  );
};

import { useShow, useGetList } from "@refinedev/core";
import { Show } from "@refinedev/mui";

const OrderShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const orderId = data?.data?.id;

  const {
    data: lineItemsData,
    isLoading: lineItemsLoading,
  } = useGetList({
    resource: `orders/${orderId}/items`,
    queryOptions: {
      enabled: !!orderId,
    },
  });

  return (
    <Show isLoading={isLoading}>
      {/* Display order details here */}
      {lineItemsLoading ? (
        "Loading line items..."
      ) : (
        <div>
          {/* Display line items here */}
          {lineItemsData?.data.map((item) => (
            <div key={item.id}>{/* Display item details here */}</div>
          ))}
        </div>
      )}
    </Show>
  );
};

import { useShow, useGetList } from "@refinedev/core";
import { Show } from "@refinedev/mui";

const OrderShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const orderId = data?.data?.id;

  const {
    data: lineItemsData,
    isLoading: lineItemsLoading,
  } = useGetList({
    resource: `orders/${orderId}/items`,
    queryOptions: {
      enabled: !!orderId,
    },
  });

  return (
    <Show isLoading={isLoading}>
      {/* Display order details here */}
      {lineItemsLoading ? (
        "Loading line items..."
      ) : (
        <div>
          {/* Display line items here */}
          {lineItemsData?.data.map((item) => (
            <div key={item.id}>{/* Display item details here */}</div>
          ))}
        </div>
      )}
    </Show>
  );
};

import { useShow, useGetList } from "@refinedev/core";
import { Show } from "@refinedev/mui";

const OrderShow = () => {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const orderId = data?.data?.id;

  const {
    data: lineItemsData,
    isLoading: lineItemsLoading,
  } = useGetList({
    resource: `orders/${orderId}/items`,
    queryOptions: {
      enabled: !!orderId,
    },
  });

  return (
    <Show isLoading={isLoading}>
      {/* Display order details here */}
      {lineItemsLoading ? (
        "Loading line items..."
      ) : (
        <div>
          {/* Display line items here */}
          {lineItemsData?.data.map((item) => (
            <div key={item.id}>{/* Display item details here */}</div>
          ))}
        </div>
      )}
    </Show>
  );
};

In this example, we're using the

useShow

useShow

useShow

useShow hook to fetch the details of the order. We then use the

useGetList

useGetList

useGetList

useGetList hook to fetch the line items for that order. The

resource

resource

resource

resource prop for

useGetList

useGetList

useGetList

useGetList is set to

orders/${orderId}/items

orders/${orderId}/items

orders/${orderId}/items

orders/${orderId}/items, which corresponds to the URL you provided.

Please note that you'll need to replace the comments with the actual code to display the order and line item details.

K

kapa.ai•4/1/24, 9:13 PM

For more information, you can refer to the documentation for the useShow
useShow
useShow
useShow (https://refine.dev/docs/guides-concepts/routing#relationship-between-resources-and-routes-) and useGetList
useGetList
useGetList
useGetList (https://refine.dev/docs/guides-concepts/general-concepts#ui-integrations-) hooks.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/1/24, 9:13 PM

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

U

uncertain-scarletOP•4/1/24, 9:15 PM

@kapa.ai can I use an actual list or antdesign table for these line items, instead of a simple div. Also please replace the comments with an actual example

K

kapa.ai•4/1/24, 9:15 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/1/24, 9:16 PM

----------------------
Yes, you can use an Ant Design Table to display the line items. Here's an example of how you can do it:

import { useShow, useGetList } from "@pankod/refine";
import { Show, Table } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
    } = useGetList({
        resource: `orders/${orderId}/items`,
        queryOptions: {
            enabled: !!orderId,
        },
    });

    const columns = [
        {
            title: 'Item Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Quantity',
            dataIndex: 'quantity',
            key: 'quantity',
        },
        // Add more columns as needed
    ];

    return (
        <Show isLoading={isLoading}>
            {/* Display order details here */}
            {lineItemsLoading ? (
                "Loading line items..."
            ) : (
                <Table dataSource={lineItemsData?.data} rowKey="id">
                    <AntTable columns={columns} />
                </Table>
            )}
        </Show>
    );
};

import { useShow, useGetList } from "@pankod/refine";
import { Show, Table } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
    } = useGetList({
        resource: `orders/${orderId}/items`,
        queryOptions: {
            enabled: !!orderId,
        },
    });

    const columns = [
        {
            title: 'Item Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Quantity',
            dataIndex: 'quantity',
            key: 'quantity',
        },
        // Add more columns as needed
    ];

    return (
        <Show isLoading={isLoading}>
            {/* Display order details here */}
            {lineItemsLoading ? (
                "Loading line items..."
            ) : (
                <Table dataSource={lineItemsData?.data} rowKey="id">
                    <AntTable columns={columns} />
                </Table>
            )}
        </Show>
    );
};

import { useShow, useGetList } from "@pankod/refine";
import { Show, Table } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
    } = useGetList({
        resource: `orders/${orderId}/items`,
        queryOptions: {
            enabled: !!orderId,
        },
    });

    const columns = [
        {
            title: 'Item Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Quantity',
            dataIndex: 'quantity',
            key: 'quantity',
        },
        // Add more columns as needed
    ];

    return (
        <Show isLoading={isLoading}>
            {/* Display order details here */}
            {lineItemsLoading ? (
                "Loading line items..."
            ) : (
                <Table dataSource={lineItemsData?.data} rowKey="id">
                    <AntTable columns={columns} />
                </Table>
            )}
        </Show>
    );
};

import { useShow, useGetList } from "@pankod/refine";
import { Show, Table } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
    } = useGetList({
        resource: `orders/${orderId}/items`,
        queryOptions: {
            enabled: !!orderId,
        },
    });

    const columns = [
        {
            title: 'Item Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Quantity',
            dataIndex: 'quantity',
            key: 'quantity',
        },
        // Add more columns as needed
    ];

    return (
        <Show isLoading={isLoading}>
            {/* Display order details here */}
            {lineItemsLoading ? (
                "Loading line items..."
            ) : (
                <Table dataSource={lineItemsData?.data} rowKey="id">
                    <AntTable columns={columns} />
                </Table>
            )}
        </Show>
    );
};

In this example, we're using the

Table

Table

Table

Table component from Refine and the

Table

Table

Table

Table component from Ant Design to display the line items. The

dataSource

dataSource

dataSource

dataSource prop for the Refine

Table

Table

Table

Table is set to

lineItemsData?.data

lineItemsData?.data

lineItemsData?.data

lineItemsData?.data, which is the data fetched by the

useGetList

useGetList

useGetList

useGetList hook. The

columns

columns

columns

columns prop for the Ant Design

Table

Table

Table

Table is set to an array of objects, each representing a column in the table.

Please note that you'll need to replace the

columns

columns

columns

columns array with the actual columns for your line items.

K

kapa.ai•4/1/24, 9:16 PM

For more information, you can refer to the documentation for the Table
Table
Table
Table (https://refine.dev/docs/api-references/components/table) component from Refine and the Table
Table
Table
Table (https://ant.design/components/table/) component from Ant Design.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/1/24, 9:16 PM

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

U

uncertain-scarletOP•4/1/24, 9:34 PM

@kapa.ai can I use an actual refine List component so it has pagination and stuff?

K

kapa.ai•4/1/24, 9:34 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/1/24, 9:35 PM

----------------------
Yes, you can use the

List

List

component from Refine to display the line items with built-in pagination. However, the

List

List

component is designed to work with top-level resources, and it might not work directly with nested resources like your line items.

A workaround is to create a custom component that uses the

useGetList

useGetList

useGetList

useGetList hook and the

Table

Table

Table

Table component from Ant Design. You can then manually implement pagination using the

pagination

pagination

pagination

pagination prop of the

Table

Table

Table

Table component.

Here's an example:

``jsx
import { useShow, useGetList } from "@pankod/refine";
import { Show } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
        pageInfo,
        setPage,
    } = useGetList({
        resource:

``jsx
import { useShow, useGetList } from "@pankod/refine";
import { Show } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
        pageInfo,
        setPage,
    } = useGetList({
        resource:

``jsx
import { useShow, useGetList } from "@pankod/refine";
import { Show } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
        pageInfo,
        setPage,
    } = useGetList({
        resource:

``jsx
import { useShow, useGetList } from "@pankod/refine";
import { Show } from "@pankod/refine";
import { Table as AntTable } from "antd";

const OrderShow = () => {
    const { queryResult } = useShow();
    const { data, isLoading } = queryResult;
    const orderId = data?.data?.id;

    const {
        data: lineItemsData,
        isLoading: lineItemsLoading,
        pageInfo,
        setPage,
    } = useGetList({
        resource:

orders/${orderId}/items`,
queryOptions: {
enabled: !!orderId,
},
});

const columns = [
{
title: 'Item Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Quantity',
dataIndex: 'quantity',
key: 'quantity',
},
// Add more columns as needed
];

K

kapa.ai•4/1/24, 9:35 PM

return (
<Show isLoading={isLoading}>
{/* Display order details here */}
{lineItemsLoading ? (
"Loading line items..."
) : (
<AntTable
dataSource={lineItemsData?.data}
columns={columns}
rowKey="id"
pagination={{
current: pageInfo.current,
pageSize: pageInfo.pageSize,
total: pageInfo.total,
onChange: (page) => setPage(page),
}}
/>
)}
</Show>
);
};

``

In this example, we're using the

``

In this example, we're using the

``

In this example, we're using the

``

In this example, we're using the

pageInfo

and

and

and

and setPage

 returned by

returned by

 returned by

returned by useGetList

 to control the pagination of the

to control the pagination of the

 to control the pagination of the

to control the pagination of the AntTable

. The

. The

. The

. The pagination

 prop of

prop of

 prop of

prop of AntTable

 is set to an object that controls the current page, page size, total number of items, and the function to call when the page changes.

Please note that this is a basic example and you might need to adjust it based on your actual API and data structure.

For more information, you can refer to the documentation for the **

 is set to an object that controls the current page, page size, total number of items, and the function to call when the page changes.

Please note that this is a basic example and you might need to adjust it based on your actual API and data structure.

For more information, you can refer to the documentation for the **

 is set to an object that controls the current page, page size, total number of items, and the function to call when the page changes.

Please note that this is a basic example and you might need to adjust it based on your actual API and data structure.

For more information, you can refer to the documentation for the **

 is set to an object that controls the current page, page size, total number of items, and the function to call when the page changes.

Please note that this is a basic example and you might need to adjust it based on your actual API and data structure.

For more information, you can refer to the documentation for the **

useGetList

** (<https://refine.dev/docs/api-references/hooks/data/useGetList>) hook and the **

** (<https://refine.dev/docs/api-references/hooks/data/useGetList>) hook and the **

** (<https://refine.dev/docs/api-references/hooks/data/useGetList>) hook and the **

** (<https://refine.dev/docs/api-references/hooks/data/useGetList>) hook and the **Table`** (https://ant.design/components/table/) component from Ant Design.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/1/24, 9:35 PM

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

U

uncertain-scarletOP•4/1/24, 9:42 PM

@kapa.ai how do I use List?

K

kapa.ai•4/1/24, 9:42 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/1/24, 9:42 PM

----------------------
The

List

List

component in Refine provides a layout to display a page. It does not contain any logic but adds extra functionalities like a create button or giving titles to the page.

Here's an example of how you can use it with Ant Design:

import { useMany } from "@refinedev/core";  
import { List, TextField, TagField, useTable } from "@refinedev/antd";  
import { Table } from "antd";  
  
const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost>({  
 syncWithLocation: true,  
 });  
  
 const categoryIds =  
 tableProps?.dataSource?.map((item) => item.category.id) ?? [];  
 const { data, isLoading } = useMany<ICategory>({  
 resource: "categories",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column  
 dataIndex={["category", "id"]}  
 title="Category"  
 render={(value) => {  
 if (isLoading) {  
 return <TextField value="Loading..." />;  
 }  
  
 return (  
 <TextField  
 value={data?.data.find((item) => item.id === value)?.title}  
 />  
 );  
 }}  
 />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

import { useMany } from "@refinedev/core";  
import { List, TextField, TagField, useTable } from "@refinedev/antd";  
import { Table } from "antd";  
  
const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost>({  
 syncWithLocation: true,  
 });  
  
 const categoryIds =  
 tableProps?.dataSource?.map((item) => item.category.id) ?? [];  
 const { data, isLoading } = useMany<ICategory>({  
 resource: "categories",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column  
 dataIndex={["category", "id"]}  
 title="Category"  
 render={(value) => {  
 if (isLoading) {  
 return <TextField value="Loading..." />;  
 }  
  
 return (  
 <TextField  
 value={data?.data.find((item) => item.id === value)?.title}  
 />  
 );  
 }}  
 />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

import { useMany } from "@refinedev/core";  
import { List, TextField, TagField, useTable } from "@refinedev/antd";  
import { Table } from "antd";  
  
const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost>({  
 syncWithLocation: true,  
 });  
  
 const categoryIds =  
 tableProps?.dataSource?.map((item) => item.category.id) ?? [];  
 const { data, isLoading } = useMany<ICategory>({  
 resource: "categories",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column  
 dataIndex={["category", "id"]}  
 title="Category"  
 render={(value) => {  
 if (isLoading) {  
 return <TextField value="Loading..." />;  
 }  
  
 return (  
 <TextField  
 value={data?.data.find((item) => item.id === value)?.title}  
 />  
 );  
 }}  
 />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

import { useMany } from "@refinedev/core";  
import { List, TextField, TagField, useTable } from "@refinedev/antd";  
import { Table } from "antd";  
  
const PostList: React.FC = () => {  
 const { tableProps } = useTable<IPost>({  
 syncWithLocation: true,  
 });  
  
 const categoryIds =  
 tableProps?.dataSource?.map((item) => item.category.id) ?? [];  
 const { data, isLoading } = useMany<ICategory>({  
 resource: "categories",  
 ids: categoryIds,  
 queryOptions: {  
 enabled: categoryIds.length > 0,  
 },  
 });  
  
 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 <Table.Column  
 dataIndex={["category", "id"]}  
 title="Category"  
 render={(value) => {  
 if (isLoading) {  
 return <TextField value="Loading..." />;  
 }  
  
 return (  
 <TextField  
 value={data?.data.find((item) => item.id === value)?.title}  
 />  
 );  
 }}  
 />  
 <Table.Column  
 dataIndex="status"  
 title="Status"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};

In this example, the

List

List

component is used as a wrapper around the

Table

Table

Table

Table component. The

List

List

component does not require any props because Refine figures the

resource

resource

resource

resource name and

title

title

from the

resources

resources

resources

resources prop.

K

kapa.ai•4/1/24, 9:42 PM

For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/list) and this blog post (https://refine.dev/blog/refine-pixels-5#refine-ant-design-list--component).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/1/24, 9:42 PM

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

U

uncertain-scarletOP•5/29/24, 7:01 PM

@kapa.ai can I use a custom url inside resource inside simpleList?

I need to get the current business and then all the services, the backend url will look like this /business/{idThatIsCurrentlyShown}/services

K

kapa.ai•5/29/24, 7:01 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•5/29/24, 7:02 PM

----------------------
Yes, you can use a custom URL inside the

resource

resource

resource

resource prop of the

useSimpleList

useSimpleList

useSimpleList

useSimpleList hook. This allows you to specify a custom endpoint for fetching data.

Here's an example of how you can achieve this:

import React from "react";  
import { useSimpleList } from "@refinedev/antd";  
import { List, Table } from "antd";  

const BusinessServicesList = ({ businessId }) => {  
    const { tableQueryResult: servicesQueryResult } = useSimpleList({  
        resource: `business/${businessId}/services`,  
    });  

    const columns = [  
        {  
            title: 'Service Name',  
            dataIndex: 'name',  
            key: 'name',  
        },  
        {  
            title: 'Description',  
            dataIndex: 'description',  
            key: 'description',  
        },  
        // Add more columns as needed  
    ];  

    return (  
        <List>  
            <Table  
                dataSource={servicesQueryResult.data?.data}  
                columns={columns}  
                rowKey="id"  
                loading={servicesQueryResult.isLoading}  
            />  
        </List>  
    );  
};  

export default BusinessServicesList;

import React from "react";  
import { useSimpleList } from "@refinedev/antd";  
import { List, Table } from "antd";  

const BusinessServicesList = ({ businessId }) => {  
    const { tableQueryResult: servicesQueryResult } = useSimpleList({  
        resource: `business/${businessId}/services`,  
    });  

    const columns = [  
        {  
            title: 'Service Name',  
            dataIndex: 'name',  
            key: 'name',  
        },  
        {  
            title: 'Description',  
            dataIndex: 'description',  
            key: 'description',  
        },  
        // Add more columns as needed  
    ];  

    return (  
        <List>  
            <Table  
                dataSource={servicesQueryResult.data?.data}  
                columns={columns}  
                rowKey="id"  
                loading={servicesQueryResult.isLoading}  
            />  
        </List>  
    );  
};  

export default BusinessServicesList;

import React from "react";  
import { useSimpleList } from "@refinedev/antd";  
import { List, Table } from "antd";  

const BusinessServicesList = ({ businessId }) => {  
    const { tableQueryResult: servicesQueryResult } = useSimpleList({  
        resource: `business/${businessId}/services`,  
    });  

    const columns = [  
        {  
            title: 'Service Name',  
            dataIndex: 'name',  
            key: 'name',  
        },  
        {  
            title: 'Description',  
            dataIndex: 'description',  
            key: 'description',  
        },  
        // Add more columns as needed  
    ];  

    return (  
        <List>  
            <Table  
                dataSource={servicesQueryResult.data?.data}  
                columns={columns}  
                rowKey="id"  
                loading={servicesQueryResult.isLoading}  
            />  
        </List>  
    );  
};  

export default BusinessServicesList;

import React from "react";  
import { useSimpleList } from "@refinedev/antd";  
import { List, Table } from "antd";  

const BusinessServicesList = ({ businessId }) => {  
    const { tableQueryResult: servicesQueryResult } = useSimpleList({  
        resource: `business/${businessId}/services`,  
    });  

    const columns = [  
        {  
            title: 'Service Name',  
            dataIndex: 'name',  
            key: 'name',  
        },  
        {  
            title: 'Description',  
            dataIndex: 'description',  
            key: 'description',  
        },  
        // Add more columns as needed  
    ];  

    return (  
        <List>  
            <Table  
                dataSource={servicesQueryResult.data?.data}  
                columns={columns}  
                rowKey="id"  
                loading={servicesQueryResult.isLoading}  
            />  
        </List>  
    );  
};  

export default BusinessServicesList;

In this example, the

resource

resource

resource

resource prop of the

useSimpleList

useSimpleList

useSimpleList

useSimpleList hook is set to

business/${businessId}/services

business/${businessId}/services

business/${businessId}/services

business/${businessId}/services, which corresponds to your custom backend URL. The

Table

Table

Table

Table component from Ant Design is used to display the list of services.

For more information, you can refer to the Refine documentation on
useSimpleList
useSimpleList
useSimpleList
useSimpleList (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list#resource).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•5/29/24, 7:02 PM

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