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 easily added to your frontend application. The React SDK and JavaScript SDK allow you to open the importer as a modal or embed it directly inline.

TableFlow requires you to provide an importerId when embedding an importer. The SDK will pull in the template schema that you set up in the Admin Dashboard, or you can override this by adding the template parameter.

import { TableFlowImporter } from "@tableflow/react";
import { useState } from "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