23:I[307436,["/_next/static/immutable/chunks/1gchium7nww9r.js","/_next/static/immutable/chunks/2d7gr10yud7ll.js","/_next/static/immutable/chunks/2kyb8oum4hifz.js","/_next/static/immutable/chunks/17bc5e9cm9a-q.js","/_next/static/immutable/chunks/42sqmxmk3cnps.js","/_next/static/immutable/chunks/2-g5j69xga-j-.js","/_next/static/immutable/chunks/1vqnea-qk-oh0.js","/_next/static/immutable/chunks/0457ji1bpobon.js","/_next/static/immutable/chunks/2kc7ecqs15k_7.js","/_next/static/immutable/chunks/0a937jsg96ehe.js","/_next/static/immutable/chunks/1x71wnz52c5-i.js","/_next/static/immutable/chunks/3bmj1ccyv_bzu.js","/_next/static/immutable/chunks/3zyborr59s_3k.js","/_next/static/immutable/chunks/2iprwyxekay_3.js"],"Copy"] 24:T8c9,// Rows of your own: the text sorts and copies, `render` draws what text cannot, a // tint marks priority, and the verbs read what they act on. interface Download { id: string title: string state: "downloading" | "paused" | "queued" progress: number speed: number size: number priority: "high" | "normal" | "low" } const DOWNLOADS: Download[] = [ { id: "d1", title: "the bay, wide", state: "downloading", progress: 0.62, speed: 41.2, size: 4.1, priority: "high", }, { id: "d2", title: "hands on the map", state: "downloading", progress: 0.18, speed: 12.5, size: 1.6, priority: "normal", }, { id: "d3", title: "light through the trees", state: "paused", progress: 0.4, speed: 0, size: 2.3, priority: "normal", }, { id: "d4", title: "the boat leaving", state: "queued", progress: 0, speed: 0, size: 3.8, priority: "low", }, { id: "d5", title: "the pass at dusk", state: "queued", progress: 0, speed: 0, size: 5.2, priority: "high", }, ] const COLUMNS: TableColumn[] = [ { id: "title", label: "title", text: (d) => d.title }, // A few values repeated: read as choices, drawn as badges. { id: "state", label: "state", text: (d) => d.state }, { id: "progress", label: "progress", text: (d) => `${Math.round(d.progress * 100)}%`, width: "9rem", render: (d) => ( {Math.round(d.progress * 100)}% ), }, { id: "speed", label: "MB/s", // Unknowable while not downloading: an empty cell, never a fake zero. text: (d) => (d.state === "downloading" ? d.speed.toFixed(1) : ""), }, { id: "size", label: "GB", text: (d) => d.size.toFixed(1) }, ] 25:T6522,

// Rows of your own: the text sorts and copies, `render` draws what text cannot, a
// tint marks priority, and the verbs read what they act on.
interface Download {
  id: string
  title: string
  state: "downloading" | "paused" | "queued"
  progress: number
  speed: number
  size: number
  priority: "high" | "normal" | "low"
}

const DOWNLOADS: Download[] = [
  {
    id: "d1",
    title: "the bay, wide",
    state: "downloading",
    progress: 0.62,
    speed: 41.2,
    size: 4.1,
    priority: "high",
  },
  {
    id: "d2",
    title: "hands on the map",
    state: "downloading",
    progress: 0.18,
    speed: 12.5,
    size: 1.6,
    priority: "normal",
  },
  {
    id: "d3",
    title: "light through the trees",
    state: "paused",
    progress: 0.4,
    speed: 0,
    size: 2.3,
    priority: "normal",
  },
  {
    id: "d4",
    title: "the boat leaving",
    state: "queued",
    progress: 0,
    speed: 0,
    size: 3.8,
    priority: "low",
  },
  {
    id: "d5",
    title: "the pass at dusk",
    state: "queued",
    progress: 0,
    speed: 0,
    size: 5.2,
    priority: "high",
  },
]

const COLUMNS: TableColumn<Download>[] = [
  { id: "title", label: "title", text: (d) => d.title },
  // A few values repeated: read as choices, drawn as badges.
  { id: "state", label: "state", text: (d) => d.state },
  {
    id: "progress",
    label: "progress",
    text: (d) => `${Math.round(d.progress * 100)}%`,
    width: "9rem",
    render: (d) => (
      <span className="flex w-full items-center gap-2">
        <span className="h-1 flex-1 overflow-hidden rounded-full bg-foreground/10">
          <span
            className="block h-full w-(--done) rounded-full bg-foreground/60"
            style={{ "--done": `${d.progress * 100}%` } as React.CSSProperties}
          />
        </span>
        <span className="w-8 text-right text-[11px] text-foreground/50 tabular-nums">
          {Math.round(d.progress * 100)}%
        </span>
      </span>
    ),
  },
  {
    id: "speed",
    label: "MB/s",
    // Unknowable while not downloading: an empty cell, never a fake zero.
    text: (d) => (d.state === "downloading" ? d.speed.toFixed(1) : ""),
  },
  { id: "size", label: "GB", text: (d) => d.size.toFixed(1) },
]

<Rows />

1f:["$","div","rows",{"data-slot":"code","data-material":"plain","data-compact":"$undefined","className":"ag-code","children":[["$","div",null,{"className":"ag-code-bar","children":[["$","span",null,{"className":"ag-code-name","children":"tsx"}],["$","$L23",null,{"value":"$24","label":true}]]}],["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$25"}}],false]}]

	title	state	progress	MB/s	GB
1	the bay, wide	downloading	62%	41.2	4.1
2	hands on the map	downloading	18%	12.5	1.6
3	light through the trees	paused	40%		2.3
4	the boat leaving	queued	0%		3.8
5	the pass at dusk	queued	0%		5.2