---
name: CsvUploader
menu: Components
---

import { Playground, PropsTable } from 'docz';
import { Formik } from 'formik';
import { validators, formatters } from '~/misc';

import { FormItem } from '~/components/FormItem';
import { CsvUploader, CsvUploaderPrimitive } from '../';

# CsvUploader

<PropsTable of={CsvUploader} />

## Basic usage

<Playground>
  <CsvUploaderPrimitive
    csvConfig={{
      columns: [
        {
          name: 'Address',
          validators: [validators.isString, validators.isNotEmpty],
        },
        {
          name: 'Sale Lockup',
          validators: [validators.isDate, validators.isNotEmpty],
        },
        {
          name: 'Purchase Lockup',
          validators: [validators.isDate, validators.isNotEmpty],
        },
      ],
      header: true,
      strict: true,
    }}
    onChange={() => {}}
  >
    <CsvUploaderPrimitive.CsvErrors />
    <CsvUploaderPrimitive.CsvPreview
      tableConfig={{
        columns: [
          {
            accessor: 'Address',
            Header: 'Address',
            Cell: ({ value }) => formatters.toShortAddress(value, { size: 26 }),
          },
          {
            accessor: 'Sale Lockup',
            Header: 'Sale Lockup',
          },
          {
            accessor: 'Purchase Lockup',
            Header: 'Purchase Lockup',
          },
        ],
      }}
      height={200}
    />
  </CsvUploaderPrimitive>
</Playground>

## As Formik component

<Playground>
  <Formik
    initialValues={{ myFile: null }}
    render={formValues => (
      <form>
        <pre>{JSON.stringify(formValues.values, null, 2)}</pre>
        <FormItem name="myFile">
          <FormItem.Input
            component={CsvUploader}
            config={{
              columns: [
                {
                  name: 'column 1',
                  validators: [validators.isString, validators.isNotEmpty],
                },
                {
                  name: 'column 2',
                  validators: [validators.isString, validators.isNotEmpty],
                },
              ],
              header: true,
              maxRows: 2,
            }}
          />
        </FormItem>
      </form>
    )}
  />
</Playground>
