Make the HTML tables you already have explorable — without rebuilding them.
Grid-Sight attaches to an ordinary <table> on page load and layers in
interactive analysis — sliders and interpolation, heatmaps and outliers, sort/filter/find,
derived columns and cell notes — entirely in the browser. Your markup, server, and data
pipeline stay exactly as they are; turn Grid-Sight off and the original table returns,
byte-for-byte.
Six live tables, one per face — drag to rotate, scroll to zoom, pick a face. Open full screen →
Plain rules that hold for every feature on this page.
Runs from a file:// load with no network, no fetched fonts or icons, and no telemetry. Safe for secured environments.
A single self-contained script. Nothing to install, bundle, or keep patched alongside your app.
A plain <script> include. Tables work without it; with it, they gain affordances — and a table can opt out entirely.
Keyboard-operable controls with correct ARIA state. Visual layout never reorders what a screen reader or keyboard sees.
Grid-Sight never edits your data. Disable it and every injected node is removed, restoring the exact original markup.
Sliders & interpolation
Attach continuous sliders to a table's numeric axes and Grid-Sight interpolates a value at any point between the printed cells — linear on one axis, bilinear across two — with a live four-cell highlight and an optional formula readout. Ideal for lookup grids and calibration tables.
The row & column sliders are attached on load — drag them to read between the cells. Formula: √sl − √R/100 + 2
| 10 | 20 | 30 | 40 | 50 | |
|---|---|---|---|---|---|
| 1000 | 4.8 | 6.2 | 7.2 | 8.0 | 8.8 |
| 6000 | 4.4 | 5.7 | 6.7 | 7.5 | 8.3 |
| 11000 | 4.1 | 5.4 | 6.4 | 7.3 | 8.0 |
| 16000 | 3.9 | 5.2 | 6.2 | 7.1 | 7.8 |
| 21000 | 3.7 | 5.0 | 6.0 | 6.9 | 7.6 |
Visual analysis
Shade a row, column, or whole table as a heatmap; flag values beyond a click-cycled σ threshold as outliers; open a statistics popup (min, max, mean, quartiles, missing %) for any axis; and append a summary row of per-column aggregates over the visible rows.
A table-wide heatmap is shading the cells on load. Click ! to flag outliers, # for a stats popup, or H to toggle the heatmap off.
| Site | Jan | Feb | Mar | Apr |
|---|---|---|---|---|
| North | 118 | 122 | 131 | 140 |
| South | 96 | 101 | 99 | 410 |
| East | 142 | 138 | 151 | 149 |
| West | 88 | 91 | 94 | 97 |
| Central | 205 | 211 | 198 | 220 |
Navigation & search
Sort and filter any column from its header, find text with next/previous stepping, and freeze the header row and key column so they stay put while you scroll. Sorting and filtering are a view over your rows — the underlying order is never rewritten.
This demo starts with nothing applied — switch a feature on yourself: click a column header's sort/filter lozenges to reorder or narrow rows, or the corner find lozenge to search. The header row and key column stay frozen as you scroll.
| Name | Department | Region | Tenure |
|---|---|---|---|
| Alex Morgan | Engineering | North | 4 |
| Priya Shah | Engineering | East | 7 |
| Jordan Lee | Operations | West | 2 |
| Sam Carter | Sales | South | 9 |
| Robin Diaz | Operations | North | 5 |
| Casey Wu | Sales | East | 3 |
Derived data & notes
Append virtual columns on the right edge — a running-total Σ, an inline trend ⌇ sparkline, and a pairwise Δ compare — all computed live from the existing data. Attach a note to any cell; annotations persist per-document and follow their cell across sort and filter.
A ⌇ sparkline column is appended on load. Click the corner Σ / Δ lozenges to add more derived columns; hover a cell and click its pin to attach a note.
| Quarter | Product A | Product B | Product C |
|---|---|---|---|
| Q1 | 120 | 90 | 60 |
| Q2 | 135 | 104 | 72 |
| Q3 | 128 | 118 | 81 |
| Q4 | 156 | 121 | 95 |
Grid-Sight is an overlay, not a transform. The control below turns it on and
off for the whole page without reloading: switch it off and every table
returns to its raw HTML — no GS corner button, no lozenges, no injected columns;
switch it back on and each table is re-enriched and returned to its authored
start-state.
Configured startActive: true — its enrichment lozenges are revealed the moment the page loads (click any to apply it). Click GS to hide them in place.
| Team | Q1 | Q2 | Q3 |
|---|---|---|---|
| Alpha | 42 | 48 | 51 |
| Bravo | 37 | 35 | 61 |
| Cobalt | 55 | 59 | 58 |
The default (startActive: false) — the GS button is present but its lozenges stay hidden. Click GS to reveal the same set.
| Team | Q1 | Q2 | Q3 |
|---|---|---|---|
| Alpha | 42 | 48 | 51 |
| Bravo | 37 | 35 | 61 |
| Cobalt | 55 | 59 | 58 |
And opt-out is absolute: a table marked data-gs-ignore stays raw no matter what,
even if a per-table selector would otherwise match it.
opted out
| Team | Q1 | Q2 | Q3 |
|---|---|---|---|
| Alpha | 42 | 48 | 51 |
| Bravo | 37 | 35 | 61 |
Each feature has a focused page with richer data and explanation.
Single table — bilinear interpolation with a four-cell highlight.
Interpolated and formula readouts side by side.
Slider positions encoded in the URL fragment — bookmark, share, or reload at a value.
Pre-ticked enrichment panel: untick any feature and its lozenges vanish within a frame.
Every enrichment ships off; tick one to verify each feature in isolation.
Append running-sum, sparkline, and pairwise-compare columns on the right edge.
Attach a note to any cell; persists per-document and follows its cell across sort/filter.
Flag cells beyond a click-cycled 2σ → 1σ → 3σ threshold with a value/mean/σ tooltip.
Sticky header row + frozen key column while scrolling a large table.
Missing %, distinct, quartiles, and a mini histogram over the visible rows.
A per-column aggregate footer (sum / avg / min / max / count) over the visible rows.
Search, highlight every visible match, and step Next / Previous with wrap.
One column of every authored kind — the curated fixture the e2e coverage matrix asserts against.