Skip to main content

🦄 Data Importer

tip

The Data Importer is a pre-built component that can be added to your app. However, it is entirely powered by the Segna API! If you want to use your own UI, head over to our APIs section to see how you can hook in Segna's functionality into your own flow!

Overview

The Data Importer is an out-of-the-box component that can be added to your app in minutes. The component renders a button, which then opens a modal that takes your users through an data upload flow.

Example steps:

Select page

The Data Importer automatically and by default will:

  • Identify the header column and data of the uploaded file or Google Sheet (e.g. when surrounded by junk/empty rows/columns)
  • Drop any empty rows and columns
  • Remove unnecessary whitespaces
  • Request the user to select a sheet if they upload an Excel workbook with multiple sheets
  • Automatically match the data being uploaded to the desired schema on your Pipeline, and prompt for user confirmation if our confidence is below 80%.
  • Perform any transformations specified on the Pipeline such as:
    • Data type conversion (rich text, category, date-time, number)
    • Date-time formats and UTC
    • Dropping rows in columns where missing values are not allowed
  • Output to the database of your choice specified on your Pipeline

However, the Data Importer is also completely configurable - you can programmatically specify what steps are presented to your users, as well as configure each step to expose more of Segna's functionality to suit your use case.

Using the Data Importer

info

Make sure you run segna.initialize in your application before rendering the component! Please refer to Getting Started docs for details!

import { DataImporter } from '@segna/segna-sdk';

...
<DataImporter pipelineId={"<YOUR_PIPELINE_ID>"} />
...

The above component will render a button, which will then open a modal with the data importing flow.