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

Import

<ImportButton> is compatible with the useImport hook and is meant to be used as it's upload button.

It uses Chakra UI's <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 "@pankod/refine-core";
import {
List,
TableContainer,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
ImportButton,
} from "@pankod/refine-chakra-ui";
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 { open } = useNotification();

const { inputProps, isLoading } = useImport({
onFinish: () => {
open?.({
message: "Import successfully completed",
type: "success",
});
},
});

return (
<List
headerButtons={
<ImportButton loading={isLoading} inputProps={inputProps} />
}
>
<TableContainer>
<Table variant="simple" whiteSpace="pre-line">
<Thead>
{getHeaderGroups().map((headerGroup) => (
<Tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<Th key={header.id}>
{!header.isPlaceholder &&
flexRender(
header.column.columnDef
.header,
header.getContext(),
)}
</Th>
);
})}
</Tr>
))}
</Thead>
<Tbody>
{getRowModel().rows.map((row) => {
return (
<Tr key={row.id}>
{row.getVisibleCells().map((cell) => {
return (
<Td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</Td>
);
})}
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</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 "@pankod/refine-chakra-ui";

const MyImportComponent = () => {
return <ImportButton colorScheme="black" hideText />;
};

API Reference​

Properties​