Version: 4.xx.xxSwizzle Ready
Import
http://localhost:3000
const { default: routerProvider } = LegacyRefineReactRouterV6;
const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
legacyRouterProvider: routerProvider,
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
notificationProvider: RefineMantine.notificationProvider,
Layout: RefineMantine.Layout,
Sider: () => null,
catchAll: <RefineMantine.ErrorComponent />,
});
const Wrapper = ({ children }) => {
return (
<MantineCore.MantineProvider
theme={RefineMantine.LightTheme}
withNormalizeCSS
withGlobalStyles
>
<MantineCore.Global
styles={{ body: { WebkitFontSmoothing: "auto" } }}
/>
<MantineNotifications.NotificationsProvider position="top-right">
{children}
</MantineNotifications.NotificationsProvider>
</MantineCore.MantineProvider>
);
};
<ImportButton>
is compatible with the useImport
hook and is meant to be used as it's upload button.
It uses Mantine <Button>
component and native html <input>
element. It wraps a <label>
with a <Button>
component and <input>
element and accepts it's own properties for separately.
http://localhost:3000
import { useImport, useNotification } from "@refinedev/core";
import {
List,
ImportButton,
} 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 { open } = useNotification();
const { inputProps, isLoading } = useImport({
onFinish: () => {
open?.({
message: "Import successfully completed",
type: "success",
});
},
});
return (
<List
headerButtons={
<ImportButton loading={isLoading} inputProps={inputProps} />
}
>
<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 { ImportButton } from "@refinedev/mantine";
const MyImportComponent = () => {
return <ImportButton hideText />;
};