skills.rest
adelabdelgawad
adelabdelgawadCOMMUNITY
Explore all skills by this author →
𝕏@Adel_AbdElgawaDGitHub

data-table-page

Build admin CRUD data table pages with server-side fetching and SWR caching.

Updated Dec 16, 2025
Search Tags:#CRUD#SWR#pagination#TanStack Table#data-table#server-components
One-click install
npx skills add https://github.com/adelabdelgawad/meal_request --skill data-table-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-table-page
Source: https://github.com/adelabdelgawad/meal_request/tree/main/.claude/skills/data-table-page
Command: npx skills add https://github.com/adelabdelgawad/meal_request --skill data-table-page

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps developers and product teams build admin CRUD data table pages with server-side data fetching, client-side caching, and rich table interactions, reducing boilerplate and ensuring consistent UX across apps.

Core Features & Use Cases

  • Server-side data fetching: Server Components fetch initial data for fast, SEO-friendly pages.
  • Client-side caching and mutations: SWR is used to cache data and provide optimistic UI updates during mutations.
  • URL state management: nuqs synchronizes pagination, search, and filters with the URL for shareable state.
  • Context-based actions: A dedicated context propagates CRUD actions to nested components, enabling reusable row actions and bulk operations.
  • TanStack Table rendering: Table definitions and behavior rely on TanStack Table for consistent UX.
  • Use cases: Create new data table pages, add/edit/view records, and implement bulk operations with pagination and filtering.

Quick Start

Use the scaffolding script to generate a new data table page and wire it to your API, then customize columns and actions as needed.

Frequently Asked Questions about data-table-page

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

FAQPage Schema
How do I build a CRUD data table with server-side fetching and SWR caching?▼

Build a CRUD data table by using server components for initial fetches and SWR for client-side caching. This approach provides fast initial loads and optimistic UI updates during data mutations.

How do I manage pagination and filter state in a TanStack Table URL?▼

Manage pagination and filter state in a TanStack Table URL using nuqs. This synchronizes table state with the URL, ensuring shareable and bookmarkable data table views across user sessions.

What is the best way to implement bulk updates and row actions in a data table?▼

Implement bulk updates and row actions using a context-based actions API. This pattern propagates CRUD operations to nested components, enabling reusable row actions and bulk operations within TanStack Table.

Can I use server components for initial data loading in a React data table?▼

Yes, you can use server components for initial data loading in a React data table. This ensures fast, SEO-friendly page loads before SWR takes over client-side caching and mutations.

How do I scaffold an admin dashboard data table with add, edit, and view sheets?▼

Scaffold an admin dashboard data table using a generation script. This quickly wires your API to the table, allowing you to customize columns, pagination, and add, edit, or view record sheets.

Does this data table pattern support optimistic mutations during CRUD operations?▼

Yes, this data table pattern supports optimistic mutations during CRUD operations. SWR handles client-side data caching, automatically providing optimistic UI updates when creating, updating, or deleting records.

Related Skills

Explore More Software Engineering Skills→
333-333-333333-333-333

go-service-bootstrap

Bootstrap Go services with dependency wiring and environment-based configuration.

Community
Intermediate
ZaibunisZaibunis

backend-api-foundation

Generate RESTful backend API foundations with CRUD operations and database connectivity.

Community
Intermediate
jiahao-jaydenjiahao-jayden
65

data-table

Build TanStack data tables with server-side pagination and URL state sync.

Community
Advanced
Camilo8902Camilo8902

tanstack-query-setup

Implement TanStack Query for server state management in React applications.

Community
Intermediate