Export

<ExportButton> is an Ant Design <Button> with a default export icon and a default text with "Export". It only has presentational value.

Refer to the for more detailed information about useExport. →

Usage

Use it like any other Ant Design <Button>. You can use it with useExport:

/src/pages/posts/list.tsx

import {
    List,
    Table,
    useTable,
    useExport,
    ExportButton,
} from "@pankod/refine";

export const PostList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    const { triggerExport, isLoading: exportLoading } = useExport<IPost>();

    return (
        <List
            pageHeaderProps={{
                extra: (
                    <ExportButton
                        onClick={triggerExport}
                        loading={exportLoading}
                    />
                ),
            }}
        >
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" />
            </Table>
        </List>
    );
};

interface IPost {
    id: string;
    title: string;
}

It looks like this:

Properties

hideText

It is used to show and not show the text of the button. When true, only the button icon is visible.

import { ExportButton } from "@pankod/refine";

export const MyRefreshComponent = () => {
    return <ExportButton hideText />;
};

API Reference

Properties

Property	Description	Type	Default
props	Ant Design button properties	ButtonProps & { hideText?: boolean; }
hideText	Allows to hide button text	boolean	false
children	Sets the button text	ReactNode	"Export"
icon	Sets the icon component of button	ReactNode	<ExportOutlined />