This is documentation for Refine 3.xx.xx, which is no longer actively maintained.
<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. →
You can swizzle this component to customize it with the refine CLI
Usage
Use it like any other Ant Design <Button>. You can use it with useExport:
Live previews only work with the latest documentation.
import { useExport } from "@pankod/refine-core";
import {
List,
Table,
useTable,
ExportButton,
} from "@pankod/refine-antd";
const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();
const { triggerExport, isLoading: exportLoading } = useExport<IPost>();
return (
<List
headerButtons={
<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: number;
title: string;
}
Properties
hideText
It is used to show and not show the text of the button. When true, only the button icon is visible.
Live previews only work with the latest documentation.
import { ExportButton } from "@pankod/refine-antd";
const MyExportComponent = () => {
return (
<ExportButton
hideText={true}
/>
);
};
API Reference
Properties
It also accepts all props of Ant Design Button.
