table-filters_skill

Overview

This skill designs optimal filtering UX for data tables by analyzing columns and recommending the best filter type for each. It produces a unified filter bar with inline header filters, filter chips, and semantic class names for easy handoff to implementation.

How this skill works

The tool inspects each column’s data pattern (text, fixed set, numeric, date, boolean) and assigns a filter type: contains, checkboxes, range, date range, or toggle. It then lays out a full-width filter bar containing chips, a search input, a clear-all control, and a sort dropdown, while enabling clickable header icons that open contextual filter menus and insert chips.

When to use it

• Building a data table that needs flexible, discoverable filtering
• Converting ad-hoc header filters into a unified filter experience
• Designing for tables with mixed column data types (text, categories, numbers, dates)
• Creating a reusable filter component set for a design system

Best practices

• Assign filter type per column based on actual data pattern, not gut feeling
• Keep the filter field full-width with chips and a search input in a single row
• Show chips as rounded pills with dark background and light text; include a clear X
• Limit chip value display to two items and append +N for overflow
• Place sort control beside the filter bar, not in headers, to reduce clutter
• Ensure each chip opens its filter menu for quick edits and that menus appear above the bar

Example use cases

• Product table: Product Name -> contains, Category -> checkboxes, Price -> range, Created -> date range
• Issue tracker: Title -> contains, Status -> checkboxes, Priority -> checkboxes, Updated -> date range
• User admin: Name -> contains, Active -> toggle, Age -> range, Role -> checkboxes
• Inventory grid: SKU -> contains, Quantity -> range, Condition -> checkboxes, Last audited -> date range