Add refresh button to a list using mantine

I've added RefreshButton using headerButtons property of List component. It renders fine, but tapping on it does nothing. How can I make RefreshButton invalidate the list part of current resource?
8 Replies
kapa.ai
kapa.ai4w ago
Hi @Petr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a RefreshButton to a list using Mantine and ensure it invalidates the list part of the current resource, you need to use the headerButtons property of the List component correctly. The RefreshButton should be configured to use the resource prop to specify which resource to refresh. Here's an example of how you can achieve this:
import {
List,
useTable,
RefreshButton,
EditButton,
ShowButton,
DeleteButton,
} from "@refinedev/mantine";
import { Table } from "@mantine/core";

export const UserList: React.FC = () => {
const { tableProps } = useTable({
initialSorter: [{ field: "last_name", order: "asc" }],
syncWithLocation: true,
});

return (
<List
headerButtons={({ defaultButtons, refreshButtonProps }) => (
<>
{defaultButtons}
<RefreshButton {...refreshButtonProps} resource="users" />
</>
)}
>
<Table
{...tableProps}
rowKey="id"
pagination={{
pageSizeOptions: ["10", "20", "50", "100", "200"],
showSizeChanger: true,
total: tableProps.pagination.total,
current: tableProps.pagination.current,
pageSize: tableProps.pagination.pageSize,
}}
>
{/* Your table columns and rows here */}
</Table>
</List>
);
};
import {
List,
useTable,
RefreshButton,
EditButton,
ShowButton,
DeleteButton,
} from "@refinedev/mantine";
import { Table } from "@mantine/core";

export const UserList: React.FC = () => {
const { tableProps } = useTable({
initialSorter: [{ field: "last_name", order: "asc" }],
syncWithLocation: true,
});

return (
<List
headerButtons={({ defaultButtons, refreshButtonProps }) => (
<>
{defaultButtons}
<RefreshButton {...refreshButtonProps} resource="users" />
</>
)}
>
<Table
{...tableProps}
rowKey="id"
pagination={{
pageSizeOptions: ["10", "20", "50", "100", "200"],
showSizeChanger: true,
total: tableProps.pagination.total,
current: tableProps.pagination.current,
pageSize: tableProps.pagination.pageSize,
}}
>
{/* Your table columns and rows here */}
</Table>
</List>
);
};
In this example: - The RefreshButton is added to the headerButtons property of the List component. - The resource prop is set to "users" to specify which resource should be refreshed when the button is clicked. This setup ensures that clicking the RefreshButton will trigger the useInvalidate hook and refresh the data for the "users" resource. For more details, you can refer to the documentation on the RefreshButton component (https://refine.dev/docs/ui-integrations/mantine/components/buttons/refresh-button/#properties). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4w ago
<@356390195681296387> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin
harsh-harlequin4w ago
refreshButtonProps does not exist @kapa.ai refreshButtonProps does not exist
kapa.ai
kapa.ai4w ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To add a RefreshButton to a list using Mantine and ensure it invalidates the list part of the current resource, you need to use the headerButtons property of the List component correctly. The RefreshButton should be configured to use the resource prop to specify which resource to refresh. Here's an example of how you can achieve this:
import {
List,
useTable,
RefreshButton,
EditButton,
ShowButton,
DeleteButton,
} from "@refinedev/mantine";
import { Table } from "@mantine/core";

export const UserList: React.FC = () => {
const { tableProps } = useTable({
initialSorter: [{ field: "last_name", order: "asc" }],
syncWithLocation: true,
});

return (
<List
headerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<RefreshButton resource="users" />
</>
)}
>
<Table
{...tableProps}
rowKey="id"
pagination={{
pageSizeOptions: ["10", "20", "50", "100", "200"],
showSizeChanger: true,
total: tableProps.pagination.total,
current: tableProps.pagination.current,
pageSize: tableProps.pagination.pageSize,
}}
>
{/* Your table columns and rows here */}
</Table>
</List>
);
};
import {
List,
useTable,
RefreshButton,
EditButton,
ShowButton,
DeleteButton,
} from "@refinedev/mantine";
import { Table } from "@mantine/core";

