テーブル Data Table
データを行と列で整理して表示する表組み。並べ替えやフィルタ機能を付与可能。
ライブデモ
| 名前 | 部署 | スコア |
|---|---|---|
| 山田太郎 | 開発 | 92 |
| 佐藤花子 | デザイン | 88 |
| 鈴木一郎 | 開発 | 95 |
| 田中美咲 | マーケ | 78 |
| 高橋健太 | デザイン | 85 |
ソースコード
<div class="demo-table-wrapper">
<table class="demo-table">
<thead>
<tr>
<th class="demo-table-sortable" data-col="name">名前 <span class="demo-table-sort-icon">↕</span></th>
<th class="demo-table-sortable" data-col="dept">部署 <span class="demo-table-sort-icon">↕</span></th>
<th class="demo-table-sortable" data-col="score">スコア <span class="demo-table-sort-icon">↕</span></th>
</tr>
</thead>
<tbody>
<tr><td>山田太郎</td><td>開発</td><td>92</td></tr>
<tr><td>佐藤花子</td><td>デザイン</td><td>88</td></tr>
<tr><td>鈴木一郎</td><td>開発</td><td>95</td></tr>
<tr><td>田中美咲</td><td>マーケ</td><td>78</td></tr>
<tr><td>高橋健太</td><td>デザイン</td><td>85</td></tr>
</tbody>
</table>
</div>.demo-table-wrapper { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 10px; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.demo-table thead { background: var(--ui-primary); color: #fff; }
.demo-table th {
padding: 10px 16px; text-align: left; font-weight: 600; font-size: 12px;
white-space: nowrap; cursor: pointer; user-select: none;
}
.demo-table th:hover { background: color-mix(in srgb, var(--ui-primary) 90%, #000); }
.demo-table-sort-icon { font-size: 10px; opacity: 0.6; }
.demo-table td { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; color: #444; }
.demo-table tbody tr:hover { background: color-mix(in srgb, var(--ui-primary) 5%, transparent); }
.demo-table tbody tr:last-child td { border-bottom: none; }(function(){
const table = document.querySelector('.demo-table');
const headers = table.querySelectorAll('.demo-table-sortable');
let sortDir = {};
headers.forEach((th, i) => {
th.addEventListener('click', function() {
const col = i;
sortDir[col] = !sortDir[col];
const tbody = table.querySelector('tbody');
const rows = Array.from(tbody.querySelectorAll('tr'));
rows.sort((a, b) => {
const aVal = a.children[col].textContent;
const bVal = b.children[col].textContent;
const aNum = parseFloat(aVal), bNum = parseFloat(bVal);
if (!isNaN(aNum) && !isNaN(bNum)) return sortDir[col] ? aNum - bNum : bNum - aNum;
return sortDir[col] ? aVal.localeCompare(bVal, 'ja') : bVal.localeCompare(aVal, 'ja');
});
rows.forEach(r => tbody.appendChild(r));
});
});
})();AIプロンプト
Basic
データテーブルをHTML/CSSで作ってください。ヘッダー付きの表組みで、行にホバー効果があります。
Custom
以下の仕様でデータテーブルを実装してください。 - ソート機能（列ヘッダークリック） - プライマリカラー: #2563eb（ヘッダー背景色） - ストライプ（縞模様）背景 - 行ホバーのハイライト - レスポンシブ対応（モバイルで横スクロール） - 固定ヘッダー（スクロール時）
Advanced
高機能データテーブルを実装してください。 - 仮想スクロール（10万行でもスムーズに表示） - マルチカラムソート - カラムのリサイズ（ドラッグ） - カラムの並び替え（ドラッグ&ドロップ） - フィルター機能（テキスト検索、範囲、セレクト） - ページネーション - 行選択（チェックボックス） - CSV/JSONエクスポート - role="grid" + aria-sort でアクセシビリティ対応 - キーボードナビゲーション（矢印キーでセル移動）