JavaScript SDK

Following up on our release of the React SDK, we wanted to add support for teams that use other frontend frameworks. To do this we created a JavaScript SDK, giving developers 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 our JavaScript or React SDK, 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. 

(If you’re not using JavaScript modules, you can use the example here to add the importer directly to your HTML)

import createTableFlowImporter from "@tableflow/js";

const args = {
  importerId: "53a84496-819d-4ec6-93b7-b4b56fb676ad", // Replace with your importer ID from https://app.tableflow.com/importers
  darkMode: true,
  primaryColor: "#7a5ef8",
  metadata: '{"userId": 1234, "userEmail": "test@example.com"}',
  onRequestClose: () => importer.close(),
  onComplete: (data, error) => {
    if (error) {
      alert(error); // Handle import error
    } else {
      console.log(data); // Use import data
    }
  }
};
const importer = createTableFlowImporter(args);

const uploadButton = document.getElementById("uploadButton");
uploadButton.addEventListener("click", () => {
  importer?.showModal();
});

Finally, test out your importer by clicking the button and uploading a file. When the import is complete, you can consume your data using an onComplete callback function, view and download your data on TableFlow as a CSV, or retrieve it via the API.

‍

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