Other Frameworks

Install

npm

npm install @updog/data-editor-wc

pnpm

pnpm add @updog/data-editor-wc

yarn

yarn add @updog/data-editor-wc

Register the custom element once, typically in your app’s entry point:

import "@updog/data-editor-wc";
import "@updog/data-editor-wc/styles.css";

This defines <updog-editor> globally. Both imports are required. Without the stylesheet the editor renders unstyled.

Framework setup

Vue and Angular try to resolve updog- tags as their own components. Tell each of them that these tags are custom elements.

Vue

vite.config.ts

vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("updog-"),
    },
  },
})

Without this, Vue logs Failed to resolve component: updog-editor and renders nothing.

Angular

@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})

Register the stylesheet in angular.json instead of importing it in the component:

"styles": ["@updog/data-editor-wc/styles.css", "src/styles.css"]

Svelte

No setup required. Svelte passes unknown tags straight through to the DOM.

Vanilla JS

No setup required.

What goes where

<updog-editor> is the same element in every framework and takes its configuration one way. Write simple values as HTML attributes and pass everything else to configure().

	How to set it	Works in
api-key, primary-key, variant, mode, locale	HTML attribute	every framework
open, rtl, readonly	HTML attribute (presence means true)	every framework
columns, loadData, translations, remoteSources, synonyms, …	configure()	every framework
onComplete, onError, onColumnMatch, onValueMatch	configure()	every framework
closing the modal	close event	every framework

The primary-key attribute carries a single column. A key built from several columns goes through the primaryKey property or configure(), like every other non-primitive prop.

Set the key one way or the other, never both. The attribute and the property write to the same place, so the later write replaces the earlier one, and a framework template can rewrite the attribute on any re-render.

Never put a callback in a template

Do not write onComplete as a binding in your template. In Vue and Svelte it silently does nothing, and in Angular the build fails.

<!-- wrong -->
<updog-editor :onComplete="save" />

// right
editor.configure({ onComplete: save });

Minimal example

<button id="open-btn">Open Editor</button>
<updog-editor id="editor"></updog-editor>

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

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

  editor.configure({
    apiKey: "your-license-key",
    columns: [
      { id: "name", title: "Full Name", size: 200, validators: [{ type: "required", message: "Name is required" }] },
      { id: "email", title: "Email", size: 250, validators: [{ type: "required", message: "Email is required" }, { type: "email", message: "Invalid email" }] },
      { id: "role", title: "Role", editor: { type: "select", options: ["Admin", "Editor", "Viewer"] } },
    ],
    primaryKey: "id",
    loadData: async (onChunk) => {
      const res = await fetch("/api/employees");
      const rows = await res.json();
      onChunk(rows);
    },
    onComplete: async (result) => {
      console.log("Sources:", result.sources);
      console.log("Counts:", result.counts);
    },
  });

  document.getElementById("open-btn").addEventListener("click", () => editor.show());
  editor.addEventListener("close", () => console.log("Editor closed"));
</script>

configure() accepts the same props as the React component, minus open and onClose. Use show(), hide(), and the close event for those.