ov-table

src/ov-table.js

A STILL OF demo/data.html

Attributes

Properties

READ-ONLY PROPERTIES

rowH

Events

Using it

import 'overscan'
import 'overscan/overscan.css'

<ov-table
  id="doc-table"
  row-height="21"
  style="block-size:190px;inline-size:100%"
>
</ov-table>
<script type="module">
  /* The demo index's twelve rows into a window that draws about six, so the
     still shows what the table is about: how many of how many it drew. */
  const COLS = [{key: 'id', label: 'ID'}, {key: 'sig', label: 'SIGNAL'},
                {key: 'v', label: 'VALUE', align: 'right'}];
  const ROWS = Array.from({length: 12}, (_, i) => ({
    id: String(i + 1).padStart(3, '0'),
    sig: ['CORE', 'BUS', 'AUX', 'VENT'][i % 4],
    v: (40 + i * 3.5).toFixed(1),
  }));
  customElements.whenDefined('ov-table').then(() => {
    document.getElementById('doc-table').load(COLS, ROWS);
  });
</script>

import { OvTable } from 'overscan/react'

<OvTable
  id="doc-table"
  row-height="21"
  cols={data}
  rows={data}
  onReorder={handler}
/>

import { OvTable } from 'overscan/vue'

<OvTable
  id="doc-table"
  row-height="21"
  :cols="data"
  :rows="data"
  @reorder="handler"
/>

import OvTable from 'overscan/svelte/OvTable.svelte'

<OvTable
  id="doc-table"
  row-height="21"
  cols={data}
  rows={data}
  onreorder={handler}
/>

The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'

A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.

Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.

The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 72 getter-only properties across 39 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.