@squadbase/vantage-template 0.0.1

package/ui-templates/kpi-chart-simple-ja/server/kpi-summary.ts

@@ -0,0 +1,141 @@
+import type { ApiContext } from "@squadbase/vantage/server"
+import { HttpError } from "@squadbase/vantage/server"
+
+import type {
+  KpiItem,
+  KpiSummary,
+  RangeKey,
+  TopItemRow,
+  TrendPoint,
+} from "../../lib/kpi-chart-simple/types"
+
+/**
+ * `GET /api/kpi-summary?range=7d|30d|90d`
+ *
+ * 実データに繋ぐときに書き換えるのはこのファイルだけ。「サンプルデータ」以下はクエリの
+ * 代役なので、データウェアハウスのクライアント呼び出しに差し替える(認証情報は `ctx.env`
+ * から読む。クライアントバンドルには決して入らない)。`KpiSummary` の形さえ保てば
+ * ページ側は変更不要。
+ */
+
+const RANGE_DAYS: Record<RangeKey, number> = { "7d": 7, "30d": 30, "90d": 90 }
+
+function isRangeKey(value: string): value is RangeKey {
+  return Object.hasOwn(RANGE_DAYS, value)
+}
+
+// ── サンプルデータ ───────────────────────────────────────────────────────────
+// リクエストごとに揺れないよう決定的に生成する。
+
+const HISTORY_DAYS = 180
+const DAY_MS = 86_400_000
+
+const HISTORY: TrendPoint[] = Array.from({ length: HISTORY_DAYS }, (_, i) => {
+  const weekly = Math.sin((i / 7) * Math.PI * 2) * 4_200
+  const monthly = Math.sin((i / 30) * Math.PI * 2) * 2_600
+  const revenue = Math.round(34_000 + i * 95 + weekly + monthly)
+  const orders = Math.round(revenue / (74 + Math.sin(i / 11) * 6))
+  const visitors = Math.round(orders * (28 + Math.sin(i / 9) * 4))
+  return {
+    date: new Date(Date.UTC(2024, 0, 1) + i * DAY_MS).toISOString().slice(0, 10),
+    revenue,
+    orders,
+    visitors,
+  }
+})
+
+const TOP_ITEMS: TopItemRow[] = [
+  { id: "p-01", name: "項目1", category: "カテゴリA", revenue: 184_320, units: 1_232, share: 0.142 },
+  { id: "p-02", name: "項目2", category: "カテゴリB", revenue: 162_480, units: 812, share: 0.125 },
+  { id: "p-03", name: "項目3", category: "カテゴリC", revenue: 138_750, units: 463, share: 0.107 },
+  { id: "p-04", name: "項目4", category: "カテゴリD", revenue: 121_900, units: 974, share: 0.094 },
+  { id: "p-05", name: "項目5", category: "カテゴリD", revenue: 98_640, units: 1_644, share: 0.076 },
+  { id: "p-06", name: "項目6", category: "カテゴリB", revenue: 87_220, units: 821, share: 0.067 },
+  { id: "p-07", name: "項目7", category: "カテゴリA", revenue: 81_540, units: 679, share: 0.063 },
+  { id: "p-08", name: "項目8", category: "カテゴリE", revenue: 72_410, units: 905, share: 0.056 },
+  { id: "p-09", name: "項目9", category: "カテゴリE", revenue: 68_900, units: 138, share: 0.053 },
+  { id: "p-10", name: "項目10", category: "カテゴリD", revenue: 54_220, units: 1_356, share: 0.042 },
+]
+
+// ── 集計 ─────────────────────────────────────────────────────────────────────
+
+function total(rows: TrendPoint[], field: "revenue" | "orders" | "visitors"): number {
+  return rows.reduce((acc, row) => acc + row[field], 0)
+}
+
+/** 直前の同じ長さの期間に対する変化率(小数第1位まで)。 */
+function delta(current: number, prior: number): number {
+  if (prior === 0) return 0
+  return Math.round(((current - prior) / prior) * 1_000) / 10
+}
+
+function sparkline(rows: TrendPoint[], project: (row: TrendPoint) => number): number[] {
+  const step = Math.max(1, Math.floor(rows.length / 12))
+  return rows.filter((_, i) => i % step === 0).map(project)
+}
+
+function buildKpis(current: TrendPoint[], prior: TrendPoint[]): KpiItem[] {
+  const revenue = total(current, "revenue")
+  const orders = total(current, "orders")
+  const visitors = total(current, "visitors")
+  const priorRevenue = total(prior, "revenue")
+  const priorOrders = total(prior, "orders")
+  const priorVisitors = total(prior, "visitors")
+
+  const conversion = visitors === 0 ? 0 : (orders / visitors) * 100
+  const priorConversion = priorVisitors === 0 ? 0 : (priorOrders / priorVisitors) * 100
+  const aov = orders === 0 ? 0 : revenue / orders
+  const priorAov = priorOrders === 0 ? 0 : priorRevenue / priorOrders
+
+  return [
+    {
+      id: "total-revenue",
+      value: revenue,
+      change: delta(revenue, priorRevenue),
+      sparklineData: sparkline(current, (row) => row.revenue),
+    },
+    {
+      id: "active-users",
+      value: visitors,
+      change: delta(visitors, priorVisitors),
+      sparklineData: sparkline(current, (row) => row.visitors),
+    },
+    {
+      id: "conversion-rate",
+      value: Math.round(conversion * 100) / 100,
+      change: delta(conversion, priorConversion),
+      sparklineData: sparkline(current, (row) => (row.orders / row.visitors) * 100),
+    },
+    {
+      id: "aov",
+      value: Math.round(aov * 100) / 100,
+      change: delta(aov, priorAov),
+      sparklineData: sparkline(current, (row) => row.revenue / row.orders),
+    },
+  ]
+}
+
+// ── ハンドラ ─────────────────────────────────────────────────────────────────
+
+export async function GET({ request }: ApiContext) {
+  const range = new URL(request.url).searchParams.get("range") ?? "30d"
+
+  // クライアントに見せたいエラーは `HttpError` を throw する。それ以外の throw は
+  // ログに記録され、汎用の 500 に丸められる。
+  if (!isRangeKey(range)) {
+    throw new HttpError(400, `range "${range}" は未対応です。7d / 30d / 90d のいずれかを指定してください。`)
+  }
+
+  const days = RANGE_DAYS[range]
+  const current = HISTORY.slice(-days)
+  const prior = HISTORY.slice(-days * 2, -days)
+
+  const payload: KpiSummary = {
+    range,
+    kpis: buildKpis(current, prior),
+    trend: current,
+    topItems: TOP_ITEMS,
+  }
+
+  return Response.json(payload)
+}

