Skip to main content
Version: 2.xx.xx

CSV Export

With refine, you can easily add export functionality to dump resources' records to a CSV file from anywhere, including buttons. By using the useExport hook with desired configurations, you can turn any button into an export button. Which resources' records to export can be configured. But by default, unless explicitly specified, it is inferred from current route of browser.

Usage

Let's see an example:

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 } = useExport<IPost>();

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

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

After this setup is done, when the user clicks the button, download process will initialize.

Manually running the triggerExport function is another option.

useExport returns two properties: isLoading: boolean and triggerExport: async () => void. These properties can be used with Ant Design's <Button> components to create an export button. In this example, <ExportButton> is used and it's just an Ant Design <Button> with default icon and children, serving only presentational purposes.

Refer to the useExport docs for more detailed information and export settings. β†’

Refer to the ExportButton docs for more detailed information. β†’

Live Codesandbox Example