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

Property	Type	Description	Default
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`

Properties​

hideText​

API Reference​

Properties​

Properties

hideText

API Reference

Properties