AI に管理ダッシュボードを作らせてみた — DataTable は強い、でも"管理画面の作法"が足りない（やってみた #24）

⁠やってみたシリーズ⁠: 自作のデザインシステム @gunjo/ui（群青）を、群青のことを一度も見たことのない AI に、実際の画面で組ませていく連載。今回は ⁠管理 / CRUD データダッシュボード⁠。

条件はいつも通り（出荷している npm パッケージ＋docs サイトだけ。ソース非公開）。お題は、サイドバー＋トップバーの外枠に、⁠KPI 行・データテーブル（ステータスバッジ・行選択・一括アクション・行メニュー・ソート・ページネーション）・複合フィルタ・編集 Sheet・空状態・読み込み中・トースト⁠。#4（チャート）/#6（素の table）とは別の、⁠重い「データ操作」の組み立て⁠を突きました。

結果 — 〜3.5/5（データ層がよく支えた）

⁠ActionDataTable/DataTable が主力⁠: 行選択・一括アクション・ソート・ページネーション・独自セル（Badge）を、⁠手組みの <table> ゼロ⁠でこなしました。本物の <table>・h1 1個・⁠選択はラベル付きの role=checkbox ボタン＋aria-checked="mixed"⁠＝選択まわりのアクセシビリティは良好。EmptyState・Sheet+Form の編集・Sidebar+Drawer・Statistic・Toast も組み立て成功。⁠tsc 0・build 成功⁠。低レベル〜中レベルは実運用レベルです。

引っかかったのは ⁠「管理画面の作法」を表す DataTable の高度な API⁠——そこを今回全部直しました。

直した — DataTable に "管理作法" を入れた

⁠① アクセシビリティ: <th> に scope 無し・並べ替えできるのに aria-sort 無し（#123）。⁠ 本物の table なのに、列見出しの対応づけと並べ替えの状態がスクリーンリーダーに届いていなかった → scope="col"＋状況に応じた aria-sort（none/ascending/descending）。ブラウザで実証: クリックで aria-sort が切り替わる。アクセシビリティの種類の DataTable 版です。

⁠② filter を指定しないとコンソール警告（#124）。⁠ <DataTable data columns /> だけで getColumn("") を呼び、[Table] Column with id '' does not exist を吐いていた → 既定を素直に「オフ」に。

⁠③ 管理テーブルの操作機能が足りない（#125）。⁠ 選択が内部で固定（外から制御できない）・onRowClick 無し・rowActions が行内アイコンのみ＝行の "⋯" メニューが作れず、予備知識ゼロの AI が自前で組み直していた → ⁠外から制御できる選択（selectedIds/onSelectionChange）・onRowClick・rowActionsVariant="menu"（はみ出し用の DropdownMenu）⁠ を追加。

⁠④ 単一列のテキスト絞り込みだけ（#126）。⁠ ステータスの Select＋日付＋検索を組み合わせた複合フィルタが組めず、テーブルの外で自前計算 → 複数条件で絞り込む API は beta ゲートへ。

学び — 「データ層」と「管理作法」は別レイヤー

データ層（行・列・選択・ソート・ページング・セル）→ 実運用レベル・手組みゼロ
管理作法（外から制御する状態・行クリック・⋯メニュー・複数条件の絞り込み・th のアクセシビリティ）→ 足りなかった

クラッシュや崩れではなく、⁠「情報密度の高い管理 UI の定石」を、デザインシステムが API として持っているか⁠が論点でした。低レベルが強いからこそ、上位の作法の欠落が見えます。①〜③は今回反映、④は API 設計込みで beta ゲート。アクセシビリティの種類（#57…#117）も、DataTable の th/並べ替えで継続です。

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

• ⁠価格比較 / エラー画面 / カレンダー予定表⁠ ほか。組み立てと作法を引き続き。

試す

• ⁠gunjo.jp⁠ ／ npm @gunjo/ui ／ ⁠GitHub⁠
• 前回まで: #1〜#23
• まとめ記事: 群青（@gunjo/ui） ／ なぜ要るのか: AI 時代のデザインシステム論
• ⁠GunjoUI by UIXHERO⁠

まだ alpha。データ層は強い、足りなかったのは"管理作法"。回すほど、別の層の欠落が見えます。