Skip to main content
Version: 3.xx.xx

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. β†’

Usage

Use it like any other Ant Design <Button>. You can use it with useExport:

/src/pages/posts/list.tsx
import { useExport, useTable } from "@pankod/refine-core";
import {
ExportButton,
List,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from "@pankod/refine-mui";

export const PostList: React.FC = () => {
const { tableQueryResult } = useTable<IPost>();

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

return (
<List
cardHeaderProps={{
action: (
<ExportButton
onClick={triggerExport}
loading={exportLoading}
/>
),
}}
>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Title</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tableQueryResult.data?.data.map((row) => (
<TableRow key={row.title}>
<TableCell>{row.id}</TableCell>
<TableCell component="th" scope="row">
{row.title}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</List>
);
};

interface IPost {
id: number;
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-mui";

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

API Reference

Properties

PropertyDescriptionTypeDefault
propsMaterial UI loading button propertiesLoadingButtonProps
hideTextAllows to hide button textbooleanfalse
loadingSets the loading status of the buttonbooleanWhen the request is not completed, loading is true, when it completes it's false
childrenSets the button textReactNode"Export"
startIconSets the icon component of buttonReactNode<ImportExportOutlinedIcon />
svgIconPropsAllows to set icon propsSvgIconProps