table-filters

Analyze table columns and generate semantic HTML filter UIs.

2|1|Updated Apr 4, 2026

Search Tags:#ux-design #data-table #semantic-html #ui-patterns #component-design #table-filters #filter-ux

Ready to run

npx skills add https://github.com/genfeedai/genfeed.ai --skill table-filters-genfeedai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: table-filters
Source: https://github.com/genfeedai/genfeed.ai/tree/main/.agents/skills/table-filters
Command: npx skills add https://github.com/genfeedai/genfeed.ai --skill table-filters-genfeedai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

Analyzes each column's data type and assigns an appropriate filter type (text, checkbox, range, date, boolean).
Designs a chip-based unified filter UI with a single header for search and filter controls.
Outputs semantic HTML with class names ready for styling; supports dashboards, admin grids, and tables requiring per-column filtering.

Quick Start

Provide a data table and let the skill generate the filter UI for you.

Frequently Asked Questions about table-filters

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design table filters that match the data type of each column?▼

To design table filters that match column data types, you analyze each column's data patterns to assign an appropriate filter control, such as text, checkbox, range, date, or boolean, ensuring users query data efficiently.

What is the best UX pattern for per-column filtering in admin grids?▼

The best UX pattern for per-column filtering in admin grids is a unified, chip-based filter UI integrated directly into the table header, combining global search and individual column controls for an accessible experience.

How do I generate semantic HTML for a data table filter UI?▼

You generate semantic HTML for a data table filter UI by creating header-based filter elements with CSS-ready class names, allowing developers to apply styles directly to the structured markup for dashboards and reporting tables.

Can I use adaptive table filters for dashboards and reporting tables?▼

Yes, you can use adaptive table filters for dashboards and reporting tables. The system analyzes data columns to determine the optimal filter type and outputs a unified search experience tailored for these interfaces.

When should I use a range filter versus a checkbox filter in a data table?▼

You should use a range filter for numerical or date columns, and a checkbox filter for columns with distinct categorical values. The system determines this by analyzing each column's data patterns to assign the optimal filter type.