AI に管理画面のデータテーブルを作らせてみた（やってみた #6）

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。#1〜#5 ログイン に続いて、今回は管理画面のデータテーブル。

条件は同じ。出荷物そのもの（#52/#53 修正入り）＋docs だけ、ソースは見せない、provider のヒントも渡さない。 お題は、名前・ロール・ステータス・参加日・MRR を持つ ~16 行のユーザー一覧に、テキスト検索＋ステータスの Select フィルタ＋列ソート＋ページネーション＋ステータス Badge。

結果 — 4/5、そして #52 がまた効いていた

npm run build 成功、static prerender、コンソールエラー0。検索・ステータス絞り込み・列ソート・ページ送りすべて動作。

cold AI は DataTable（TanStack Table ベース）を選び、ソート・ページネーション・テキストフィルタが最初から入っていると。そして今回も:

provider 不要——確認。 DataTable はソートヘッダとページネーションに Radix Tooltip を使うが、gunjo の Tooltip が provider を self-wrap するので <TooltipProvider> は要らない。SSR クラッシュなし。

#3 で見つけて #52 で直した穴が、tooltip を多用する DataTable でももう出ない。ループは閉じたまま。

粗さ — また「export 漏れ」、ただし今度は系統が見えた

build を止めはしなかったが、型付き採用者を詰まらせる穴:

import { type ColumnDef } from "@gunjo/ui" // ❌ 出ていない

DataTable の columns prop は ColumnDef 型を要求するのに、それが barrel から出ていない。採用者は @tanstack/react-table から直接 import するしかなく、それはtransitive 依存（自分の package.json に無い）だから strict install で壊れうる。→ #56

これ、#4 の ChartDataPoint（#53）と同じ系統。「公開コンポーネントの公開 prop が要求する型を、barrel が export していない」。1個の bug じゃなくパターンだと分かったので、#56 では ColumnDef を出すだけでなく未 export な公開 prop 型を一巡監査する。#3 の Tooltip と同じ、instance を見つけたら class で潰す。

ほかに正直な粗さ:

• docs のコード例が fetch に映らない（既出 #50）— 採用者は同梱 TS 型で composition を再構築
• DataTable の filter は単一列テキストのみ（ステータスの Select 絞り込みは外側で useMemo）。設計上の制約で、合成はきれいに効く
• 内側 <table> の min-w-[720px]＝極端に狭い画面では reflow せず横スクロール（軽微）

学び

AI に使わせる → 穴が出る → instance じゃなく class で直す → また使わせる

#6 は2つを同時に見せた。①直した穴（#52）は別の重コンポーネントでも消えている（ループが保たれている）。②新しい穴（#56）は #53 と同じ系統＝export 監査で class ごと潰せる。穴を一個ずつ潰すんじゃなく、型・provider みたいに "系統" で潰すのが、このシリーズで見えてきた品質の上げ方です。

次回予告（やってみた #7）

• コマンドパレット（⌘K）（Command / Dialog）— パワーユーザー向けの検索 UI。

試す

• gunjo.jp ／ npm @gunjo/ui ／ GitHub
• 前回まで: #1 / #2 / #3 / #4 / #5
• 母艦: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• GunjoUI by UIXHERO

まだ alpha、粗削りな青。穴が出るたび、系統ごと直します。Issue 歓迎。

---

<!-- 公開前: #56 反映後に記述更新／スクショ確定／相互URL差込／EN(dev.to)ミラー -->