skills.rest
genfeedai
genfeedaiOFFICIAL
Explore all skills by this author →
Website𝕏@genfeedaiGitHub

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
One-click install
npx skills add https://github.com/genfeedai/genfeed.ai --skill table-filters-genfeedai
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
rohunvorarohunvora
20

table-filters

Analyze column data patterns and generate semantic HTML filter bars.

Community
Intermediate
benswiftbenswift
26

frontend-web-engineer

Develops accessible, responsive HTML/CSS/JavaScript interfaces with Playwright-based testing.

Community
Intermediate
janpeterdjanpeterd

tanstack-table

Configure headless TanStack Table logic for sorting, filtering, pagination, and grouping.

Community
Advanced
PeakTaiPeakTai

wok-ui-dropdown

Create interactive dropdown and dropup menus for wok-ui applications.

Community
Intermediate