React SDK

Minimizing engineering time is one of our main focuses at TableFlow. We know firsthand how time-consuming adding CSV import to an application can be despite sounding simple at first. There are endless edge cases to consider with your user’s data being in any number of formats.

We want to provide engineers with a drop-in solution to import CSV and Excel files from their users. 

TableFlow consists of a few different components:

• The backend to handle data processing and validation
• An interface to create and configure your import schema without having to update your code
• And an embeddable importer, via on of our frontend SDKs, which launches a modal to handle the file upload, data mapping, validation, and more:

‍

How to use the SDK

First, create your importer. An importer allows you to define your schema (which columns you expect your users to upload), add validations, and view and consume the cleaned and validated data from your users. If you are using TableFlow cloud you can create and view your importers here. 

Then, embed the importer using the SDK setting the importerId and other parameters such as darkMode 😈. You can copy+paste the code pre-filled with your importerId on the “Code” table of the importer on TableFlow cloud. 

import { useState } from "react";
import { TableFlowImporter } from "@tableflow/react";

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open TableFlow Importer</button>

      <TableFlowImporter
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        importerId={"53a84496-819d-4ec6-93b7-b4b56fb676ad"} // Replace with your importer ID from https://app.tableflow.com/importers
        darkMode={true}
        primaryColor="#7A5EF8"
        closeOnClickOutside={true}
        metadata={"{\"userId\": 1234, \"userEmail\": \"test@example.com\"}"}
      />
    </>
  );
}

Test out your importer by clicking the button and uploading a file. When the import is complete, you can view your and download your data on TableFlow as a CSV, retrieve it via the API, or receive the data directly in the frontend using the onComplete event: 

Next steps

The onComplete event listener allows you to consume imported data directly in your frontend application. You can find more details on the feature here.

onComplete={(data, error) => {
  if (error) {
    alert(error); // Handle import error
  } else {
    console.log(data); // Use import data
  }
}}

Need help or have a feature request? Reach out to us over Slack!