About

Imported from shipshitdev/skills (skills/table-filters/SKILL.md). Install upstream with npx skills add shipshitdev/skills --skill table-filters. Copyright stays with the author.

Table Filters

Name: table-filters
Author: shipshitdev

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

Step 1: Analyze Each Column

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

Step 2: Implement the Filter Layout

┌─────────────────────────────────────────────────────────┐
│ [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

Contains Filter (text)

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

Chip result: Product Name: system

Checkbox Filter (categories)

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

Chip result: Status: Active, Pending or Status: Active, +2

Range Filter (numeric)

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

Chip result: Price: $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

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

Empty State

When filters return no results:

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

   [Clear all filters]

Quick Checklist

When implementing, verify:

Each column has appropriate filter type assigned
Filter field contains chips (not separate row above)
Sort is dropdown, not toggle icons in headers
Chip shows max 2 values, then +N
Clear all button at end of filter field
Empty state has clear action

HTML Class Reference

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)

Styling Handoff

This skill outputs semantic HTML with class names. For visual styling, invoke the html-style skill after generating filter HTML.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/shipshitdev-skills-table-filters/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

shipshitdev-skills-table-filters.ocm.jsonjson

{
  "ocm": "1",
  "id": "shipshitdev-skills-table-filters",
  "kind": "skill",
  "name": "table-filters",
  "description": "Designs optimal filtering UX for data tables. Use when building a table that needs filters - analyzes the data columns and determines the best filter type for each. Outputs a unified filter field with inline header filters.",
  "publisher": "shipshitdev",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "data_analysis"
    ],
    "tags": [
      "skill-md",
      "tables",
      "filters",
      "ux",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Designs optimal filtering UX for data tables. Use when building a table that needs filters - analyzes the data columns and determines the best filter type for each. Outputs a unified filter field with inline header filters."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/shipshitdev/skills",
      "path": "skills/table-filters/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/shipshitdev/skills/blob/HEAD/skills/table-filters/SKILL.md",
      "key": "shipshitdev/skills/skills/table-filters/SKILL.md"
    }
  },
  "instructions": "# Table Filters\n\nWhen the user is building a table that needs filters, analyze the columns and design the filtering UX.\n\n## Step 1: Analyze Each Column\n\nFor each column in the table, determine the filter type:\n\n| Data Pattern | Filter Type | Example Columns |\n|--------------|-------------|-----------------|\n| Free text, names, descriptions | **Contains** | Product Name, Notes, Customer |\n| Fixed set of values (<20 options) | **Checkboxes** | Status, Category, Priority, Type |\n| Numeric values | **Range** | Price, Quantity, Age, Score |\n| Dates | **Date Range** | Created, Updated, Due Date |\n| ",
  "cost": {
    "context_tokens": 1150
  }
}

Fetch it by URL: GET /api/v1/registry/shipshitdev-skills-table-filters/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.