package/ui-templates/table-focus/components/detail-table.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from "react"
+
+import { DataTablePreset, Placeholder, type ColumnDef } from "@squadbase/vantage/components"
+
+import type { DetailRow } from "./types"
+
+function formatCurrency(n: number, opts: { short?: boolean } = {}): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (opts.short) {
+    if (abs >= 1_000_000) return `${sign}$${(abs / 1_000_000).toFixed(2)}M`
+    if (abs >= 1_000) return `${sign}$${(abs / 1_000).toFixed(1)}K`
+    return `${sign}$${abs.toLocaleString("en-US")}`
+  }
+  return `${sign}$${Math.round(abs).toLocaleString("en-US")}`
+}
+
+function formatPercent(value: number, digits = 1): string {
+  return `${value.toFixed(digits)}%`
+}
+
+interface DetailTableProps {
+  data: DetailRow[]
+}
+
+export function DetailTable({ data }: DetailTableProps) {
+  const columns = useMemo<ColumnDef<DetailRow>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "Column 1",
+      },
+      {
+        accessorKey: "owner",
+        header: "Column 2",
+      },
+      {
+        accessorKey: "category",
+        header: "Column 3",
+      },
+      {
+        accessorKey: "status",
+        header: "Column 4",
+      },
+      {
+        accessorKey: "revenue",
+        header: "Column 5",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {formatCurrency(row.original.revenue, { short: true })}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "units",
+        header: "Column 6",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {row.original.units.toLocaleString("en-US")}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "margin",
+        header: "Column 7",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatPercent(row.original.margin)}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "updated",
+        header: "Column 8",
+        cell: ({ row }) => (
+          <Placeholder className="text-xs">{row.original.updated}</Placeholder>
+        ),
+      },
+    ],
+    [],
+  )
+
+  return <DataTablePreset columns={columns} data={data} enableSorting />
+}

