After configuring your importer, you’re ready to embed it inside of your app.

You can also link to a hosted importer using Shareable Links

TableFlow is designed to be added to your frontend with ease. The React SDK and JavaScript SDK allow you to open the importer as a modal or embed it directly inline.

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
        importerId={"6de452a2-bd1f-4cb3-b29b-0f8a2e3d9353"} // Use your importer ID
        modalIsOpen={isOpen}
        modalOnCloseTriggered={() => setIsOpen(false)}
        darkMode={true}
        metadata={{"user_id": 1234}} // Pass through user or import info
        onComplete={(data) => console.log(data)}
      />
    </>
  );
}

If you want to add additional metadata to your import, such as wanting to know which user ID in your application uploaded a file, you can set the “metadata” property with any data as JSON.

Configure ImporterRetrieve Data