React

The unique ID for the importer. The SDK used this ID to pull in the template schema that you set up in the Admin Dashboard, or you can override this by adding the template parameter. Obtain from your importer in the TableFlow admin app.

When set to true (default value), the importer will behave as a modal with its open state controlled by modalIsOpen. When set to false, the importer will be embedded directly in your page.

Only used when isModal is true: Controls the importer modal being open or closed.

Only used when isModal is true: A function called when the user clicks the close button or clicks outside of (when used with modalCloseOnOutsideClick) the importer. useState can be used to control the importer modal opening and closing.

const [isOpen, setIsOpen] = useState(false);

<button onClick={() => setIsOpen(true)}>Open TableFlow Importer</button>
<TableFlowImporter
  modalIsOpen={isOpen}
  modalOnCloseTriggered={() => setIsOpen(false)}
  ...
/>

It also includes an optional parameter, importComplete, to show if the import was completed before being closed. importComplete will be true if the user successfully submits an import and will become false again if they choose “Upload another file” after submission.

modalOnCloseTriggered={(importComplete?: boolean) => {}}

Only used when isModal is true: Clicking outside of the modal will call the modalOnCloseTriggered function.

Configure the columns used for the import. If provided, this template will override what is defined in your importer in the TableFlow admin app. This can be useful if columns you want your users importing change depending on a condition in your application.

See the full schema and available options for Templates.

template={{
  columns: [
    {
      name: "First Name",
      key: "first_name",
      required: true,
      description: "The first name of the user",
      suggested_mappings: ["First", "Name"],
      data_type: "string",
      validations: [
        {
          validate: "not_blank",
          message: "Cell must contain a value",
        },
      ],
    },
    {
      name: "Age",
      data_type: "number",
    },
  ],
}}

Allows users to import a file without mapping their columns to a template. With this option enabled, the Review screen lets users input custom destination column keys, or use pre-generated keys based on the column names. Note this option will override both the template in the TableFlow admin app and the template prop, if provided.

Toggle between dark mode (true) and light mode (false).

Specifies the primary color for the importer in hex format. Use customStyles to customize the UI in more detail.

primaryColor="#7A5EF8"

Provides a CSS class for the container.

Apply custom styles to the importer with an object containing CSS properties and values. Note that custom style properties will override primaryColor and any default styles from darkMode. Available options:

customStyles={{
  "font-family": "cursive",
  "font-size": "15px",
  "base-spacing": "2rem",
  "border-radius": "8px",
  "color-primary": "salmon",
  "color-primary-hover": "crimson",
  "color-secondary": "indianRed",
  "color-secondary-hover": "crimson",
  "color-tertiary": "indianRed",
  "color-tertiary-hover": "crimson",
  "color-border": "lightCoral",
  "color-text": "brown",
  "color-text-soft": "rgba(165, 42, 42, .5)",
  "color-text-on-primary": "#fff",
  "color-text-on-secondary": "#ffffff",
  "color-background": "bisque",
  "color-background-modal": "blanchedAlmond",
  "color-input-background": "blanchedAlmond",
  "color-input-background-soft": "white",
  "color-background-menu-hover": "bisque",
  "color-importer-link": "indigo",
  "color-progress-bar": "darkGreen"
}}

Completely customize every aspect of the importer by passing in CSS overrides.

cssOverrides={{
  "Main_content": "height: auto",
  "Main_wrapper": "justify-content: flex-start; padding-top: var(--m)",
  "Main_header": "margin-bottom: var(--m-xxs)",
  "Stepper-module_stepper": "gap: var(--m-l)",
  "Stepper-module_step": "flex-direction: column",
  "Stepper-module_step:before": "display: none",
  "Default-module_td span": "font-size: 0.875rem",
  "Input-module_small Input-module_inputWrapper": "font-size: 0.875rem",
  "Checkbox-module_container input[type=checkbox]": "width: var(--m-s); height: var(--m-s)",
  "Checkbox-module_container input[type=checkbox]::before": "width: var(--m-xxs); height: var(--m-xxs)",
  "Uploader_box": "display: none"
}}

Pass metadata as a JSON object or string. This metadata will be available when retrieving imported data via the API. An example use case is associating a user ID in your application to an import so when the data is retrieved, you’ll know which user the data belongs to.

metadata={{
  user_id: 1234,
  user_email: "test@example.com",
  environment: "dev"
}}

Callback function that fires when a user completes an import. It returns data, an object that contains the row data, column definitions, and other information about the import.

onComplete={(data) => console.log(data)}

Example data:

{
  "id": "da5554e3-6c87-41b2-9366-5449a2f15b53",
  "importer_id": "a0fadb1d-9888-4fcb-b185-25b984bcb227",
  "num_rows": 2,
  "num_columns": 3,
  "num_processed_values": 5,
  "metadata": {
    "user_id": 1234,
    "user_email": "user@example.com",
    "environment": "staging"
  },
  "created_at": 1698172312,
  "error": null,
  "columns": [
    {
      "data_type": "number",
      "key": "age",
      "name": "Age"
    },
    {
      "data_type": "string",
      "key": "email",
      "name": "Email"
    },
    {
      "data_type": "string",
      "key": "first_name",
      "name": "First Name"
    }
  ],
  "rows": [
    {
      "index": 0,
      "values": {
        "age": 23,
        "email": "maria@example.com",
        "first_name": "Maria"
      }
    },
    {
      "index": 1,
      "values": {
        "age": 32,
        "email": "robert@example.com",
        "first_name": "Robert"
      }
    }
  ]
}

When set to true, the importer will not display the final completion screen after the import is submitted. Instead, it will stay in a loading state until it is closed programmatically.

When set to false, hide the Download Template button on the first screen of the importer.

When set to true, the importer will not display and skip the Header Row Selection step and always choose the first row in the file as the header.

The URL of where the importer iframe is hosted. This should only be set when self-hosting TableFlow.

When set to true, all leading and trailing spaces in cells will be removed during the initial file upload.

When set to false, hide the “Upload another file” button on the Review screen of the importer.