Deck

Table slide

A comparison matrix in the content region of the VI canvas, hairline-ruled. The first cell of each row reads as the row label in canvas ink; the value cells read muted, so the eye scans the label column first.

Install

npx shadcn@latest add @alix/tableSlide

Preview

Workstream
Q1
Q2
Q3
Pricing floor
Set
Enforced
Held
Working capital
Mapped
Freed
Banked
Procurement
Renegotiated
Signed
Realised
Ops efficiency
Piloted
Rolled out
Run-rate

Where the plan lands by quarter

Illustrative

Usage

import { TableSlide } from "@/components/deck/tableSlide";

<TableSlide
  title="Where the plan lands by quarter"
  columns={["Workstream", "Q1", "Q2", "Q3"]}
  rows={[
    ["Pricing floor", "Set", "Enforced", "Held"],
    ["Working capital", "Mapped", "Freed", "Banked"],
    ["Procurement", "Renegotiated", "Signed", "Realised"],
    ["Ops efficiency", "Piloted", "Rolled out", "Run-rate"],
  ]}
  source="Illustrative"
/>

Examples

01

Dense matrix

Past five rows the type steps down one scale step automatically. Density is the renderer's call from the data, never the author's.

Pattern
Signal
Move
Counter discounts
Unpriced by policy
Floor price, owned
Freight recovery
Under-billed
Auto-bill small drops
Rebate leakage
Rarely clawed back
Monthly true-up
Scrap and rework
Off the books
Shop-floor metering
Overtime drift
Planning gaps
Weekly labour plan
Slow-moving stock
Cash on shelves
SKU rationalisation

Observed pattern to design move

Illustrative

<TableSlide
  title="Observed pattern to design move"
  columns={["Pattern", "Signal", "Move"]}
  rows={[
    ["Counter discounts", "Unpriced by policy", "Floor price, owned"],
    ["Freight recovery", "Under-billed", "Auto-bill small drops"],
    ["Rebate leakage", "Rarely clawed back", "Monthly true-up"],
    ["Scrap and rework", "Off the books", "Shop-floor metering"],
    ["Overtime drift", "Planning gaps", "Weekly labour plan"],
    ["Slow-moving stock", "Cash on shelves", "SKU rationalisation"],
  ]}
/>
02

Trigger and response

A compact three-column matrix with the source credit on the footer. The whole slide is the comparison.

Trigger
Owner
Response
Price below floor
Commercial
Approval required
Order under minimum
Sales ops
Freight surcharge
Stock past 90 days
Planning
Markdown ladder

Trigger and response

Recovery playbook

<TableSlide
  title="Trigger and response"
  columns={["Trigger", "Owner", "Response"]}
  rows={[
    ["Price below floor", "Commercial", "Approval required"],
    ["Order under minimum", "Sales ops", "Freight surcharge"],
    ["Stock past 90 days", "Planning", "Markdown ladder"],
  ]}
  source="Recovery playbook"
/>

When to use it

Use it for

  • A comparison across shared dimensions: a taxonomy, a trigger/response, an observed-pattern to design-move.
  • The first cell of each row as its label; it reads in the foreground ink while values read muted.
  • Cells as fragments, not sentences.

Reach for something else

  • Rows of uneven width. Every row must be exactly as wide as columns.
  • A cell past roughly a sentence. It wants to be a KeyPoints slide instead.
  • Setting the density yourself. The type steps down automatically past five rows.

Props

PropTypeDefaultDescription
titlestring–The slide title, on the canvas title row.
columnsstring[]–Column headers; the first names the row-label column.
rowsstring[][]–One string per column, first cell the row label. Every row must match the columns length; the label cell reads in canvas ink, the rest muted.
sourcestring–The credit line; joins the footer meta row ahead of any other meta.
metastring[]–Additional deck chrome for the footer meta row.

See also

KeyPoints slideStats slideData table