table-filters

テーブルフィルター

ユーザーがフィルターが必要なテーブルを作成している場合は、列を分析し、フィルターの UX を設計します。

ステップ 1：各列を分析する

テーブルの各列について、フィルターの種類を決定します。

データパターン	フィルターの種類	列の例
フリーテキスト、名前、説明	含む	Product Name、Notes、Customer
固定値の集合（選択肢が 20 個未満）	チェックボックス	Status、Category、Priority、Type
数値	範囲	Price、Quantity、Age、Score
日付	日付範囲	Created、Updated、Due Date
ブール値	切り替え	Active、Verified、Published

ステップ 2：フィルターレイアウトを実装する

┌─────────────────────────────────────────────────────────┐
│ [Filter chips go here...] [🔍 Filter or search...]  [✕] │  ← Unified filter field
└─────────────────────────────────────────────────────────┘
                                          Sort by: [Dropdown ▾]

┌──────────────┬──────────────┬──────────────┬──────────────┐
│ Name       ▼ │ Status     ▼ │ Price      ▼ │ Created    ▼ │  ← Clickable headers with filter icon
├──────────────┼──────────────┼──────────────┼──────────────┤
│ ...          │ ...          │ ...          │ ...          │

主なレイアウトルール：

• フィールドはテーブル幅いっぱいに広げ、チップ、検索入力欄、クリアボタンを含めます
• 並べ替えドロップダウンはフィールドの隣に配置します（ヘッダー内には配置しません）
• 各ヘッダーをクリックすると、そのフィルターメニューが開きます
• フィルタリング時、メニューはフィールドの上に表示されます（チップを直接挿入します）

ステップ 3：各フィルターコンポーネントを作成する

含むフィルター（テキスト）

┌─ Product Name ──────────── ✕ ─┐
│ ┌────────────────────────────┐│
│ │ Search...                  ││
│ └────────────────────────────┘│
└───────────────────────────────┘

チップの表示例：Product Name: system

チェックボックスフィルター（カテゴリー）

┌─ Status ──────────────── ✕ ─┐
│ ☑ Active                     │
│ ☑ Pending                    │
│ ☐ Archived                   │
│ ☐ Deleted                    │
│            [Clear] [Apply]   │
└──────────────────────────────┘

チップの表示例：Status: Active, Pending または Status: Active, +2

範囲フィルター（数値）

┌─ Price ─────────────────── ✕ ─┐
│  Min         Max              │
│ ┌─────┐     ┌─────┐           │
│ │ 0   │  -  │ 100 │           │
│ └─────┘     └─────┘           │
│ ○───────────────●─────○       │  ← Optional slider
│              [Apply]          │
└───────────────────────────────┘

チップの表示例：Price: $0 - $100

日付範囲フィルター

┌─ Created ─────────────────── ✕ ─┐
│  From           To              │
│ ┌──────────┐   ┌──────────┐     │
│ │ 01/01/25 │ - │ 12/31/25 │     │
│ └──────────┘   └──────────┘     │
│ [Today] [This week] [This month]│
│                [Apply]          │
└─────────────────────────────────┘

チップの表示例：Created: Jan 1 - Dec 31, 2025

チップのデザインルール

• 暗い背景、明るいテキスト、角丸のピル形状
• X ボタンはコントラストのある面に配置します（クリック可能であることが明確に分かるようにします）
• 2 つの値の後は省略します：Status: Active, Pending, +3
• チップをクリックすると、そのフィルターメニューが再度開きます

空の状態

フィルターの結果がない場合：

     ┌─────────────┐
     │   (╯°□°)╯   │
     │   ︵ ┻━┻    │
     └─────────────┘
   No results found
   Try adjusting your filters

   [Clear all filters]

クイックチェックリスト

実装時に、次の項目を確認してください。

• 各列に適切なフィルターの種類が割り当てられている
• フィールドにチップが含まれている（上に別の行として配置されていない）
• 並べ替えはドロップダウンになっている（ヘッダー内の切り替えアイコンではない）
• チップに表示される値は最大 2 つで、その後は +N と表示される
• フィールドの末尾に「すべてクリア」ボタンがある
• 空の状態にクリア操作がある

HTML クラスリファレンス

html-style とのスタイル互換性を保つため、次のクラスを使用します。

要素	クラス	用途
フィルターコンテナー	.filter-bar	最上位のフィルター行
チップコンテナー	.filter-chips	有効なチップをすべて保持します
個別のチップ	.chip	1 つのフィルターチップ
チップの削除	.chip-remove	チップの X ボタン
検索入力欄	.filter-search	テキスト検索フィールド
すべてクリア	.filter-clear	すべてのフィルターをクリアするボタン
並べ替えコントロール	.sort-control	並べ替えドロップダウンのコンテナー
フィルターメニュー	.filter-menu	ドロップダウン式のフィルターパネル
空の状態	.empty-state	結果がない場合のコンテナー

データ属性：

• data-column — チップ上の列識別子
• data-filter-type — フィルターの種類（contains/checkbox/range/date）

スタイルの引き継ぎ

このスキルは、クラス名を含むセマンティック HTML を出力します。ビジュアルスタイルを適用するには、フィルター HTML の生成後に html-style スキルを呼び出します。