Add refresh button to a list using mantine

colossal-harlequin · 2024-09-09T09:23:57.612Z

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?

K

kapa.ai•9/9/24, 9:23 AM

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

K

kapa.ai•9/9/24, 9:24 AM

----------------------
To add a

RefreshButton

RefreshButton

RefreshButton

RefreshButton to a list using Mantine and ensure it invalidates the list part of the current resource, you need to use the

headerButtons

headerButtons

headerButtons

headerButtons property of the

List

List

List

List component correctly. The

RefreshButton

RefreshButton

RefreshButton

RefreshButton should be configured to use the

resource

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>
    );
};

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
```
RefreshButton
```
RefreshButton
```
RefreshButton
is added to the
```
headerButtons
```
headerButtons
```
headerButtons
```
headerButtons
property of the
```
List
```
List
```
List
```
List
component.
The
```
resource
```
```
resource
```
prop is set to
```
"users"
```
"users"
```
"users"
```
"users"
to specify which resource should be refreshed when the button is clicked.

K

kapa.ai•9/9/24, 9:24 AM

This setup ensures that clicking the

RefreshButton

RefreshButton

RefreshButton

RefreshButton will trigger the

useInvalidate

useInvalidate

hook and refresh the data for the "users" resource.

For more details, you can refer to the documentation on the
RefreshButton
RefreshButton
RefreshButton
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

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

K

kapa.ai•9/9/24, 9:24 AM

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

C

colossal-harlequinOP•9/9/24, 9:25 AM

refreshButtonProps does not exist

C

colossal-harlequinOP•9/9/24, 9:25 AM

@kapa.ai refreshButtonProps does not exist

K

kapa.ai•9/9/24, 9:26 AM

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

K

kapa.ai•9/9/24, 9:26 AM

----------------------
To add a

RefreshButton

RefreshButton

RefreshButton

RefreshButton to a list using Mantine and ensure it invalidates the list part of the current resource, you need to use the

headerButtons

headerButtons

headerButtons

headerButtons property of the

List

List

List

List component correctly. The

RefreshButton

RefreshButton

RefreshButton

RefreshButton should be configured to use the

resource

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>
    );
};

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
```
RefreshButton
```
RefreshButton
```
RefreshButton
is added to the
```
headerButtons
```
headerButtons
```
headerButtons
```
headerButtons
property of the
```
List
```
List
```
List
```
List
component.
The
```
resource
```
```
resource
```
prop is set to
```
"users"
```
"users"
```
"users"
```
"users"
to specify which resource should be refreshed when the button is clicked.

This setup ensures that clicking the

RefreshButton

RefreshButton

RefreshButton

RefreshButton will trigger the

useInvalidate

useInvalidate

hook and refresh the data for the "users" resource.

K

kapa.ai•9/9/24, 9:26 AM

For more details, you can refer to the documentation on the
RefreshButton
RefreshButton
RefreshButton
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

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

K

kapa.ai•9/9/24, 9:26 AM

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

C

colossal-harlequinOP•9/9/24, 9:28 AM

@kapa.ai that does not trigger any network request

K

kapa.ai•9/9/24, 9:28 AM

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

K

kapa.ai•9/9/24, 9:30 AM

----------------------
To add a

RefreshButton

RefreshButton

RefreshButton

RefreshButton to a list using Mantine and ensure it invalidates the list part of the current resource, you need to ensure that the

RefreshButton

RefreshButton

RefreshButton

RefreshButton is correctly configured to trigger the

useInvalidate

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>
    );
};

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
```
RefreshButton
```
RefreshButton
```
RefreshButton
is added to the
```
headerButtons
```
headerButtons
```
headerButtons
```
headerButtons
property of the
```
List
```
List
```
List
```
List
component.
The
```
resource
```
```
resource
```
prop is set to
```
"users"
```
"users"
```
"users"
```
"users"
to specify which resource should be refreshed when the button is clicked.

This setup ensures that clicking the

RefreshButton

RefreshButton

RefreshButton

RefreshButton will trigger the

useInvalidate

useInvalidate

hook and refresh the data for the "users" resource.

K

kapa.ai•9/9/24, 9:30 AM

For more details, you can refer to the documentation on the
RefreshButton
RefreshButton
RefreshButton
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

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

K

kapa.ai•9/9/24, 9:30 AM

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