Cookbook

<DataTable
  data={[
    { name: "Revenue", trend: [12, 18, 14, 22, 19, 26, 31] },
    { name: "Users",   trend: [80, 85, 78, 92, 95, 88, 102] },
  ]}
  columns={[
    { key: "name", header: "Metric" },
    { key: "trend", header: "7-Day Trend", type: "sparkline" },
  ]}
/>

<DataTable
  data={[
    { service: "API",      uptime: 99.98 },
    { service: "Database", uptime: 97.2 },
    { service: "CDN",      uptime: 89.1 },
  ]}
  columns={[
    { key: "service", header: "Service" },
    { key: "uptime",  header: "Health", type: "status",
      statusRules: [
        { min: 99.9, color: "emerald", label: "Healthy" },
        { min: 95,   color: "amber",   label: "Degraded", pulse: true },
        {            color: "red",     label: "Down",     pulse: true },
      ],
    },
  ]}
  dense
/>

{ key: "usage", header: "CPU", type: "bar", format: "percent",
  conditions: [
    { when: "at_or_above", value: 90, color: "red" },
    { when: "at_or_above", value: 70, color: "amber" },
    { when: "below", value: 70, color: "emerald" },
  ]
}

<DataTable
  data={customers}
  columns={columns}
  renderExpanded={(row) => (
    <div className="grid grid-cols-3 gap-3">
      <KpiCard bare title="Revenue" value={row.revenue} format="currency" />
      <KpiCard bare title="Completion" value={row.completion} format="percent" />
      <Sparkline data={row.trend} height={48} />
    </div>
  )}
/>

<DataTable
  data={[
    { region: "North America", revenue: 1200000, children: [
      { region: "US East", revenue: 450000 },
      { region: "US West", revenue: 380000 },
      { region: "Canada", revenue: 370000 },
    ]},
  ]}
  childrenField="children"
  defaultExpanded
/>

<DataTable
  data={accounts}
  rowConditions={[
    { when: (row) => row.churn > 0.15,  className: "bg-red-500/5" },
    { when: (row) => row.growth > 0.30, className: "bg-emerald-500/5" },
  ]}
/>

<KpiCard
  title="Revenue"
  value={127450}
  format="currency"
  comparison={[
    { value: 113500, label: "vs last month" },
    { value: 98200, label: "vs last year", mode: "absolute" },
  ]}
/>

<KpiCard
  title="Churn Rate"
  value={3.2}
  format="percent"
  icon={<TrendingDown className="h-3.5 w-3.5" />}
  comparison={{ value: 4.8, invertTrend: true }}
/>

<KpiCard
  title="Q2 Revenue"
  value={380000}
  format="currency"
  icon={<DollarSign className="h-3.5 w-3.5" />}
  goal={{
    value: 500000,
    label: "Q2 Target",
    showTarget: true,
    showRemaining: true,
    color: "#6366F1",
    completeColor: "#10B981",
  }}
/>

<KpiCard
  title="Daily Revenue"
  value={12400}
  format="currency"
  sparkline={{
    data: thisWeek,
    previousPeriod: lastWeek,
    type: "bar",
  }}
/>

<KpiCard
  title="Error Rate"
  value={12.4}
  format="percent"
  conditions={[
    { when: "at_or_above", value: 10, color: "red" },
    { when: "at_or_above", value: 5,  color: "amber" },
    { when: "below",       value: 5,  color: "emerald" },
  ]}
/>

<AreaChart
  data={data}
  index="month"
  categories={["revenue"]}
  format="currency"
  referenceLines={[
    { axis: "y", value: 70000, label: "Target", color: "#6366F1", style: "dashed" },
    { axis: "y", value: 50000, label: "Break-even", color: "#EF4444" },
  ]}
  enableArea gradient
/>

<AreaChart
  data={data}
  index="month"
  categories={["orders"]}
  thresholds={[
    { from: 0,   to: 350, color: "#EF4444", opacity: 0.06, label: "Low" },
    { from: 350, to: 450, color: "#F59E0B", opacity: 0.06, label: "Normal" },
    { from: 450, to: 600, color: "#10B981", opacity: 0.06, label: "High" },
  ]}
/>

<AreaChart
  data={data}
  index="month"
  categories={[
    { key: "revenue", format: "currency" },
    { key: "orders", format: "number", axis: "right" },
  ]}
  rightAxisLabel="Orders"
  enableArea gradient
/>

<AreaChart
  data={channelData}
  index="month"
  categories={["organic", "paid", "referral", "direct"]}
  stacked
  stackMode="percent"
  format="percent"
  title="Traffic Mix"
/>

<AreaChart
  data={data}
  index="month"
  categories={["revenue", "costs"]}
  format="currency"
  seriesStyles={{
    revenue: { lineWidth: 2.5 },
    costs:   { lineStyle: "dashed", lineWidth: 1.5 },
  }}
/>

<BarChart
  data={actuals}
  index="rep"
  categories={["closed"]}
  targetData={targets}
  title="Deals Closed vs Target"
/>

const renderStage = (v: unknown) => {
  const s = String(v);
  if (s === "R") return <CheckCircle2 className="mx-auto h-4 w-4 text-emerald-500" />;
  if (s === "D") return <Loader className="mx-auto h-4 w-4 text-amber-500" />;
  if (s === "S") return <Wrench className="mx-auto h-4 w-4 text-blue-500" />;
  return <Minus className="mx-auto h-4 w-4 text-[var(--muted)] opacity-30" />;
};

