Skip to main content
RefineDocumentation
Version: 5.xx.xx
Swizzle Ready

Export

<ExportButton> is a Material UI <LoadingButton> with a default export icon and a default text with "Export". It only has presentational value.

For more information, refer to the useExport documentation →

Good to know:

You can swizzle this component with the Refine CLI to customize it.

Usage​

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

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

const columns: GridColDef[] = [
  { 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} />
    </List>
  );
};

interface IPost {
  id: number;
  title: string;
}

Properties​

hideText​

hideText is used to show or hide text of the button. When true, only the button icon is visible.

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

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

API Reference​

Properties​

PropertyTypeDescriptionDefault
hideText

boolean

Whether should hide the text and show only the icon or not.

false

onClick

(PointerEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>)

Sets the handler to handle click event

loading

boolean

If true, the loading indicator is shown and the button becomes disabled. Set the loading status of button

false

svgIconProps

SvgIconProps

External Props:

It also accepts all props of Material UI Button.

Previous
Edit
Next
Import