CellGrid

OK×FAILWARN

Source

"use client"

import { useState } from "react"
import { CellGrid, type CellStatus } from "@/registry/warren/cell-grid/cell-grid"

const RUN: CellStatus[] = [
  "ok", "ok", "fail", "ok", "warn", "ok", "ok", "fail", "ok", "ok",
  "ok", "warn", "ok", "ok", undefined, "ok", "fail", "ok", "ok", "warn",
  "ok", "ok", "ok", "fail", "ok", "ok", "warn", "ok", "ok", "ok",
]

const LEGEND = [
  { tone: "ok" as const, label: "OK" },
  { tone: "fail" as const, label: "FAIL" },
  { tone: "warn" as const, label: "WARN" },
]

export default function CellGridDemo() {
  const [selected, setSelected] = useState<number | null>(null)
  const details = RUN.map((cell, i) =>
    cell === "fail"
      ? `RUN ${i + 1} · REJECTED`
      : cell === "warn"
        ? `RUN ${i + 1} · TTFT 307MS`
        : cell === "ok"
          ? `RUN ${i + 1} · OK`
          : `RUN ${i + 1} · PENDING`,
  )
  return (
    <CellGrid
      data={RUN}
      cols={10}
      legend={LEGEND}
      details={details}
      onCellClick={setSelected}
      selectedIndex={selected}
    />
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/cell-grid.json

Usage

import { CellGrid } from "@/registry/warren/cell-grid/cell-grid"

<CellGrid data={cells} cols={10} legend={legend} />

ok fills the cell with the primary tone, fail renders a red ✕ glyph on a transparent cell, warn uses the warning tone, and empty cells (undefined) use the track tone. Newly appended cells fade in (animate-warren-fade-in).

Pass details for per-cell tooltips, and onCellClick / selectedIndex to make the grid interactive — clicking a cell in the preview above selects it. In interactive mode every cell renders as a real <button aria-label={details?.[i] ?? "cell N"} aria-pressed={selectedIndex === i}> so the grid is keyboard-focusable and announced by screen readers; without onCellClick the cells stay decorative aria-hidden spans.

Fit

Default grids use fixed-size cells in a horizontal scroll well. Pass fit instead to scale the cells to the container width — self-contained, never scrolls.

OK×FAILWARN

Source

"use client"

import { CellGrid, type CellStatus } from "@/registry/warren/cell-grid/cell-grid"

const RUN: CellStatus[] = [
  "ok", "ok", "ok", "fail", "ok", "ok", "warn", "ok", "ok", "ok", "fail", "ok",
  "ok", "warn", "ok", "ok", "ok", "ok", "fail", "ok", "ok", "ok", "warn", "ok",
  "ok", "ok", "ok", "ok", "warn", "ok", "ok", "fail", "ok", "ok", "ok", "ok",
  "ok", "fail", "ok", "ok", "ok", "ok", "ok", "warn", "ok", "fail", "ok", "ok",
]

const LEGEND = [
  { tone: "ok" as const, label: "OK" },
  { tone: "fail" as const, label: "FAIL" },
  { tone: "warn" as const, label: "WARN" },
]

export default function CellGridFit() {
  return <CellGrid data={RUN} cols={12} fit legend={LEGEND} />
}

API Reference

Prop

Type

`CellStatus`