Skip to content
Updog Docs

Other Frameworks

Install

Section titled “Install”
Terminal window
npm install @updog/data-editor-wc

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

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

This defines <updog-editor> globally.

Minimal Example

Section titled “Minimal Example”
<button id="open-btn">Open Editor</button>
<updog-editor id="editor"></updog-editor>


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


  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.