@ornery/ui-grid-vanilla 1.0.6 → 1.0.7

package/README.md

@@ -45,6 +45,7 @@ class MyComponent extends HTMLElement {
 ```
 
 The `.html` template uses ES6 template literal syntax:
+
 ```html
 <div class="my-class">${this.myProp}</div>
 ```
@@ -60,10 +61,10 @@ Templates are compiled at build time by `@ornery/web-components/vite` (or `/webp
 
 Cell and row slot templates support dual binding syntax:
 
-| Syntax | Example | Description |
-|--------|---------|-------------|
-| `{{ }}` | `{{value}}` | Mustache-style, original grid syntax |
-| `${ }` | `${this.value}` | ES6 template literal, `@ornery/web-components` native |
+| Syntax  | Example         | Description                                           |
+| ------- | --------------- | ----------------------------------------------------- |
+| `{{ }}` | `{{value}}`     | Mustache-style, original grid syntax                  |
+| `${ }`  | `${this.value}` | ES6 template literal, `@ornery/web-components` native |
 
 Both resolve against the same context: `{ $implicit, value, valueText, row, column, rowIndex }`.
 
@@ -75,6 +76,53 @@ npm install @ornery/ui-grid-vanilla @ornery/ui-grid-core
 
 ## Usage
 
+### No-Bundler Browser Usage
+
+Use the browser bundle when a static HTML host needs to consume the grid without Vite, Webpack, tsup, or another package-aware build step. The bundle includes `@ornery/ui-grid-core` and registers `<ui-grid-element>` when the module loads.
+
+After `npm run build:vanilla` from the repo root, the browser-ready file is written to `projects/ui-grid-vanilla/dist/browser/ui-grid-element.js`.
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>UI Grid Browser Bundle</title>
+    <script type="module" src="./ui-grid-element.js"></script>
+  </head>
+  <body>
+    <ui-grid-element
+      grid-id="static-grid"
+      enable-sorting
+      enable-filtering
+      column-defs='[{"name":"name"},{"name":"role"},{"name":"salary","type":"number","align":"end"}]'
+      data='[{"name":"Alice","role":"Engineer","salary":120000},{"name":"Bob","role":"Designer","salary":95000}]'
+    >
+    </ui-grid-element>
+  </body>
+</html>
+```
+
+For imperative setup in the same no-bundler environment, import from that same file:
+
+```html
+<div id="grid"></div>
+
+<script type="module">
+  import { mountVanillaUiGrid } from './ui-grid-element.js';
+
+  await mountVanillaUiGrid(document.querySelector('#grid'), {
+    id: 'static-mounted-grid',
+    columnDefs: [{ name: 'name' }, { name: 'role' }],
+    data: [{ name: 'Alice', role: 'Engineer' }],
+    enableSorting: true,
+    enableFiltering: true,
+  });
+</script>
+```
+
+The package `dist/index.js` file is CommonJS for Node/package consumers, and `dist/index.mjs` is package ESM for bundlers or import-map setups. Use `dist/browser/ui-grid-element.js` for direct browser loading.
+
 ### Imperative (JavaScript)
 
 ```js
@@ -103,7 +151,8 @@ const grid = await mountVanillaUiGrid(document.getElementById('grid'), {
   enable-sorting
   enable-filtering
   column-defs='[{"name":"name","field":"name"},{"name":"age","field":"age","align":"end"}]'
-  data='[{"name":"Alice","age":30},{"name":"Bob","age":25}]'>
+  data='[{"name":"Alice","age":30},{"name":"Bob","age":25}]'
+>
 </ui-grid-element>
 ```
 
@@ -131,10 +180,21 @@ Define reusable components from HTML alone with `<template is="ui-grid-template"
 <!-- Define a badge component -->
 <template is="ui-grid-template" name="ui-status-badge" status="unknown">
   <style>
-    :host { display: inline-block; }
-    .badge { padding: 2px 8px; border-radius: 4px; }
-    .badge-active { background: #d1fae5; color: #065f46; }
-    .badge-inactive { background: #fee2e2; color: #991b1b; }
+    :host {
+      display: inline-block;
+    }
+    .badge {
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+    .badge-active {
+      background: #d1fae5;
+      color: #065f46;
+    }
+    .badge-inactive {
+      background: #fee2e2;
+      color: #991b1b;
+    }
   </style>
   <span class="badge badge-${this.status}">${this.status}</span>
 </template>
@@ -156,7 +216,7 @@ import { defineConfig } from 'vite';
 import webComponents from '@ornery/web-components/vite';
 
 export default defineConfig({
-  plugins: [webComponents()]
+  plugins: [webComponents()],
 });
 ```
 
@@ -166,7 +226,7 @@ export default defineConfig({
 import webComponents from '@ornery/web-components/webpack';
 
 export default {
-  plugins: [webComponents()]
+  plugins: [webComponents()],
 };
 ```
 
@@ -184,13 +244,17 @@ export default defineConfig({
 ## API
 
 ### `mountVanillaUiGrid(target, options, rustModule?, tagName?)`
+
 Mount a grid into a target element. Returns the grid element.
 
 ### `defineStandaloneUiGridElement(tagName?)`
+
 Register the `<ui-grid-element>` custom element (and all sub-components).
 
 ### `UIGridTemplate`
+
 Exported class for the `<template is="ui-grid-template">` element. Auto-registered when the grid is defined.
 
 ### Grid Element Properties
+
 See `VanillaUiGridElement` type — all `GridOptions` fields are available as both HTML attributes and JS properties.