Skip to main content
Version: 3.xx.xx

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 { useExport } from "@pankod/refine-core";
import {
List,
Table,
useTable,
ExportButton,
} from "@pankod/refine-antd";

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:

Default export button

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-antd";

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

API Reference

Properties

PropertyDescriptionTypeDefault
propsAnt Design button propertiesButtonProps & { hideText?: boolean; }
hideTextAllows to hide button textbooleanfalse
childrenSets the button textReactNode"Export"
iconSets the icon component of buttonReactNode<ExportOutlined />