package/ui-templates/table-focus/lib/mock-data.ts

@@ -0,0 +1,69 @@
+import type { DetailRow, SummaryRow, TrendPoint } from "./types"
+
+export const detailRows: DetailRow[] = [
+  { id: "row-01", name: "Item 1", owner: "Owner 1", status: "active", category: "Category 1", revenue: 111569, units: 630, margin: 24.7, updated: "2024-03-26" },
+  { id: "row-02", name: "Item 2", owner: "Owner 2", status: "active", category: "Category 2", revenue: 64510, units: 1418, margin: 42.8, updated: "2024-03-24" },
+  { id: "row-03", name: "Item 3", owner: "Owner 3", status: "active", category: "Category 3", revenue: 178768, units: 700, margin: 27.3, updated: "2024-03-29" },
+  { id: "row-04", name: "Item 4", owner: "Owner 4", status: "paused", category: "Category 4", revenue: 108664, units: 541, margin: 27.4, updated: "2024-03-24" },
+  { id: "row-05", name: "Item 5", owner: "Owner 5", status: "draft", category: "Category 5", revenue: 89259, units: 453, margin: 41.7, updated: "2024-03-25" },
+  { id: "row-06", name: "Item 6", owner: "Owner 6", status: "active", category: "Category 1", revenue: 171912, units: 1271, margin: 35.2, updated: "2024-03-31" },
+  { id: "row-07", name: "Item 7", owner: "Owner 1", status: "active", category: "Category 2", revenue: 46499, units: 1024, margin: 43.3, updated: "2024-03-18" },
+  { id: "row-08", name: "Item 8", owner: "Owner 2", status: "active", category: "Category 3", revenue: 90305, units: 624, margin: 39.3, updated: "2024-03-20" },
+  { id: "row-09", name: "Item 9", owner: "Owner 3", status: "paused", category: "Category 4", revenue: 123575, units: 804, margin: 49.1, updated: "2024-03-27" },
+  { id: "row-10", name: "Item 10", owner: "Owner 4", status: "draft", category: "Category 5", revenue: 191742, units: 2477, margin: 29.4, updated: "2024-03-26" },
+  { id: "row-11", name: "Item 11", owner: "Owner 5", status: "active", category: "Category 1", revenue: 174313, units: 682, margin: 25.1, updated: "2024-03-26" },
+  { id: "row-12", name: "Item 12", owner: "Owner 6", status: "active", category: "Category 2", revenue: 140422, units: 592, margin: 26.2, updated: "2024-03-21" },
+  { id: "row-13", name: "Item 13", owner: "Owner 1", status: "active", category: "Category 3", revenue: 171059, units: 765, margin: 39.3, updated: "2024-03-26" },
+  { id: "row-14", name: "Item 14", owner: "Owner 2", status: "paused", category: "Category 4", revenue: 127951, units: 542, margin: 20.4, updated: "2024-03-20" },
+  { id: "row-15", name: "Item 15", owner: "Owner 3", status: "draft", category: "Category 5", revenue: 169122, units: 1824, margin: 19.8, updated: "2024-03-20" },
+  { id: "row-16", name: "Item 16", owner: "Owner 4", status: "active", category: "Category 1", revenue: 91117, units: 479, margin: 30.2, updated: "2024-03-21" },
+  { id: "row-17", name: "Item 17", owner: "Owner 5", status: "active", category: "Category 2", revenue: 57885, units: 249, margin: 46.5, updated: "2024-03-21" },
+  { id: "row-18", name: "Item 18", owner: "Owner 6", status: "active", category: "Category 3", revenue: 156340, units: 1804, margin: 19.5, updated: "2024-03-27" },
+  { id: "row-19", name: "Item 19", owner: "Owner 1", status: "paused", category: "Category 4", revenue: 58582, units: 471, margin: 23.5, updated: "2024-03-31" },
+  { id: "row-20", name: "Item 20", owner: "Owner 2", status: "draft", category: "Category 5", revenue: 70782, units: 411, margin: 28.7, updated: "2024-03-19" },
+  { id: "row-21", name: "Item 21", owner: "Owner 3", status: "active", category: "Category 1", revenue: 48743, units: 334, margin: 46.3, updated: "2024-03-18" },
+  { id: "row-22", name: "Item 22", owner: "Owner 4", status: "active", category: "Category 2", revenue: 180121, units: 1042, margin: 40.5, updated: "2024-03-18" },
+  { id: "row-23", name: "Item 23", owner: "Owner 5", status: "active", category: "Category 3", revenue: 113309, units: 562, margin: 20.4, updated: "2024-03-19" },
+  { id: "row-24", name: "Item 24", owner: "Owner 6", status: "paused", category: "Category 4", revenue: 112999, units: 574, margin: 25.8, updated: "2024-03-27" },
+]
+
+export const summaryRows: SummaryRow[] = [
+  { segment: "Category 3", count: 5, revenue: 709781, avgMargin: 29.2, share: 0.2491 },
+  { segment: "Category 1", count: 5, revenue: 597654, avgMargin: 32.3, share: 0.2097 },
+  { segment: "Category 4", count: 5, revenue: 531771, avgMargin: 29.2, share: 0.1866 },
+  { segment: "Category 5", count: 4, revenue: 520905, avgMargin: 29.9, share: 0.1828 },
+  { segment: "Category 2", count: 5, revenue: 489437, avgMargin: 39.9, share: 0.1718 },
+]
+
+export const trendSeries: TrendPoint[] = [
+  { date: "2024-03-02", value: 20590 },
+  { date: "2024-03-03", value: 19289 },
+  { date: "2024-03-04", value: 23339 },
+  { date: "2024-03-05", value: 20609 },
+  { date: "2024-03-06", value: 23415 },
+  { date: "2024-03-07", value: 25849 },
+  { date: "2024-03-08", value: 25114 },
+  { date: "2024-03-09", value: 22860 },
+  { date: "2024-03-10", value: 24511 },
+  { date: "2024-03-11", value: 24606 },
+  { date: "2024-03-12", value: 26125 },
+  { date: "2024-03-13", value: 21827 },
+  { date: "2024-03-14", value: 27583 },
+  { date: "2024-03-15", value: 23709 },
+  { date: "2024-03-16", value: 26295 },
+  { date: "2024-03-17", value: 24547 },
+  { date: "2024-03-18", value: 24112 },
+  { date: "2024-03-19", value: 28416 },
+  { date: "2024-03-20", value: 23997 },
+  { date: "2024-03-21", value: 23835 },
+  { date: "2024-03-22", value: 24690 },
+  { date: "2024-03-23", value: 28432 },
+  { date: "2024-03-24", value: 25377 },
+  { date: "2024-03-25", value: 29616 },
+  { date: "2024-03-26", value: 28354 },
+  { date: "2024-03-27", value: 25239 },
+  { date: "2024-03-28", value: 27696 },
+  { date: "2024-03-29", value: 26262 },
+  { date: "2024-03-30", value: 25920 },
+  { date: "2024-03-31", value: 27428 },
+]

