react-template-table-feature

What problem does it solve?

Creating or refactoring table pages in the react-template repo requires many repetitive, error-prone steps: splitting UI from logic, centralizing API access and parsing, wiring URL-synced table state, registering lazy routes, and adding matching locale keys. This Skill codifies the repository pattern and reduces manual work while ensuring consistent, type-safe implementations that pass type-check and build.

Core Features & Use Cases

• Repository-aligned scaffolding: Produces <feature>.page.tsx, <feature>.handler.ts, optional <feature>.column.ts, and data-access modules with schema parsing.
• URL-synced table state & server integration: Uses useTableState for filters, sorting, and pagination and integrates useQuery-based data fetching with centralized API functions.
• Route and i18n wiring: Adds lazy route registration via withSuspense in src/common/router.tsx and updates en/el locale namespaces.
• Use Case: Add a team-members table page that fetches paginated data from /api/team-members, exposes server-driven filters, and keeps query state in the URL.

Quick Start

Create a new table feature named team-members at route /team-members using GET /api/team-members with server-side page and limit pagination and columns id,name,email.