useExport is a React hook that allows you to export resource data to CSV or text files. It fetches data from your data provider and generates downloadable files with customizable formatting.
Usage
import { useExport } from "@refinedev/core";
const PostList = () => {
const { triggerExport, isLoading } = useExport();
return (
<button onClick={triggerExport} disabled={isLoading}>
{isLoading ? "Exporting..." : "Export to CSV"}
</button>
);
};
Parameters
Return Values
Loading state indicator. true while fetching and generating the export file.
triggerExport
() => Promise<string | undefined>
Function to trigger the export process. Returns the CSV string when complete.
Examples
Basic Export
import { useExport } from "@refinedev/core";
const PostList = () => {
const { triggerExport, isLoading } = useExport();
return (
<button onClick={triggerExport} disabled={isLoading}>
{isLoading ? "Exporting..." : "Export"}
</button>
);
};
Export with Filters
import { useExport } from "@refinedev/core";
const PostList = () => {
const { triggerExport, isLoading } = useExport({
filters: [
{
field: "status",
operator: "eq",
value: "published",
},
],
});
return (
<button onClick={triggerExport}>
Export Published Posts
</button>
);
};
Export with Data Mapping
import { useExport } from "@refinedev/core";
const UserList = () => {
const { triggerExport } = useExport({
mapData: (item) => ({
Name: item.name,
Email: item.email,
"Registration Date": new Date(item.createdAt).toLocaleDateString(),
}),
});
return <button onClick={triggerExport}>Export Users</button>;
};
Export with Custom Filename
import { useExport } from "@refinedev/core";
const OrderList = () => {
const { triggerExport } = useExport({
filename: `orders-${new Date().toISOString().split('T')[0]}`,
});
return <button onClick={triggerExport}>Export Orders</button>;
};
Export with Sorting
import { useExport } from "@refinedev/core";
const ProductList = () => {
const { triggerExport } = useExport({
sorters: [
{
field: "price",
order: "desc",
},
],
});
return <button onClick={triggerExport}>Export by Price</button>;
};
Export with Max Items
import { useExport } from "@refinedev/core";
const PostList = () => {
const { triggerExport } = useExport({
maxItemCount: 100,
});
return <button onClick={triggerExport}>Export Top 100</button>;
};
Export as Text File
import { useExport } from "@refinedev/core";
const LogList = () => {
const { triggerExport } = useExport({
useTextFile: true,
filename: "logs",
mapData: (item) => ({
Timestamp: item.timestamp,
Level: item.level,
Message: item.message,
}),
});
return <button onClick={triggerExport}>Export Logs</button>;
};
Export with Title
import { useExport } from "@refinedev/core";
const ReportList = () => {
const { triggerExport } = useExport({
title: "Sales Report - Q1 2024",
showTitle: true,
});
return <button onClick={triggerExport}>Export Report</button>;
};
Export with Error Handling
import { useExport, useNotification } from "@refinedev/core";
const DataList = () => {
const { open } = useNotification();
const { triggerExport, isLoading } = useExport({
onError: (error) => {
open?.({
type: "error",
message: "Export Failed",
description: error.message,
});
},
});
return (
<button onClick={triggerExport} disabled={isLoading}>
Export
</button>
);
};
Advanced Export with Custom CSV Configuration
import { useExport } from "@refinedev/core";
const DataList = () => {
const { triggerExport } = useExport({
unparseConfig: {
quotes: true,
quoteChar: '"',
delimiter: ";",
header: true,
newline: "\r\n",
},
mapData: (item) => ({
ID: item.id,
Name: item.name,
Description: item.description,
Price: `$${item.price.toFixed(2)}`,
}),
});
return <button onClick={triggerExport}>Export CSV</button>;
};
Programmatic Export
import { useExport } from "@refinedev/core";
import { useEffect } from "react";
const AutoExport = () => {
const { triggerExport } = useExport({
download: false,
});
useEffect(() => {
const exportData = async () => {
const csvString = await triggerExport();
// Send to server or process further
console.log(csvString);
};
exportData();
}, []);
return null;
};
API Reference
Type definitions:
export type MapDataFn<TItem, TVariables> = (
item: TItem,
index?: number,
items?: TItem[],
) => TVariables;
type UseExportReturnType = {
isLoading: boolean;
triggerExport: () => Promise<string | undefined>;
};
The export process fetches data in batches using the getList method of your data provider. Large exports may take some time depending on your pageSize and total record count.
Use the mapData function to format your data, select specific fields, or transform values before export. This is especially useful for formatting dates, numbers, or combining multiple fields.
Setting maxItemCount to a very large number may cause performance issues or browser memory problems. Consider implementing pagination or server-side export for very large datasets.