How does it handle large datasets in filters?

For lists with over 50 items, the skill recommends using 'model-search-select' or 'model-search-multi-select' to optimize performance and user experience via remote searching.

Can I map filters to different database columns?

Yes, you can define a field object that specifies unique names for the URL query parameter, the Postgres column, and the Elasticsearch column.

What UI components does this skill support?

It supports a wide range of types including text, checkbox, simple/multi-select, model-based search, date ranges, and visual gaps for grouping.

What query patterns are supported by default?

The skill supports exact matches, multiple values (IN), not-equal, ILIKE search, greater/less than, and between ranges using a standardized query syntax.

Dynamic Table Filter Builder

Name: Dynamic Table Filter Builder
Author: griffnb

bygriffnb

0•

デザインツール

Generates standardized table filters with advanced query logic, model searching, and visual grouping for frontend applications.

The Filters Building skill provides a comprehensive framework for constructing complex table filters that seamlessly integrate with backend query parameters. It automates the creation of diverse filter types—ranging from simple text and checkboxes to advanced model-based search and multi-select components—while ensuring consistent query patterns across Postgres and Elasticsearch backends. This skill is ideal for developers building data-heavy administrative dashboards or asset management interfaces that require granular data filtering, optimized search performance for large datasets, and a unified approach to query parameter management.

主な機能

01Flexible field mapping for synchronized Postgres and Elasticsearch queries

02Visual organization tools using section separators and gaps for better UX

03Standardized UI filter component definitions (text, select, date-range, and more)

040 GitHub stars

05Advanced query pattern support including range, ILIKE, and IN clauses

06Smart model search variants for handling large datasets over 50 items

ユースケース

01Building administrative dashboards with complex data filtering requirements

02Standardizing URL query parameter logic between frontend and backend layers

03Implementing searchable relationship filters for large-scale model datasets

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add griffnb/assettradingdesk-ui filters-building

For use in Claude.ai and ChatGPT

Download Skill