Custom Mantine <List>

How can I use a <Grid> from Mantine instead of a table to display my data in a <List>?

8 Replies

kapa.ai•13mo ago

Hi @theswarm420. 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. The provided extracts do not contain information on how to use a <Grid> from Mantine to display data in a <List>. However, you can refer to the refine documentation (https://refine.dev/docs) or the Mantine documentation (https://mantine.dev/) for more detailed information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

adverse-sapphire•13mo ago

@kapa.ai How can I access resource data in a custom page?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can access resource data in a custom page by using the resource prop in the component you are using. This is applicable for <Create>, <Show>, and <List> components in refine. Here are examples for each: For a <Create> component:

import { Create } from "@refinedev/mui";  // or "@refinedev/mantine" or "@refinedev/antd"
  
const CustomPage: React.FC = () => {  
 return (  
 <Create resource="posts">  
 <span>Rest of your page here</span>  
 </Create>  
 );  
};

import { Create } from "@refinedev/mui";  // or "@refinedev/mantine" or "@refinedev/antd"
  
const CustomPage: React.FC = () => {  
 return (  
 <Create resource="posts">  
 <span>Rest of your page here</span>  
 </Create>  
 );  
};

Source (https://refine.dev/docs/api-reference/mui/components/basic-views/create) For a <Show> component:

import { Show } from "@refinedev/mui";  // or "@refinedev/mantine" or "@refinedev/antd"
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="posts" recordItemId={123}>  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};

import { Show } from "@refinedev/mui";  // or "@refinedev/mantine" or "@refinedev/antd"
  
const CustomPage: React.FC = () => {  
 return (  
 <Show resource="posts" recordItemId={123}>  
 <span>Rest of your page here</span>  
 </Show>  
 );  
};

Source (https://refine.dev/docs/api-reference/mui/components/basic-views/show) For a <List> component:

import { List } from "@refinedev/mantine";  
  
const CustomPage: React.FC = () => {  
 return (  
 <List resource="categories">  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

import { List } from "@refinedev/mantine";  
  
const CustomPage: React.FC = () => {  
 return (  
 <List resource="categories">  
 <p>Rest of your page here</p>  
 </List>  
 );  
};

Source (https://refine.dev/docs/api-reference/mantine/components/basic-views/list) You can also use the useShow hook to access resource data:

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

import { useShow, useParsed } from "@refinedev/core";  
  
const { id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

Source (https://refine.dev/docs/api-reference/core/hooks/show/useShow) Remember to replace "posts" or "categories" with the name of your actual resource. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

adverse-sapphire•13mo ago

@kapa.ai How do I display the data from the resource?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To display data from a resource, you can use the useList hook provided by refine. This hook fetches the data from the API and provides it in a format that can be easily used in your components. Here's an example of how you can use it:

import { useList } from "@refinedev/core";

const { data, isLoading } = useList({
    resource: "posts",
});

if (isLoading) {
    return <div>Loading...</div>;
}

return (
    <div>
        {data?.data.map((post) => (
            <div key={post.id}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
            </div>
        ))}
    </div>
);

import { useList } from "@refinedev/core";

const { data, isLoading } = useList({
    resource: "posts",
});

if (isLoading) {
    return <div>Loading...</div>;
}

return (
    <div>
        {data?.data.map((post) => (
            <div key={post.id}>
                <h2>{post.title}</h2>
                <p>{post.body}</p>
            </div>
        ))}
    </div>
);

In this example, useList is used to fetch data from the "posts" resource. The isLoading variable can be used to display a loading state while the data is being fetched. Once the data is available, it can be accessed through the data variable and used to display the posts. Please note that the structure of the data depends on your API. In this example, it's assumed that each post has an id, title, and body. For more information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/core/hooks/list/useList). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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