const modules = ["Scheduling", "Billing", "Retention", "Reports", "API"];

<DataTable
  title="Studio Module Rollout"
  subtitle="12 studios · 5 modules"
  data={studios}
  columns={[
    { key: "studio", header: "Studio", pin: "left", sortable: true,
      render: (v, row) => (
        <div>
          <span className="font-medium">{v}</span>
          <span className="ml-2 text-[10px] text-[var(--muted)]">{row.tier}</span>
        </div>
      ),
    },
    { key: "am", header: "Acct Mgr", sortable: true },
    { key: "rooms", header: "Rooms", type: "number", sortable: true, width: 70 },
    ...modules.map((m) => ({
      key: m.toLowerCase(), header: m, align: "center", width: 90,
      render: renderStage,
    })),
  ]}
  footnote={
    <div className="flex flex-wrap gap-x-5 gap-y-1">
      <span className="flex items-center gap-1"><CheckCircle2 className="h-3 w-3 text-emerald-500" /> Live</span>
      <span className="flex items-center gap-1"><Loader className="h-3 w-3 text-amber-500" /> In progress</span>
      <span className="flex items-center gap-1"><Wrench className="h-3 w-3 text-blue-500" /> Setting up</span>
      <span className="flex items-center gap-1"><Minus className="h-3 w-3 opacity-30" /> Not enabled</span>
    </div>
  }
  renderExpanded={(row) => ( /* customer detail grid */ )}
  searchable
  dense
  maxRows={10}
/>

<DataTable
  title="Account Health Matrix"
  subtitle="6 accounts · click any row to expand"
  data={accounts}
  columns={[
    { key: "account", header: "Account", pin: "left", sortable: true },
    { key: "arr", header: "ARR", type: "currency", format: "compact", sortable: true },
    { key: "trend", header: "7d Trend", type: "sparkline" },
    { key: "health", header: "Health", type: "badge" },
    { key: "adoption", header: "Adoption", type: "progress" },
    { key: "nps", header: "NPS", type: "number", sortable: true,
      conditions: [
        { min: 50, color: "emerald" },
        { min: 20, color: "amber" },
        { color: "red" },
      ],
    },
    { key: "risk", header: "Churn Risk", type: "bar", format: "percent" },
    { key: "renewsIn", header: "Renews", type: "number", sortable: true,
      render: (v) => <Badge variant={v <= 30 ? "danger" : v <= 90 ? "warning" : "default"} size="sm">{v}d</Badge>,
    },
  ]}
  renderExpanded={(row) => (
    <MetricGrid columns={4}>
      <KpiCard title="Seats Used" value={`${row.seatsUsed}/${row.seats}`} ... />
      <KpiCard title="ARR" value={row.arr} format="currency" ... />
      <KpiCard title="Adoption" value={row.adoption} format="percent" ... />
      <KpiCard title="NPS Score" value={row.nps} ... />
    </MetricGrid>
  )}
  searchable
  dense
/>

<MetricProvider theme="slate">
  <MetricGrid>
    <SectionHeader title="System Status" subtitle="Real-time infrastructure health" />
    <StatusIndicator size="card" title="API Gateway" value={99.97} rules={[...]} since={...} trend={[...]} />
    <StatusIndicator size="card" title="Database Primary" value={98.2} rules={[...]} />
    <StatusIndicator size="card" title="CDN Edge" value={99.99} rules={[...]} />
    <StatusIndicator size="card" title="Queue Workers" value={94.1} rules={[...]} />
    <Callout value={94.1} rules={[
      { min: 99, variant: "success", title: "All systems operational" },
      { min: 95, variant: "warning", title: "Degraded: {value}% uptime" },
      { variant: "error", title: "Critical: {value}% uptime" },
    ]} />
    <KpiCard title="P50 Latency" value={42} ... conditions={[...]} />
    <KpiCard title="Error Rate" value={0.08} format="percent" ... conditions={[...]} />
    <KpiCard title="Active Connections" value={12847} ... />
    <KpiCard title="Queue Depth" value={342} ... conditions={[...]} />
    <AreaChart title="Request Volume (24h)" data={...} thresholds={[...]} referenceLines={[...]} />
  </MetricGrid>
</MetricProvider>

<LinkedHoverProvider>
  <CrossFilterProvider>
    <MetricGrid>
      {/* Layer 1: KPI headlines */}
      <KpiCard title="Total Revenue" value={329000} format="currency" comparison={...} sparkline={...} />
      <KpiCard title="Avg Deal Size" value={245} format="currency" comparison={...} />
      <KpiCard title="Active Products" value={4} comparison={...} />
      <KpiCard title="Net Margin" value={0.38} format="percent" goal={...} conditions={...} />

      {/* Layer 2: Trend chart */}
      <AreaChart title="Monthly Revenue vs Expenses" data={monthly} ... referenceLines={[...]} thresholds={[...]} />

      {/* Layer 3: Detail table with everything */}
      <DataTable title="Product Breakdown" data={products} columns={[...]} renderExpanded={...} />
    </MetricGrid>
  </CrossFilterProvider>
</LinkedHoverProvider>