Import

http://localhost:3000

Live previews only work with the latest documentation.

const { default: routerProvider } = RefineReactRouterV6
const { default: simpleRest } = RefineSimpleRest
setRefineProps({
  routerProvider,
  dataProvider: simpleRest('https://api.fake-rest.refine.dev'),
  Layout: RefineChakra.Layout,
  Sider: () => null,
  catchAll: <RefineChakra.ErrorComponent />,
})

const Wrapper = ({ children }) => {
  return (
    <RefineChakra.ChakraProvider theme={RefineChakra.refineTheme}>
      {children}
    </RefineChakra.ChakraProvider>
  )
}

<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 it's own properties for separately.

http://localhost:3000

Live previews only work with the latest documentation.

import { useImport, useNotification } from '@pankod/refine-core'
import {
  List,
  TableContainer,
  Table,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  ImportButton,
} from '@pankod/refine-chakra-ui'
import { useTable, ColumnDef, flexRender } from '@pankod/refine-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
}

Swizzle

You can swizzle this component to customize it with the refine CLI

Properties

hideText

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

http://localhost:3000

Live previews only work with the latest documentation.

import { ImportButton } from '@pankod/refine-chakra-ui'

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

API Reference

Properties