Verified:GitHub

frontend_tables

Name: frontend_tables
Availability: InStock
Author: tonehq

Generates Tone frontend table pages with CustomTable server-side filtering, sorting, and pagination using React Hook data fetching.

11|3|Updated Aug 31, 2025

Search Tags:#frontend #tanstack #generator #server-side #table #customtable

Ready to run

npx skills add https://github.com/tonehq/tone --skill frontend-tables

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend_tables
Source: https://github.com/tonehq/tone/tree/main/.claude/skills/frontend_tables
Command: npx skills add https://github.com/tonehq/tone --skill frontend-tables

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generates complete Tone frontend table pages with server-side filtering, sorting, and pagination, reducing boilerplate and ensuring consistent UI.

Core Features & Use Cases

Uses the CustomTable component (TanStack React Table) to render server-side sortable columns with sticky headers and either infinite scrolling or classic pagination.
Reads TABLE metadata from the backend or inspects models/controllers to derive column keys, filter options, and sort fields for consistent integration.
Provides a scalable pattern for adding new entity tables across the Tone frontend with consistent architecture and hooks.

Quick Start

Generate a frontend table page for the target entity using the skill and verify that backend TABLE metadata aligns with the frontend expectations.

Frequently Asked Questions about frontend_tables

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

FAQPage Schema

How do I generate a frontend table with server-side sorting and pagination?▼

To generate a frontend table with server-side sorting and pagination, the skill reads backend TABLE metadata or models to derive columns, then outputs a page using CustomTable and React Query hooks for non-client-side data fetching.

Can I use TanStack React Table for server-side filtering without fetching all data?▼

Yes, you can use TanStack React Table for server-side filtering. The skill generates a CustomTable implementation that ensures all filtering, sorting, and pagination operations are handled on the server via React Query hooks rather than client-side.

How to derive table columns from backend metadata for a React frontend?▼

To derive table columns from backend metadata for a React frontend, the skill inspects backend TABLE metadata, models, and controllers to align column keys, allowed sort fields, and filter options with the frontend architecture.

Does this table generator support infinite scrolling and classic pagination?▼

Yes, the table generator supports both infinite scrolling and classic pagination. It builds a CustomTable component using TanStack React Table that can render server-side sortable columns with sticky headers in either layout mode.

What's the best way to ensure my generated table aligns with allowed backend sort fields?▼

The best way to ensure your generated table aligns with allowed backend sort fields is to use the skill to directly inspect backend controllers and models. This guarantees the frontend table configuration matches server-side constraints.

Why does my frontend table need React Query hooks for pagination?▼

Your frontend table needs React Query hooks for pagination to ensure data fetching adheres to the repository's reference architecture. This approach enforces server-side data processing, preventing the client from loading entire datasets.