Import

The import wizard guides users through uploading a file, mapping columns to your schema, and resolving value mismatches. Rows then enter the grid, where users clean and edit them before submission.

importFormats

Type	DataEditorFormat[] | false
Default	All formats

Which file formats the user can import. Set to false to disable import entirely.

importFormats={["csv", "xlsx"]}

DataEditorFormat

type DataEditorFormat = "csv" | "tsv" | "xlsx" | "json" | "xml";

Shared with exportFormats.

remoteSources

Type	RemoteSource[]

Custom data sources rendered as buttons on the upload step. You own all integration complexity — auth, pickers, downloads. The SDK just calls your fetch function and processes the result.

Return a File object to go through the standard parse pipeline (CSV/XLSX/etc.), or return structured records to skip parsing entirely.

RemoteSource

type RemoteSource = {
  id: string;
  label: string;
  icon: string;
  description?: string;
  fetch: () => Promise<File | Record<string, unknown>[]>;
};

remoteSources={[
  {
    id: "google-sheets",
    label: "Google Sheets",
    icon: "<svg>...</svg>",
    fetch: async () => {
      const data = await myGoogleSheetsLib.pick();
      return data.rows;
    },
  },
]}

onColumnMatch

Type	(headers: string[], columns: DataEditorColumn[]) => Record<string, string | null> | Promise<...>

Override column matching during import. Called with the file’s headers and your column definitions. Return a map of { csvHeader: columnId | null }. Entries set to null or omitted fall back to built-in matching.

onColumnMatch={async (headers, columns) => {
  // Call your AI or matching service
  const mappings = await myMatchingService.match(headers, columns);
  return mappings;
}}

onValueMatch

Type	(valuesToMatch: Record<string, ValueMatchInput>) => ValueMatchOutput | Promise<ValueMatchOutput>

Override value matching during import for select columns. Called once after column mapping with all select columns’ imported values and allowed options.

type ValueMatchInput = {
  importedValues: string[];
  options: string[];
};

// Return: { columnId: { importedValue: optionValue | null } }
type ValueMatchOutput = Record<string, Record<string, string | null>>;

Values set to null skip auto-matching. Unmapped values fall back to built-in fuzzy matching.

onValueMatch={async (valuesToMatch) => {
  // valuesToMatch = { country: { importedValues: ["espana", "fr"], options: ["Spain", "France"] } }
  return {
    country: { espana: "Spain", fr: "France" },
  };
}}

synonyms

Type	Record<string, string[]>

Extra synonyms for column auto-matching. Keys are column IDs, values are alternative names the matching engine should recognize.

synonyms={{
  productSku: ["sku", "article_no", "item_code"],
  firstName: ["first", "given_name", "fname"],
}}

enableCreateColumn

Type	boolean
Default	true

Allow creating new columns for unmatched headers during import. When enabled, users can keep data from columns that don’t match your schema by creating dynamic columns on the fly.