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

Registering the element is not enough on its own. Vue and Angular need to be told that updog- tags are custom elements rather than components they should resolve.

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 one element for every framework, so it deliberately has one way to be configured. Simple values can be written as HTML attributes; everything else goes through 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

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 instead.