Skip to main content
Version: 4.xx.xx
Swizzle 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 its own properties separately.

localhost:3000
import { useImport, useNotification } from "@refinedev/core";
import {
List,
ImportButton,
} from "@refinedev/chakra-ui";
import {
TableContainer,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
} from "@chakra-ui/react";
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} />
}
>
<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;
}
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 { ImportButton } from "@refinedev/chakra-ui";

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

API Reference

Properties

PropertyTypeDescriptionDefault
hideText

boolean

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

false

inputProps

UseImportInputPropsType

svgIconProps

Omit<IconProps, "ref">

loading

boolean

Set the loading status of button

false