Skip to main content
Version: 4.xx.xxSwizzle Ready

Export

<ExportButton> is a Material UI <LoadingButton> 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. β†’

Swizzle

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:

http://localhost:3000/posts
import { useExport } from "@refinedev/core";
import {
useDataGrid,
List,
ExportButton,
} from "@refinedev/mui";
import { DataGrid, GridColumns } from "@mui/x-data-grid";

const columns: GridColumns = [
{ field: "id", headerName: "ID", type: "number" },
{ field: "title", headerName: "Title", minWidth: 400, flex: 1 },
];

const PostsList: React.FC = () => {
const { dataGridProps } = useDataGrid<IPost>();

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

return (
<List
headerButtons={
<ExportButton onClick={triggerExport} loading={exportLoading} />
}
>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</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.

http://localhost:3000
import { ExportButton } from "@refinedev/mui";

const MyExportComponent = () => {
return (
<ExportButton
hideText={true}
/>
);
};

API Reference​

Properties​

External Props

It also accepts all props of Material UI LoadingButton.