skills.rest
tkorakas
tkorakasCOMMUNITY
Explore all skills by this author →
GitHub

react-template-table-feature

Generate React table features with URL-synced state and data-access modules.

11|Updated Nov 8, 2025
Search Tags:#typescript#react#i18n#pagination#data-access#table#url-synced-state
One-click install
npx skills add https://github.com/tkorakas/react-template --skill react-template-table-feature
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-template-table-feature
Source: https://github.com/tkorakas/react-template/tree/main/.agents/skills/react-template-table-feature
Command: npx skills add https://github.com/tkorakas/react-template --skill react-template-table-feature

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about react-template-table-feature

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

FAQPage Schema
How do I create a React data table with URL-synced pagination and filters?▼

To create a React data table with URL-synced pagination, you separate the UI page from the handler logic and use the useTableState hook to keep query parameters in the URL. This approach ensures the table state remains shareable and bookmarkable.

What is the best way to centralize API calls for a TypeScript React table feature?▼

The best way to centralize API calls for a TypeScript React table is migrating direct fetches into dedicated data-access modules. You generate *.api.ts files for the endpoints and *.schema.ts files to parse and validate the server responses.

How do I add server-driven sorting and filtering to an existing React table?▼

You add server-driven sorting and filtering by refactoring the table into a handler module that uses useTableState and useQuery. This configuration passes the URL-synced filter and sort parameters directly to your centralized data-access API functions.

Can I automatically wire lazy routes and i18n keys when scaffolding a React table page?▼

Yes, you can wire lazy routes and i18n keys when scaffolding a React table page. The process registers routes with withSuspense in the router file and automatically updates the matching locale namespaces in the public/locales directory.

Does scaffolding a React table feature support type checking and build validation?▼

Scaffolding a React table feature supports type checking and build validation by generating strictly typed modules. It creates schema-validated data-access files and TypeScript handler components that are designed to pass pnpm type-check and build commands.

Related Skills

Explore More Software Engineering Skills→
ckrono-progckrono-prog

pnpm-workspace

Manage pnpm monorepo workspace structure and dependencies with TypeScript and React Query.

Community
Advanced
villetakanenvilletakanen
29

dev

Translate backlog items into TypeScript code with pnpm check and pnpm lint.

Community
Intermediate
vultisigvultisig
19

React Query Patterns

Implement React Query hooks for data fetching and state management.

Official
Intermediate
pproencapproenca
193

nuqs

Manage type-safe URL query state in Next.js applications with hooks and server utilities.

Community
Intermediate