Import

<ImportButton> is compatible with the useImport hook and is meant to be used as it's upload button. It uses Material UI <LoadingButton> component and native html <input> element. It wraps a <label> with a <LoadingButton> component and <input> element and accepts it's own properties for separately.

Refer to the for more detailed information about useImport. →

Usage

Use it like any other Material UI <LoadingButton>. You can use it with useImport:

/src/pages/posts/list.tsx

import { useTable, useImport } from "@pankod/refine-core";
import {
    ImportButton,
    List,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
} from "@pankod/refine-mui";

export const PostList: React.FC = () => {
    const { tableQueryResult } = useTable<IPost>();
    const { inputProps, isLoading } = useImport<IPost>();

    return (
        <List
            cardHeaderProps={{
                action: (
                    <ImportButton inputProps={inputProps} loading={isLoading} />
                ),
            }}
        >
            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell>ID</TableCell>
                        <TableCell>Title</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {tableQueryResult.data?.data.map((row) => (
                        <TableRow key={row.title}>
                            <TableCell>{row.id}</TableCell>
                            <TableCell component="th" scope="row">
                                {row.title}
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </List>
    );
};

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

It looks like this:

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 } from "@pankod/refine-mui";

export const MyImportComponent = () => {
    return <ImportButton hideText />;
};

API Reference

Properties

Property	Description	Type	Default
props	Material UI loading button properties	LoadingButtonProps
inputProps	Allows to set input props	UseImportInputPropsType
hideText	Allows to hide button text	boolean	false
loading	Sets the loading status of the button	boolean	When the request is not completed, loading is true, when it completes it's false
children	Sets the button text	ReactNode	"Import"
startIcon	Sets the icon component of button	ReactNode	<ImportExportOutlinedIcon />
svgIconProps	Allows to set icon props	SvgIconProps