Table Filters

Name: Table Filters
Author: shipshitdev

shipshitdev/library

140 installs
31 repo stars
Updated August 2, 2026
shipshitdev/library

Add sortable, searchable, and facet-based filters to data tables in admin dashboards, CRMs, and reporting UIs without reinventing filter state logic.

About

Implements table filtering patterns from shipshitdev/library for SaaS and content apps: search, facets, sort, and filter state on dense data tables in dashboards and admin surfaces.

Filter state for data tables
Search and facet patterns
Dashboard and admin UI focus
Reusable table interaction logic

Table Filters by the numbers

140 all-time installs (skills.sh)
+2 installs in the week ending Aug 5, 2026 (Skillselion tracking)
Ranked #968 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/shipshitdev/library/table-filters.svg)](https://skillselion.com/skills/shipshitdev/library/table-filters)

Installs	140
repo stars	★ 31
Last updated	August 2, 2026
Repository	shipshitdev/library ↗

What it does

Add sortable, searchable, and facet-based filters to data tables in admin dashboards, CRMs, and reporting UIs without reinventing filter state logic.

Files

SKILL.mdMarkdownGitHub ↗

Table Filters

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.

{
  "name": "table-filters",
  "version": "1.0.0",
  "description": "Designs optimal filtering UX for data tables. Use when building a table that needs filters - analyze",
  "author": {
    "name": "Ship Shit Dev",
    "email": "hello@shipshit.dev",
    "url": "https://shipshit.dev"
  },
  "license": "MIT",
  "skills": "."
}

table-filters

Design optimal filtering UX for data tables.

When to Use

Building a table that needs user-controlled filters
Claude struggles with filter UX patterns

What It Does

1. Analyzes each column's data type 2. Assigns filter type (text, checkbox, range, date) 3. Designs chip-based filter UI 4. Outputs semantic HTML with class names