harsh-harlequin•4mo ago

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•4mo 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•4mo ago

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

harsh-harlequinOP•4mo ago

refreshButtonProps does not exist @kapa.ai refreshButtonProps does not exist

kapa.ai•4mo 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>
    );
};

kapa.ai•4mo ago

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

harsh-harlequinOP•4mo ago

@kapa.ai that does not trigger any network request

kapa.ai•4mo 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>
    );
};

kapa.ai•4mo ago

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