Import

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

It uses Mantine'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.

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;
}

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/mantine";

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

API Reference

Properties

Property	Type	Description	Default
hideText	`boolean`	Whether should hide the text and show only the icon or not.	`false`
loading	`boolean`	Indicate loading state Set the loading status of button	`false`
inputProps ﹡	`UseImportInputPropsType`
svgIconProps	`Omit<IconProps, "ref">`

Properties​

hideText​

API Reference​

Properties​

Properties

hideText

API Reference

Properties