refactor: rename data-viewer custom element to flatbread-table

- Update custom element registration from data-viewer to flatbread-table
- Fix modal element parent lookup for new tag name
- Update HTML usage examples and documentation

Author: lcvriend

index.html

@@ -18,7 +18,7 @@ <h1><a href="https://github.com/lcvriend/wc-simple-table">wc-simple-table</a></h
 </section>
 <section id="info">
     <h2>Web component</h2>
-    <p><code>&lt;data-viewer&gt;</code> is a web component for displaying structured table data with these key features:</p>
+    <p><code>&lt;flatbread-table&gt;</code> is a web component for displaying structured table data with these key features:</p>
     <ul>
         <li>Vanilla JavaScript with no external dependencies</li>
         <li>Loads JSON data from URLs</li>
@@ -30,23 +30,9 @@ <h2>Web component</h2>
     </ul>
     <p>Below you'll find examples demonstrating the component's features and usage.</p>
 </section>
-<section id="controls">
+<section id="controls" style="display: none;">
     <h2>Controls</h2>
     <form>
-        <fieldset>
-            <legend>Data</legend>
-            <div>
-                <label for="src">Source
-                    <select name="src" id="src" autocomplete="off">
-                        <option value="data/bedragen_2025.json" selected>default</option>
-                        <option value="data/multiindex_df.json">multiindex df</option>
-                        <option value="data/simple_df.json">simple df</option>
-                        <option value="data/dates.json">dates</option>
-                        <option value="data/big_boy.json">truncated</option>
-                    </select>
-                </label>
-            </div>
-        </fieldset>
         <fieldset>
             <legend>Calculate</legend>
             <div>
@@ -67,42 +53,42 @@ <h2>Controls</h2>
 </section>
 <section id="output">
 <h2>Output</h2>
-<div id="data-viewer-wrapper" class="breakout">
-    <data-viewer
-        src="data/bedragen_2025.json"
+<div id="flatbread-table-wrapper" class="breakout">
+    <dataset-selector
+        src="data/test.dataset.json"
         locale="nl-NL"
         margin-labels="Total;Totaal;Subtotal"
     >
-    </data-viewer>
+    </dataset-selector>
 </div>
 <h3>Event</h3>
 <div id="event-display"><pre><code></code></pre></div>
 </section>
 <section id="html">
 <h2>HTML</h2>
 <pre><code class="language-html">&lt;!-- html --&gt;
-&lt;data-viewer src="data/example.json" locale="nl-NL"&gt;&lt;/data-viewer&gt;</code></pre>
+&lt;flatbread-table src="data/example.json" locale="nl-NL"&gt;&lt;/flatbread-table&gt;</code></pre>
 </section>
 <section id="specifications">
 <h2>Specifications</h2>
 <h3>Attributes</h3>
-<data-viewer
+<flatbread-table
     src="data/attributes.json"
     class="info-table"
     hide-settings-menu
     hide-index-border
     hide-row-borders
     section-levels="1"
-></data-viewer>
+></flatbread-table>
 <h3>CSS hooks</h3>
-<data-viewer
+<flatbread-table
     src="data/css_hooks.json"
     class="info-table"
     hide-settings-menu
     hide-index-border
     hide-row-borders
     section-levels="1"
-></data-viewer>
+></flatbread-table>
 <h3>Events</h3>
 <table>
     <thead>
@@ -208,6 +194,7 @@ <h4>Example Multi-Level Structure</h4>
 }</code></pre>
 </section>
 <script src="src/viewer.js" type="module"></script>
+<script src="src/components/dataset-selector.js" type="module"></script>
 <script src="static/js/demo.js" type="module"></script>
 </body>
 </html>

readme.md

@@ -23,7 +23,7 @@ A lightweight vanilla JavaScript web component for displaying structured table d
 ## Basic Usage
 
 ```html
-<data-viewer src="data.json"></data-viewer>
+<flatbread-table src="data.json"></flatbread-table>
 ```
 
 ## Example Output

src/components/dataset-selector.js

