Skip to main content
Version: 3.xx.xx

Import

<ImportButton> is compatible with the useImport hook and is meant to be used as it's upload button. It uses Ant Design's <Button> and <Upload> components. It wraps a <Button> component with an <Upload> component and accepts properties for <Button> and <Upload> components separately.

Usage

/src/pages/posts/list.tsx
import {
List,
Table,
useTable,
useImport,
ImportButton,
} from "@pankod/refine-antd";

export const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();

const importProps = useImport<IPostFile>();

return (
<List
pageHeaderProps={{
extra: <ImportButton {...importProps} />,
}}
>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column dataIndex="title" title="Title" />
</Table>
</List>
);
};

interface IPost {
id: string;
title: string;
}

interface IPostFile {
title: string;
categoryId: string;
}

Will look like this:

Default import button

Properties

hideText

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

import { ImportButton, useImport } from "@pankod/refine-antd";

export const MyRefreshComponent = () => {
const importProps = useImport();

return <ImportButton {...importProps} hideText />;
};

API Reference

Properties

PropertyDescriptionTypeDefault
uploadPropsSets the button typeUploadProps
buttonPropsSets the icon component of buttonButtonProps
hideTextAllows to hide button textbooleanfalse
childrenSets the button textReactNode"Import"