Loading Data

loadData

Type	(onChunk: (rows: TRow[], options?: ChunkSourceOptions) => void) => Promise<void>

Async function that feeds data into the editor. Called once when the editor opens. Call onChunk one or more times to stream rows in batches. The editor processes each chunk without blocking the UI.

loadData={async (onChunk) => {
  const res = await fetch("/api/employees");
  const rows = await res.json();
  onChunk(rows);
}}

Multi-Source Loading

Tag chunks with a data source to separate data from different origins. Sources are auto-registered on first encounter.

loadData={async (onChunk) => {
  const [sf, hs] = await Promise.all([fetchSalesforce(), fetchHubspot()]);

  onChunk(sf.chunk1, { source: "Salesforce" });
  onChunk(sf.chunk2, { source: "Salesforce", done: true });

  onChunk(hs.data, { source: "HubSpot", deletable: true, done: true });
}}

Chunks without options go to “Existing Data”. You can mix tagged and untagged chunks freely.

ChunkSourceOptions

Field	Type	Default	Description
source	string	—	Display name for the data source. When omitted, the chunk goes to “Existing Data”.
id	string	source value	Stable identifier.
deletable	boolean	false	Whether the user can delete this source from the editor.
done	boolean	false	Marks this source as finished loading. Shows a completion state in the UI.
changes	InitialRowChange[]	—	Seed previous edit state for rows in this chunk. See Seeding Previous Changes.

Source Lifecycle

• The first onChunk call with a new source auto-registers it and starts its loading indicator.
• Set done: true to mark a source as finished. You can send an empty chunk: onChunk([], { source: "CRM", done: true }).
• When the loadData promise resolves, any source still loading is automatically finalized.

Seeding Previous Changes

Resume a previous editing session by passing change descriptors alongside rows. The editor opens with the diff already visible.

loadData={async (onChunk) => {
  const rows = await fetchCurrentState();

  onChunk(rows, {
    changes: [
      { index: 2, originalValues: { name: "John" } },
      { index: 5, isNew: true },
      { index: 8, isDeleted: true },
    ]
  });
}}

InitialRowChange

Field	Type	Description
index	number	Index of this row within the chunk’s rows array.
originalValues	Partial<TRow>	Original field values before edits. Only fields that differ. Marks the row as edited.
isNew	boolean	Row was added in a previous session.
isDeleted	boolean	Row is pending deletion.

Flags can be combined. Seeded changes are the session baseline (not undoable). Reverting a cell to its original value clears the edited flag. onComplete returns deltas relative to the original data. The SDK does not persist changes between sessions.

sampleData

Type	Record<string, unknown>[]

Sample rows included in the “Download Example” file. When the user clicks “Download Example” in the import wizard, the SDK generates a template file with column headers and these rows.

When omitted, a generic example row is auto-generated from column definitions.

sampleData={[
  { name: "Jane Smith", email: "jane@example.com", role: "Admin" },
  { name: "John Doe", email: "john@example.com", role: "Editor" },
]}