CSV importer and spreadsheet editor for Svelte

<script lang="ts">
  import "@updog/data-editor-wc";
  import "@updog/data-editor-wc/styles.css";
  import type { UpdogEditorElement } from "@updog/data-editor-wc";

  const columns = [
    { id: "name", title: "Name" },
    {
      id: "passport",
      title: "Passport",
      validators: [{ type: "required", message: "Passport is required" }],
    },
  ];

  let editorEl: UpdogEditorElement | undefined = $state();

  $effect(() => {
    if (!editorEl) return;
    const el = editorEl;
    el.configure({
      apiKey: "YOUR_API_KEY",
      columns,
      primaryKey: "passport",
      onComplete: (result) => {
        console.log(result);
        el.hide();
      },
    });
    const onClose = () => el.hide();
    el.addEventListener("close", onClose);
    return () => el.removeEventListener("close", onClose);
  });

  function open() {
    editorEl?.show();
  }
</script>

<button type="button" onclick={open}>Open Importer</button>
<updog-editor bind:this={editorEl}></updog-editor>