#24スコア 〜3.5/5基盤UI・汎用

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

ルート: /admin
デスクトップ表示
モバイル表示

375px のビューポートで撮影。縦長のページはフレーム内をスクロールします。

解説記事

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

やってみたシリーズ: 自作のデザインシステム @gunjo/ui（群青）を、文脈ゼロの cold な AI に実 UI で作らせる連載。今回は 管理 / CRUD データダッシュボード。

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

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

ActionDataTable/DataTable が workhorse: 行選択・一括アクション・ソート・ページネーション・custom cell（Badge）を手巻き <table> ゼロでこなした。real <table>・h1 1個・選択は labelled な role=checkbox button＋aria-checked="mixed"＝選択 a11y は良好。EmptyState・Sheet+Form 編集・Sidebar+Drawer・Statistic・Toast も composition 成功。tsc 0・build 成功。低レベル〜中レベルは production 級。

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

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

① a11y: <th> に scope 無し・sortable なのに aria-sort 無し（#123）。 real table なのに列見出しの関連付けと sort 状態が SR に届いてなかった → scope="col"＋動的 aria-sort（none/ascending/descending）。ブラウザ実証: クリックで aria-sort が flip。a11y 系統の DataTable 版。

② filter 未指定で console 警告（#124）。 <DataTable data columns /> だけで getColumn("") を呼んで [Table] Column with id '' does not exist を吐いてた → 既定を素直に "off" に。

③ 管理テーブルの interaction が足りない（#125）。 選択が内部固定（controlled 不可）・onRowClick 無し・rowActions が inline icon のみ＝行 "⋯" メニューが作れず cold AI が自前で組み直してた → controlled 選択（selectedIds/onSelectionChange）・onRowClick・rowActionsVariant="menu"（overflow DropdownMenu） を追加。

④ 単一カラム text filter のみ（#126）。 ステータス Select＋日付＋検索の複合フィルタが組めず、テーブル外で自前計算 → faceted filter API は beta ゲートへ。

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

データ層（行・列・選択・ソート・ページング・cell）→ production 級・手巻きゼロ
管理作法（controlled 状態・行クリック・⋯メニュー・faceted filter・th a11y）→ 足りなかった

クラッシュや崩れではなく、「dense な管理 UI の定石」を DS が API として持ってるかが論点だった。低レベルが強いからこそ、上位の作法の穴が見える。①〜③は今 land、④は API 設計込みで beta ゲート。a11y 系統（#57…#117）も DataTable の th/sort で継続。

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

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

試す

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

<!-- 公開前: 相互URL差込／スクショ確定／EN(dev.to)ミラー -->

使用した @gunjo/ui コンポーネント

この画面のソースが直接 import している部品です。

ActionDataTableAvatarBadgeButtonColumnDefComboboxDrawerDrawerContentDrawerTitleDropdownMenuDropdownMenuContentDropdownMenuItemDropdownMenuLabelDropdownMenuSeparatorDropdownMenuTriggerEmptyStateFormFormDescriptionFormFieldFormGroupFormLabelInputSearchInputSelectSheetSheetCloseSheetContentSheetDescriptionSheetFooterSheetHeaderSheetTitleSidebarSidebarBodySidebarHeaderSidebarItemSidebarProviderSkeletonStatisticSwitchToastProvider

cold AI が組み上げた実コード

ファイル名をクリックでソースを展開できます。