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

Export

<ExportButton> is an Mantine <Button> with a default export icon and a default text with "Export". It only has presentational value.

localhost:3000
import { useExport } from "@refinedev/core";
import {
List,
ExportButton,
} from "@refinedev/mantine";
import { Table, Pagination } from "@mantine/core";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

const PostList: React.FC = () => {
const columns = React.useMemo<ColumnDef<IPost>[]>(
() => [
{
id: "id",
header: "ID",
accessorKey: "id",
},
{
id: "title",
header: "Title",
accessorKey: "title",
},
],
[],
);

const {
getHeaderGroups,
getRowModel,
refineCore: { setCurrent, pageCount, current },
} = useTable({
columns,
});

const { triggerExport, isLoading: exportLoading } = useExport<IPost>({
mapData: (item) => {
return {
id: item.id,
post_title: item.title,
};
},
pageSize: 10,
maxItemCount: 50,
});

return (
<List
headerButtons={
<ExportButton loading={exportLoading} onClick={triggerExport} />
}
>
<Table>
<thead>
{getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</Table>
<br />
<Pagination
position="right"
total={pageCount}
page={current}
onChange={setCurrent}
/>
</List>
);
};

interface IPost {
id: number;
title: string;
}
Good to know:

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

Properties

hideText

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

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

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

API Reference

Properties

PropertyTypeDescriptionDefault
hideText

boolean

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

false

onClick

PointerEventHandler<HTMLButtonElement>

Sets the handler to handle click event

loading

boolean

Indicate loading state Set the loading status of button

false

svgIconProps

Omit<IconProps, "ref">