package/ui-templates/table-focus/lib/types.ts

@@ -0,0 +1,24 @@
+export interface DetailRow {
+  id: string
+  name: string
+  owner: string
+  status: "active" | "paused" | "draft"
+  category: string
+  revenue: number
+  units: number
+  margin: number
+  updated: string
+}
+
+export interface SummaryRow {
+  segment: string
+  count: number
+  revenue: number
+  avgMargin: number
+  share: number
+}
+
+export interface TrendPoint {
+  date: string
+  value: number
+}

package/ui-templates/table-focus/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "table-focus",
+  "description": "Table-Focused — Workbench layout: header search + Export, status filter chips, detail table (24+ rows, sortable) as the main element, with a trend chart and segment breakdown in a right sidebar. For data-heavy operational dashboards.",
+  "version": "0.1.0",
+  "files": [
+    { "src": "pages/index.tsx", "dest": "index.tsx", "action": "replace" },
+    { "src": "components/detail-table.tsx", "dest": "components/table-focus/detail-table.tsx", "action": "add" },
+    { "src": "lib/mock-data.ts", "dest": "components/table-focus/mock-data.ts", "action": "add", "relabel": false },
+    { "src": "lib/types.ts", "dest": "components/table-focus/types.ts", "action": "add", "relabel": false }
+  ]
+}

