Core Props

Every prop <DataEditor /> accepts, in alphabetical order. Props that have a page of their own are listed here with a link to it.

Prop	Type	Default
apiKey	string	Required
blockSubmitOnError	boolean	false
chat	DataEditorChat	—
className	string	—
columns	DataEditorColumn[]	Required
enableAddRow	boolean	true
enableAddSource	boolean	true
enableCreateColumn	boolean	true
enableDeleteRow	"all" | "new" | false	false
exportFormats	DataEditorFormat[] | false	All formats
headerHeight	number	36
importFormats	DataEditorFormat[] | false	All formats
loadData	(onChunk) => Promise<void>	—
locale	string	"en"
localStorage	false | { licenseGrant?: boolean }	{ licenseGrant: true }
mode	"modal" | "inline"	"modal"
onClose	() => void	Modal mode only
onColumnMatch	(headers, columns) => map	—
onComplete	(result) => void | Promise<void>	—
onError	(error: UpdogError) => void	—
onValueMatch	(valuesToMatch) => map	—
open	boolean	Modal mode only
primaryKey	keyof TRow	Required
readonly	boolean	false
remoteSources	RemoteSource[]	—
rowHeight	number	34
rtl	boolean	false
sampleData	Record<string, unknown>[]	—
synonyms	Record<string, string[]>	—
translations	DataEditorTranslations	—
variant	"editor" | "uploader" | "viewer"	"editor"

apiKey

Type	string
Required	Yes

Your Updog license key. Validated on each open.

<DataEditor apiKey="your-license-key" ... />

blockSubmitOnError

Type	boolean
Default	false

Disables the submit button while any row has a validation error. When false, errors are flagged but the user can still submit.

When set, submission is also blocked while remote checks are in flight (isAsyncValidating) — a value that is about to come back “already exists” cannot slip through. The 60-second inactivity timeout on remote checks guarantees this gating can never wedge. When unset (the default), in-flight checks never block submission and unresolved cells pass through as unverified.

<DataEditor blockSubmitOnError ... />

chat

Type	DataEditorChat<TRow>

Bring-your-own-AI chat. When provided, a chat panel is shown alongside the grid. You own the AI integration. The SDK hands you dataset context and renders the streamed response.

See Bring Your Own AI.

className

Type	string

CSS class added to the wrapper element. Use for scoped styling overrides.

columns

Type	DataEditorColumn[]
Required	Yes

The schema your app expects. Each column defines an id, a title, and optionally an editor, validators, a transformer, a formatter, and a filter.

See Columns for every column-level prop.

enableAddRow

Type	boolean
Default	true

Controls whether users can manually add rows. When true, the data sources panel shows an “Add row” button, and the row context menu offers Insert row above, Insert row below, and Duplicate row. When false, all four entry points are hidden — users can only edit existing rows or import data.

<DataEditor enableAddRow={false} ... />

enableAddSource

Type	boolean
Default	true

Controls whether the “Add data source” button appears in the data sources panel. When false, the button is hidden — users can’t open the add-source menu (import data, add row) from the panel.

<DataEditor enableAddSource={false} ... />

enableCreateColumn

Type	boolean
Default	true

Allow creating new columns for unmatched headers during import. When enabled, users can keep data from file columns that do not match your schema.

See enableCreateColumn.

enableDeleteRow

Type	"all" | "new" | false
Default	false

Controls row deletion via the right-click context menu.

• false — deletion disabled
• "new" — only manually added or imported rows can be deleted
• "all" — any row can be deleted

<DataEditor enableDeleteRow="all" ... />

exportFormats

Type	DataEditorFormat[] | false
Default	All formats

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

<DataEditor exportFormats={["csv", "xlsx"]} ... />

See DataEditorFormat for the full list of formats.

headerHeight

Type	number
Default	36

Header row height in pixels.

importFormats

Type	DataEditorFormat[] | false
Default	All formats

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

See importFormats.

loadData

Type	(onChunk) => Promise<void>

Async function that feeds existing data into the editor. Called once when the editor opens. Call onChunk one or more times to stream rows in batches.

See Loading Data.

locale

Type	string
Default	"en"

BCP 47 locale tag used to pick plural forms. It does not load translations and it does not switch the language.

See locale.

localStorage

Type	false | { licenseGrant?: boolean }
Default	{ licenseGrant: true }

Controls what the editor stores in localStorage. Set to false to disable all local storage usage.

• licenseGrant — cache the license validation result to skip re-validation on reload. Defaults to true.

mode

Type	"modal" | "inline"
Default	"modal"

Rendering mode. "modal" wraps the editor in a full-screen dialog overlay. "inline" renders it directly in the DOM.

onClose

Type	() => void
Required	Modal mode only

Called when the user closes the modal (X button or Escape key). If the user has unsaved changes, the SDK shows a confirmation dialog before calling onClose.

onColumnMatch

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

Override column matching during import. Return a map of fileHeader to column ID. Unmapped or null entries fall back to built-in matching.

See onColumnMatch.

onComplete

Type	(result: DataEditorResult<TRow>) => void | Promise<void>

Called when the user clicks Submit. Receives the edited data grouped by source.

See Submitting.

onError

Type	(error: UpdogError) => void

Called when the SDK catches an internal error. The SDK recovers where it can. Use this for logging and monitoring.

See Error Handling.

onValueMatch

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

Override value matching for select columns during import. Return a map of column ID to imported-value pairs.

See onValueMatch.

open

Type	boolean
Required	Modal mode only

Controls modal visibility. This is a controlled prop — you manage the state.

primaryKey

Type	keyof TRow
Required	Yes

The column that uniquely identifies each row, like id or email.

<DataEditor<Employee> primaryKey="id" ... />

readonly

Type	boolean
Default	false

When true, hides all editing UI. The grid becomes view-only.

remoteSources

Type	RemoteSource[]

Your own remote data sources, rendered as buttons on the upload step. You own the integration. The SDK renders the button and processes the result of fetch().

See remoteSources.

rowHeight

Type	number
Default	34

Row height in pixels.

rtl

Type	boolean
Default	false

Enable right-to-left layout. Affects grid direction, text alignment, scrollbar position, and the column order in exported files.

See rtl.

sampleData

Type	Record<string, unknown>[]

Sample rows included in the Download Example file offered by the import wizard. When omitted, a generic example row is generated from your column definitions.

See sampleData.

synonyms

Type	Record<string, string[]>

Extra aliases layered on top of the built-ins, for both column matching and value matching. Each key is the canonical target, and the array lists the aliases.

See synonyms.

translations

Type	DataEditorTranslations

Override any UI string. Pass a partial object. Only the keys you provide are replaced. This is the prop that changes the language.

See Localization.

variant

Type	"editor" | "uploader" | "viewer"
Default	"editor"

Controls the initial view. "editor" opens directly to the spreadsheet grid. "uploader" opens the file import wizard first — the user uploads a file, maps columns, fixes errors, then continues to the grid. "viewer" renders a read-only, chrome-free grid with no filters sidebar, footer, or chat. It is always read-only regardless of the readonly prop.