table-filters

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Table Filters

表格过滤器

When the user is building a table that needs filters, analyze the columns and design the filtering UX.

当用户构建需要过滤功能的表格时，分析列并设计过滤用户体验（UX）。

Step 1: Analyze Each Column

步骤1：分析每一列

For each column in the table, determine the filter type:

Data Pattern	Filter Type	Example Columns
Free text, names, descriptions	Contains	Product Name, Notes, Customer
Fixed set of values (<20 options)	Checkboxes	Status, Category, Priority, Type
Numeric values	Range	Price, Quantity, Age, Score
Dates	Date Range	Created, Updated, Due Date
Boolean	Toggle	Active, Verified, Published

针对表格中的每一列，确定过滤类型：

数据模式	过滤类型	示例列
自由文本、名称、描述	包含	产品名称、备注、客户
固定值集合（少于20个选项）	复选框	状态、分类、优先级、类型
数值	范围	价格、数量、年龄、分数
日期	日期范围	创建时间、更新时间、截止日期
布尔值	开关	激活状态、已验证、已发布

Step 2: Implement the Filter Layout

步骤2：实现过滤器布局

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

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

Key layout rules:

Filter field spans table width, contains chips + search input + clear button
Sort dropdown next to filter field (not in headers)
Each header is clickable and opens its filter menu
Menu appears ABOVE field when filtering (inserts chip directly)

┌─────────────────────────────────────────────────────────┐
│ [过滤标签将显示在此处...] [🔍 过滤或搜索...]  [✕] │  ← 统一过滤字段
└─────────────────────────────────────────────────────────┘
                                          排序方式: [下拉菜单 ▾]

┌──────────────┬──────────────┬──────────────┬──────────────┐
│ 名称       ▼ │ 状态     ▼ │ 价格      ▼ │ 创建时间    ▼ │  ← 带有过滤图标的可点击表头
├──────────────┼──────────────┼──────────────┼──────────────┤
│ ...          │ ...          │ ...          │ ...          │

关键布局规则：

过滤字段横跨表格宽度，包含标签、搜索输入框和清除按钮
排序下拉菜单紧邻过滤字段（而非在表头中）
每个表头均可点击，点击后打开其过滤菜单
过滤时菜单显示在字段上方（直接插入标签）

Step 3: Build Each Filter Component

步骤3：构建每个过滤器组件

Contains Filter (text)

包含过滤器（文本）

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

Chip result:

Product Name: system

┌─ 产品名称 ──────────── ✕ ─┐
│ ┌────────────────────────────┐│
│ │ 搜索...                  ││
│ └────────────────────────────┘│
└───────────────────────────────┘

标签结果：

产品名称: system

Checkbox Filter (categories)

复选框过滤器（分类）

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

Chip result:

Status: Active, Pending

Status: Active, +2

┌─ 状态 ──────────────── ✕ ─┐
│ ☑ 激活                     │
│ ☑ 待处理                    │
│ ☐ 已归档                   │
│ ☐ 已删除                    │
│            [清除] [应用]   │
└──────────────────────────────┘

标签结果：

状态: 激活, 待处理

或

状态: 激活, +2

Range Filter (numeric)

范围过滤器（数值）

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

Chip result:

Price: $0 - $100

┌─ 价格 ─────────────────── ✕ ─┐
│  最小值         最大值              │
│ ┌─────┐     ┌─────┐           │
│ │ 0   │  -  │ 100 │           │
│ └─────┘     └─────┘           │
│ ○───────────────●─────○       │  ← 可选滑块
│              [应用]          │
└───────────────────────────────┘

标签结果：

价格: $0 - $100

Date Range Filter

日期范围过滤器

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

Chip result:

Created: Jan 1 - Dec 31, 2025

┌─ 创建时间 ─────────────────── ✕ ─┐
│  起始日期           结束日期              │
│ ┌──────────┐   ┌──────────┐     │
│ │ 2025/01/01 │ - │ 2025/12/31 │     │
│ └──────────┘   └──────────┘     │
│ [今天] [本周] [本月]│
│                [应用]          │
└─────────────────────────────────┘

标签结果：

创建时间: 2025年1月1日 - 2025年12月31日

Chip Design Rules

标签设计规则

Dark background, light text, rounded pill shape
X button on contrasting surface (clearly clickable)
Truncate after 2 values:
```
Status: Active, Pending, +3
```
Clicking chip reopens its filter menu

深色背景、浅色文字、圆角胶囊形状
清除按钮（X）使用对比色背景（确保可点击性）
最多显示2个值，超出后显示
```
+N
```
：
```
状态: 激活, 待处理, +3
```
点击标签可重新打开对应的过滤菜单

Empty State

空状态

When filters return no results:

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

   [Clear all filters]

当过滤器返回无结果时：

     ┌─────────────┐
     │   (╯°□°)╯   │
     │   ︵ ┻━┻    │
     └─────────────┘
   未找到结果
   请尝试调整过滤器

   [清除所有过滤器]

Quick Checklist

快速检查清单

HTML Class Reference

HTML类参考

Use these classes for styling compatibility with

html-style

Element	Class	Purpose
Filter container	`.filter-bar`	Top-level filter row
Chip container	`.filter-chips`	Holds all active chips
Individual chip	`.chip`	Single filter chip
Chip remove	`.chip-remove`	X button on chip
Search input	`.filter-search`	Text search field
Clear all	`.filter-clear`	Clear all filters button
Sort control	`.sort-control`	Sort dropdown container
Filter menu	`.filter-menu`	Dropdown filter panel
Empty state	`.empty-state`	No results container

Data attributes:

```
data-column
```
— Column identifier on chips
```
data-filter-type
```
— Filter type (contains/checkbox/range/date)

使用以下类以确保与

html-style

的样式兼容性：

元素	类名	用途
过滤器容器	`.filter-bar`	顶层过滤行
标签容器	`.filter-chips`	容纳所有激活的标签
单个标签	`.chip`	单个过滤标签
标签清除按钮	`.chip-remove`	标签上的X按钮
搜索输入框	`.filter-search`	文本搜索字段
清除全部按钮	`.filter-clear`	清除所有过滤器的按钮
排序控件	`.sort-control`	排序下拉菜单容器
过滤菜单	`.filter-menu`	下拉过滤面板
空状态容器	`.empty-state`	无结果容器

数据属性：

```
data-column
```
— 标签上的列标识符
```
data-filter-type
```
— 过滤类型（contains/checkbox/range/date）

Styling Handoff

样式交付

This skill outputs semantic HTML with class names. For visual styling, invoke the

html-style

skill after generating filter HTML.

本技能输出带有类名的语义化HTML。如需视觉样式，请在生成过滤器HTML后调用

html-style

技能。