package/ui-templates/table-focus/pages/index.tsx

@@ -0,0 +1,180 @@
+import { useMemo, useState } from "react"
+import { Download, Search } from "lucide-react"
+
+import { definePage } from "@squadbase/vantage"
+import {
+  DashboardCardPreset,
+  EChart,
+  PageShell,
+  PageShellContent,
+  PageShellDescription,
+  PageShellHeader,
+  PageShellHeaderEnd,
+  PageShellHeading,
+  PageShellTitle,
+  Placeholder,
+  type EChartsOption,
+} from "@squadbase/vantage/components"
+import { Button, Input, ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui"
+
+import { DetailTable } from "./components/table-focus/detail-table"
+import {
+  detailRows,
+  summaryRows,
+  trendSeries,
+} from "./components/table-focus/mock-data"
+import type { DetailRow, TrendPoint } from "./components/table-focus/types"
+
+export const page = definePage({
+  title: "Records",
+  description:
+    "Workbench layout: header search + Export, status filter chips, a sortable detail table as the main element, with a trend chart and segment breakdown in a right sidebar.",
+})
+
+// ── chart helpers ───────────────────────────────────────────────────────────
+
+function getBaseGrid() {
+  return { left: "3%", right: "4%", bottom: "10%", containLabel: true }
+}
+
+function formatNumber(n: number): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(1)}M`
+  if (abs >= 1_000) return `${sign}${(abs / 1_000).toFixed(1)}K`
+  return n.toLocaleString("en-US")
+}
+
+// ── chart options ────────────────────────────────────────────────────────────
+
+function trendOption(data: TrendPoint[]): EChartsOption {
+  return {
+    tooltip: { trigger: "axis" },
+    legend: { bottom: 0 },
+    grid: getBaseGrid(),
+    xAxis: {
+      type: "category",
+      data: data.map((d) => d.date),
+      boundaryGap: false,
+      axisLabel: { formatter: (v: string) => v.slice(5) },
+    },
+    yAxis: { type: "value", axisLabel: { formatter: (v: number) => formatNumber(v) } },
+    series: [
+      {
+        name: "Series A",
+        type: "line",
+        smooth: true,
+        showSymbol: false,
+        data: data.map((d) => d.value),
+        areaStyle: { opacity: 0.18 },
+      },
+    ],
+  }
+}
+
+// ── page ─────────────────────────────────────────────────────────────────────
+
+type StatusFilter = "all" | DetailRow["status"]
+
+export default function HomePage() {
+  const [query, setQuery] = useState("")
+  const [status, setStatus] = useState<StatusFilter>("all")
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    return detailRows.filter((r) => {
+      if (status !== "all" && r.status !== status) return false
+      if (q && !r.name.toLowerCase().includes(q) && !r.owner.toLowerCase().includes(q)) return false
+      return true
+    })
+  }, [query, status])
+
+  return (
+    <PageShell>
+      <PageShellHeader>
+        <PageShellHeading>
+          <PageShellTitle>[Template] Records</PageShellTitle>
+          <PageShellDescription>
+            Browse, filter, and search the full record list.
+          </PageShellDescription>
+        </PageShellHeading>
+        <PageShellHeaderEnd className="flex-row items-center gap-2">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search..."
+              className="h-9 w-64 pl-8"
+            />
+          </div>
+          <Button variant="outline" size="sm" className="gap-1.5">
+            <Download className="size-4" />
+          </Button>
+        </PageShellHeaderEnd>
+      </PageShellHeader>
+
+      <PageShellContent className="space-y-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          {/* Base UI ToggleGroup is array-valued even for single select. */}
+          <ToggleGroup
+            value={[status]}
+            onValueChange={(values) => {
+              const next = values[0]
+              if (next) setStatus(next as StatusFilter)
+            }}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="all">All</ToggleGroupItem>
+            <ToggleGroupItem value="active">Option A</ToggleGroupItem>
+            <ToggleGroupItem value="paused">Option B</ToggleGroupItem>
+            <ToggleGroupItem value="draft">Option C</ToggleGroupItem>
+          </ToggleGroup>
+          <span className="text-xs text-muted-foreground">
+            {filtered.length} results
+          </span>
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <DashboardCardPreset
+              title="Records"
+              description="Detailed rows for the current filter"
+            >
+              <DetailTable data={filtered} />
+            </DashboardCardPreset>
+          </div>
+          <div className="space-y-4">
+            <DashboardCardPreset
+              title="Trend"
+              description="Values over the selected period"
+            >
+              <EChart option={trendOption(trendSeries)} height="220px" />
+            </DashboardCardPreset>
+            <DashboardCardPreset title="By segment" description="Share of total">
+              <div className="space-y-3">
+                {summaryRows.map((row) => (
+                  <div key={row.segment} className="space-y-1.5">
+                    <div className="flex items-baseline justify-between">
+                      <span className="text-sm font-medium">{row.segment}</span>
+                      <Placeholder className="text-sm">
+                        {row.revenue.toLocaleString("en-US")}
+                      </Placeholder>
+                    </div>
+                    <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full bg-primary"
+                        style={{ width: `${(row.share * 100).toFixed(1)}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </DashboardCardPreset>
+          </div>
+        </div>
+      </PageShellContent>
+    </PageShell>
+  )
+}

