Virtual Columns

Virtual columns append derived columns to the right edge of a table without touching your source data. Toggle Grid-Sight off and the table returns byte-for-byte to its original markup.

How to use this demo

  1. Click the GS toggle that Grid-Sight injected into the top-left corner of the table below. This reveals the lozenge buttons on the headers.
  2. Σ Cumulative — appears on every numeric column header. Click it on Weight to add a running-sum column. Click again to switch it to percent of total; a third click removes it.
  3. Sparkline — appears in the top-left corner cluster (needs ≥ 3 numeric columns). Click it to add a Trend column with an inline mini bar-chart per row. Use the small button next to the “Trend” heading to flip between per-row and shared scaling, and hover or keyboard-focus a sparkline cell to see a min / max / last tooltip (arrow keys move between rows).
  4. Δ Compare — also in the corner cluster. Click it and its colours reverse to show compare mode is armed; the numeric column headers become clickable targets. Click two of them (e.g. Q1 then Q4) — each highlights in reversed colours as you pick it — to add a Δ Q4 − Q1 column; the highlight clears once the column appears. Clicking anywhere other than a column header cancels the pick. Re-clicking the Δ lozenge then cycles the delta mode (absolute → relative → percent) and finally removes it.
  5. Share it — every column you add is encoded in the page’s URL fragment (#gs.vc=…). Copy the URL and open it in a new tab; the same columns reappear automatically.

Ordering is fixed regardless of the order you activate them: cumulative columns first (in activation order), then the compare column, then the Trend sparkline on the far right.

Sales by region

RegionQ1Q2Q3Q4Weight
North10012015019010
South80909511015
East6070809020
West4050556025
Centre3035404530