Custom Mantine <List>

How can I use a <Grid> from Mantine instead of a table to display my data in a <List>?
kapa.ai
kapa.ai304d 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
kapa.ai304d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
metropolitan-bronze
metropolitan-bronze304d ago
@kapa.ai How can I access resource data in a custom page?
kapa.ai
kapa.ai304d 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
kapa.ai304d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
metropolitan-bronze
metropolitan-bronze304d ago
@kapa.ai How do I display the data from the resource?
kapa.ai
kapa.ai304d 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
kapa.ai304d ago
<@1117289843584671775> kapa.ai is still learning and improving, please let us how it did by reacting below
More Posts
invalid login credentialsI am getting invalid login credentials when trying to login with google<Edit> Save works, Delete doesn'tHi! Confused about this one. I'm using <Edit> to populate a form with existing data. It prepopulateUpdating a related property using useUpdate hookI'm currently working on a project and I want to use Refine's powerful useUpdate hook. Specifically,how to limit table to only show logged in users postsI have a field in posts that connects users (Relation with User (from: users-permissions)) to the poHow to modify the width of the Table?How to modify the width of the Table?ReusabilityMost of the refine repo examples which i have seen, contains 2 files for create and edit, which areEnterprise invitation Opt-OutHey everyone, stupid question that I usually wouldn't want to bug the help channel with: Refine is dWeird error in refine buildHello, I have this error and I don't know what to do : ``` Failed to compile. TS2307: Cannot find Is there an example known to be properly working in a pnpm monorepo?The bootstrapped examples I tried either from refine.new or create refine-app always end up with somHow to pass parameters in go method of useGo?I want to pass some values in go method of useGo and use them in the other component. How can I do tauthProvider onError Only Called on Final ErrorHi! I have an authentication token for my API that expires after a certain amount of time. Once iPassing Authorization Bearer Tokens on API CallsHello, I recently implemented the use of an authorization bearer API-side. The token is passed intSupabase authentication not workingHi, I have setup a refine (headless) + supabase project. I have enabled "Github" as an auth provideapiHow to make an api using refine to store data?Is there any way to disable notifications on updates for a specific use case?👆Email rate limit exceededwhy do i get this error?Error: Module not found: Can't resolve '@ant-design/icons/lib/icons/createFromIconfontCN'Hey! I have encountered the problem when generating app from https://refine.new Error: Module not Dark Mode Constants?Hi! I have some cards with custom background colors. I wanted to change them alongside a darkmode tProduction GuideHello everyone, I'm looking for a production deployment guide, basically about how to build refine, Make table on List component x-scrollableI am having a hard time to make a scrollable table working with a useTable hook using antdesign nest