export const UserList: React.FC = () => {
const { tableProps } = useTable({
initialSorter: [{ field: "last_name", order: "asc" }],
syncWithLocation: true,
});

return (
<List
headerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<RefreshButton resource="users" />
</>
)}
>
<Table
{...tableProps}
rowKey="id"
pagination={{
pageSizeOptions: ["10", "20", "50", "100", "200"],
showSizeChanger: true,
total: tableProps.pagination.total,
current: tableProps.pagination.current,
pageSize: tableProps.pagination.pageSize,
}}
>
{/* Your table columns and rows here */}
</Table>
</List>
);
};
In this example: - The RefreshButton is added to the headerButtons property of the List component. - The resource prop is set to "users" to specify which resource should be refreshed when the button is clicked. This setup ensures that clicking the RefreshButton will trigger the useInvalidate hook and refresh the data for the "users" resource. For more details, you can refer to the documentation on the RefreshButton component (https://refine.dev/docs/ui-integrations/mantine/components/buttons/refresh-button/#properties). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4w ago
<@356390195681296387> kapa.ai is still learning and improving, please let us know how it did by reacting below
harsh-harlequin
harsh-harlequin4w ago
@kapa.ai that does not trigger any network request
kapa.ai
kapa.ai4w ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To add a RefreshButton to a list using Mantine and ensure it invalidates the list part of the current resource, you need to ensure that the RefreshButton is correctly configured to trigger the useInvalidate hook. Here's an example of how you can achieve this:
import {
List,
useTable,
RefreshButton,
EditButton,
ShowButton,
DeleteButton,
} from "@refinedev/mantine";
import { Table } from "@mantine/core";

export const UserList: React.FC = () => {
const { tableProps } = useTable({
initialSorter: [{ field: "last_name", order: "asc" }],
syncWithLocation: true,
});

return (
<List
headerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<RefreshButton resource="users" />
</>
)}
>
<Table
{...tableProps}
rowKey="id"
pagination={{
pageSizeOptions: ["10", "20", "50", "100", "200"],
showSizeChanger: true,
total: tableProps.pagination.total,
current: tableProps.pagination.current,
pageSize: tableProps.pagination.pageSize,
}}
>
{/* Your table columns and rows here */}
</Table>
</List>
);
};
import {
List,
useTable,
RefreshButton,
EditButton,
ShowButton,
DeleteButton,
} from "@refinedev/mantine";
import { Table } from "@mantine/core";

export const UserList: React.FC = () => {
const { tableProps } = useTable({
initialSorter: [{ field: "last_name", order: "asc" }],
syncWithLocation: true,
});

return (
<List
headerButtons={({ defaultButtons }) => (
<>
{defaultButtons}
<RefreshButton resource="users" />
</>
)}
>
<Table
{...tableProps}
rowKey="id"
pagination={{
pageSizeOptions: ["10", "20", "50", "100", "200"],
showSizeChanger: true,
total: tableProps.pagination.total,
current: tableProps.pagination.current,
pageSize: tableProps.pagination.pageSize,
}}
>
{/* Your table columns and rows here */}
</Table>
</List>
);
};
In this example: - The RefreshButton is added to the headerButtons property of the List component. - The resource prop is set to "users" to specify which resource should be refreshed when the button is clicked. This setup ensures that clicking the RefreshButton will trigger the useInvalidate hook and refresh the data for the "users" resource. For more details, you can refer to the documentation on the RefreshButton component (https://refine.dev/docs/ui-integrations/mantine/components/buttons/refresh-button/#properties). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4w ago
<@356390195681296387> kapa.ai is still learning and improving, please let us know how it did by reacting below