mcpField
T
table-filters

table-filters

github.com/shipshitdev设计与 UI38183 次安装2 天前更新
代码仓库

关于 table-filters

用于分析表格列并设计筛选交互的技能，涵盖筛选类型和界面布局。它还规定筛选标签、菜单、排序控件及无结果状态的行为。

主要功能

  1. 01按列数据类型选择筛选方式
  2. 02在统一筛选栏中组合标签与搜索
  3. 03通过菜单设置单列筛选
  4. 04将排序放入下拉菜单
  5. 05定义标签和无结果状态行为
  6. 06提供语义化 HTML 类名

适用场景

  1. 01设计商品表格筛选器
  2. 02构建日期和数值范围控件
  3. 03用可移除标签展示生效筛选
  4. 04无匹配行时提供清除操作

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/shipshitdev/skills --skill table-filters

安装后在 Claude Code 中输入/table-filters确认已加载。

附带文件plugin.jsonREADME.md

详细介绍

表格筛选器

当用户构建的表格需要筛选器时，分析各列并设计筛选体验。

第 1 步：分析每一列

对于表格中的每一列，确定筛选类型：

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

第 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单个筛选器标签
标签移除按钮.chip-remove标签上的 X 按钮
搜索输入框.filter-search文本搜索字段
全部清除.filter-clear清除所有筛选器的按钮
排序控件.sort-control排序下拉菜单容器
筛选菜单.filter-menu下拉筛选面板
空状态.empty-state无结果容器

数据属性：

  • data-column — 标签上的列标识符
  • data-filter-type — 筛选类型（包含/复选框/范围/日期）

样式交接

此技能会输出包含类名的语义化 HTML。要设置视觉样式，请在生成筛选器 HTML 后调用 html-style 技能。

评论

支持 Markdown