RecordSelectionTable デモ
実データベース上の「サンプル」レコードを読み込み、行クリック / チェックボックスによる複数選択を切り替えられるサンプルです。
インタラクティブな選択テーブル
操作方法を切り替えて、RecordSelectionTable の挙動を確認できます。全選択や部分選択の状態はヘッダのチェックボックスで判別できます。
選択方法
レコード全体をクリックして切り替える操作感
| サンプル名 / 説明 | カテゴリ | 更新日時 / 数量 |
|---|
サンプルデータを読み込み中です…
選択状態プレビュー
まだレコードが選択されていません
EditableGridTable デモ
サンプルドメインのレコードを使ったインライン編集のサンプルです。セルの入力がバリデーションに通ると、その場で行データが更新されます。
名前 | 数量 | カテゴリ | フラグ | 説明文 | マルチセレクト | 最終更新日時 | 操作 |
|---|
データベースと同期中です…
更新ログ
サンプルを編集するとログが更新されます
現在のデータ
DataTable デモ
ダミーレコードを 200px の固定最大高さで表示し、スクロール挙動を確認できるセクションです。
| ID | プロジェクト名 | ステータス | 進捗率 |
|---|---|---|---|
| #01 | プロジェクト 1 担当: 担当者 A | 進行中 | 1% |
| #02 | プロジェクト 2 担当: 担当者 B | レビュー待ち | 8% |
| #03 | プロジェクト 3 担当: 担当者 C | 完了 | 15% |
| #04 | プロジェクト 4 担当: 担当者 D | 保留 | 22% |
| #05 | プロジェクト 5 担当: 担当者 E | 進行中 | 29% |
| #06 | プロジェクト 6 担当: 担当者 A | レビュー待ち | 36% |
| #07 | プロジェクト 7 担当: 担当者 B | 完了 | 43% |
| #08 | プロジェクト 8 担当: 担当者 C | 保留 | 50% |
| #09 | プロジェクト 9 担当: 担当者 D | 進行中 | 57% |
| #10 | プロジェクト 10 担当: 担当者 E | レビュー待ち | 64% |
| #11 | プロジェクト 11 担当: 担当者 A | 完了 | 71% |
| #12 | プロジェクト 12 担当: 担当者 B | 保留 | 78% |
| #13 | プロジェクト 13 担当: 担当者 C | 進行中 | 85% |
| #14 | プロジェクト 14 担当: 担当者 D | レビュー待ち | 92% |
| #15 | プロジェクト 15 担当: 担当者 E | 完了 | 99% |
| #16 | プロジェクト 16 担当: 担当者 A | 保留 | 6% |
| #17 | プロジェクト 17 担当: 担当者 B | 進行中 | 13% |
| #18 | プロジェクト 18 担当: 担当者 C | レビュー待ち | 20% |
| #19 | プロジェクト 19 担当: 担当者 D | 完了 | 27% |
| #20 | プロジェクト 20 担当: 担当者 E | 保留 | 34% |
| #21 | プロジェクト 21 担当: 担当者 A | 進行中 | 41% |
| #22 | プロジェクト 22 担当: 担当者 B | レビュー待ち | 48% |
| #23 | プロジェクト 23 担当: 担当者 C | 完了 | 55% |
| #24 | プロジェクト 24 担当: 担当者 D | 保留 | 62% |
| #25 | プロジェクト 25 担当: 担当者 E | 進行中 | 69% |
| #26 | プロジェクト 26 担当: 担当者 A | レビュー待ち | 76% |
| #27 | プロジェクト 27 担当: 担当者 B | 完了 | 83% |
| #28 | プロジェクト 28 担当: 担当者 C | 保留 | 90% |
| #29 | プロジェクト 29 担当: 担当者 D | 進行中 | 97% |
| #30 | プロジェクト 30 担当: 担当者 E | レビュー待ち | 4% |