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

Export

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

http://localhost:3000
import { useExport } from "@pankod/refine-core";
import {
List,
Table,
Pagination,
ExportButton,
} from "@pankod/refine-mantine";
import { useTable, ColumnDef, flexRender } from "@pankod/refine-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;
}
Swizzle

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

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 "@pankod/refine-mantine";

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

API Reference​

Properties​