@@ -456,7 +456,7 @@ export class DatasetSelector extends HTMLElement {
         this.addFilterEventListeners()
 
         // Create and append the data-viewer
-        const viewer = document.createElement("data-viewer")
+        const viewer = document.createElement("flatbread-table")
         this.shadowRoot.querySelector(".viewer-container").appendChild(viewer)
         this.dataViewer = viewer
         this.forwardInitialAttributes()

src/components/modal-element.js

@@ -20,7 +20,7 @@ export class ModalElement extends DraggableMixin(HTMLElement) {
         // Find and store data-viewer reference first
         let node = this
         while (node) {
-            if (node instanceof HTMLElement && node.tagName.toLowerCase() === "data-viewer") {
+            if (node instanceof HTMLElement && node.tagName.toLowerCase() === "flatbread-table") {
                 this.dataViewer = node
                 break
             }

src/viewer.js

@@ -1,6 +1,6 @@
 import { Data } from "./data.js"
 import { SettingsContainer } from "./settings/settings-container.js"
-import { DataTable } from "./table.js"
+import "./table.js"
 
 export class DataViewer extends HTMLElement {
     static get observedAttributes() {
@@ -351,4 +351,4 @@ export class DataViewer extends HTMLElement {
     }
 }
 
-window.customElements.define('data-viewer', DataViewer)
+window.customElements.define('flatbread-table', DataViewer)

static/js/demo.js

@@ -1,6 +1,6 @@
 class Demo {
     constructor() {
-        this.handleDataSourceChange = this.handleDataSourceChange.bind(this)
+        // Remove handleDataSourceChange since DatasetSelector handles this
         this.handleCellClick = this.handleCellClick.bind(this)
         this.handleDataChanged = this.handleDataChanged.bind(this)
 
@@ -9,41 +9,28 @@ class Demo {
 
     // MARK: setup
     setupEventListeners() {
-        this.setupControlEvents()
-        this.setupViewerEvents()
-    }
-
-    setupControlEvents() {
-        document.getElementById("src").addEventListener("change", this.handleDataSourceChange)
+        // Don't need to set up source change event anymore
         document.getElementById("n").addEventListener("change", event => {
             this.updateTable(event.target.value)
         })
+
+        // Set up event listeners for the DataViewer events
+        this.setupViewerEvents()
     }
 
     setupViewerEvents() {
-        if (!this.dataViewer) return
+        if (!this.datasetSelector) return
 
-        this.dataViewer.addEventListener("cell-click", this.handleCellClick)
-        this.dataViewer.addEventListener("data-changed", this.handleDataChanged)
+        this.datasetSelector.addEventListener("cell-click", this.handleCellClick)
+        this.datasetSelector.addEventListener("data-changed", this.handleDataChanged)
     }
 
     // MARK: get/set
-    get wrapper() { return document.getElementById("data-viewer-wrapper") }
-    get dataViewer() { return this.wrapper.querySelector("data-viewer") }
+    get wrapper() { return document.getElementById("flatbread-table-wrapper") }
+    get datasetSelector() { return this.wrapper.querySelector("dataset-selector") }
     get eventDisplay() { return document.getElementById("event-display") }
 
     // MARK: handlers
-    handleDataSourceChange() {
-        this.dataViewer?.remove()
-
-        const viewer = document.createElement("data-viewer")
-        viewer.setAttribute("src", event.target.value)
-        viewer.setAttribute("margin-labels", "Total;Totaal;Subtotal")
-
-        this.wrapper.appendChild(viewer)
-        this.addDataViewerEventListeners()
-    }
-
     handleCellClick(event) {
         this.eventDisplay.querySelector("code").innerText = JSON.stringify(event.detail)
     }
@@ -55,11 +42,6 @@ class Demo {
     }
 
     // MARK: helpers
-    addDataViewerEventListeners() {
-        this.dataViewer.addEventListener("cell-click", this.handleCellClick)
-        this.dataViewer.addEventListener("data-changed", this.handleDataChanged)
-    }
-
     truncateJSONString(JSONString, maxLength = 1500) {
         if (JSONString.length <= maxLength) return JSONString
         return JSONString.slice(0, maxLength) + "[...]"
@@ -79,18 +61,12 @@ class Demo {
 
     updateTable(n) {
         const op = this.getCalculation(n)
-        const newValues = this.dataViewer.data.values.map(row => row.map(op))
-        this.dataViewer.data.values = newValues
-    }
+        const viewer = this.datasetSelector.getViewer()
 
-    resetAttributes(element, attributesToKeep) {
-        const attributes = [...element.attributes]
-        attributes.forEach(attr => {
-            if (!attributesToKeep.includes(attr.name)) {
-                element.removeAttribute(attr.name)
-            }
-        })
-        return element
+        if (viewer && viewer.data && viewer.data.values) {
+            const newValues = viewer.data.values.map(row => row.map(op))
+            viewer.data.values = newValues
+        }
     }
 }