Web Component

<updog-editor> is a custom element that wraps the React editor. Every prop documented in the rest of the reference is available — set as an HTML attribute for simple values, as a JS property for complex ones.

Register

import "@updog/data-editor-wc";

Defines <updog-editor> globally. Import once, typically at your app entry.

Attributes

Use HTML attributes for primitive values. The element observes these and re-renders on change.

Attribute	Maps to	Type
api-key	apiKey	string
primary-key	primaryKey	string
locale	locale	string
variant	variant	"editor" | "uploader"
mode	mode	"modal" | "inline"
open	open	boolean (presence = true)
rtl	rtl	boolean
readonly	readonly	boolean

<updog-editor api-key="your-key" primary-key="id" variant="uploader" readonly></updog-editor>

Properties

Everything else — objects, functions, arrays — must be set as a JS property or via configure().

const editor = document.querySelector("updog-editor");

editor.columns = [...];
editor.loadData = async (onChunk) => { ... };
editor.onComplete = async (result) => { ... };

All DataEditorProps fields are valid properties except onClose — see Events.

configure(props)

Set multiple properties at once. Useful during setup.

editor.configure({
  apiKey: "your-key",
  primaryKey: "id",
  columns: [...],
  loadData: async (onChunk) => onChunk(await fetchRows()),
  onComplete: async (result) => { await save(result); },
});

Accepts every prop except onClose. Property updates are batched — the editor re-renders once per microtask regardless of how many properties you set.

show() / hide()

Open and close the modal. Equivalent to setting open to true / false.

document.getElementById("open-btn").onclick = () => editor.show();

Both are no-ops in mode="inline".

Events

close

Fires when the user closes the modal (X button or Escape key). Replaces the React onClose prop — the WC dispatches a CustomEvent instead.

editor.addEventListener("close", () => editor.hide());

The event bubbles. Not fired in mode="inline".

Validators

Validators are plain objects, not function calls — no helper imports needed:

{ type: "required", message: "Required" }
{ type: "email", message: "Invalid email" }
{ type: "regex", pattern: "^\\+[\\d\\s]+$", message: "Invalid phone" }
{ type: "range", min: 0, max: 100 }
{ type: "oneOf", values: ["A", "B"], message: "Invalid option" }

See Columns for the full list.

Minimal Example

<button id="open-btn">Open Editor</button>
<updog-editor id="editor" api-key="your-key" primary-key="id"></updog-editor>

<script type="module">
  import "@updog/data-editor-wc";

  const editor = document.getElementById("editor");

  editor.configure({
    columns: [
      { id: "name", title: "Name", validators: [{ type: "required", message: "Required" }] },
      { id: "email", title: "Email", validators: [{ type: "required", message: "Required" }, { type: "email", message: "Invalid" }] },
    ],
    loadData: async (onChunk) => onChunk(await fetch("/api/rows").then(r => r.json())),
    onComplete: async (result) => { console.log(result); },
  });

  document.getElementById("open-btn").onclick = () => editor.show();
  editor.addEventListener("close", () => editor.hide());
</script>