package/ui-templates/table-focus-ja/components/detail-table.tsx

@@ -0,0 +1,95 @@
+import { useMemo } from "react"
+
+import { DataTablePreset, Placeholder, type ColumnDef } from "@squadbase/vantage/components"
+
+import type { DetailRow } from "./types"
+
+function formatCurrency(n: number, opts: { short?: boolean } = {}): string {
+  const sign = n < 0 ? "-" : ""
+  const abs = Math.abs(n)
+  if (opts.short) {
+    if (abs >= 100_000_000) return `${sign}${(abs / 100_000_000).toFixed(2)}億円`
+    if (abs >= 10_000) return `${sign}${(abs / 10_000).toFixed(0)}万円`
+    return `${sign}¥${abs.toLocaleString("ja-JP")}`
+  }
+  return `${sign}¥${Math.round(abs).toLocaleString("ja-JP")}`
+}
+
+function formatPercent(value: number, digits = 1): string {
+  return `${value.toFixed(digits)}%`
+}
+
+const STATUS_LABELS: Record<DetailRow["status"], string> = {
+  active: "有効",
+  paused: "一時停止",
+  draft: "下書き",
+}
+
+interface DetailTableProps {
+  data: DetailRow[]
+}
+
+export function DetailTable({ data }: DetailTableProps) {
+  const columns = useMemo<ColumnDef<DetailRow>[]>(
+    () => [
+      {
+        accessorKey: "name",
+        header: "列1",
+      },
+      {
+        accessorKey: "owner",
+        header: "列2",
+      },
+      {
+        accessorKey: "category",
+        header: "列3",
+      },
+      {
+        accessorKey: "status",
+        header: "列4",
+        cell: ({ row }) => STATUS_LABELS[row.original.status],
+      },
+      {
+        accessorKey: "revenue",
+        header: "列5",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {formatCurrency(row.original.revenue, { short: true })}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "units",
+        header: "列6",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>
+              {row.original.units.toLocaleString("ja-JP")}
+            </Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "margin",
+        header: "列7",
+        cell: ({ row }) => (
+          <div className="flex justify-end">
+            <Placeholder>{formatPercent(row.original.margin)}</Placeholder>
+          </div>
+        ),
+      },
+      {
+        accessorKey: "updated",
+        header: "列8",
+        cell: ({ row }) => (
+          <Placeholder className="text-xs">{row.original.updated}</Placeholder>
+        ),
+      },
+    ],
+    [],
+  )
+
+  return <DataTablePreset columns={columns} data={data} enableSorting />
+}