Skills
.Work. You
Rest

data-table-page

Community

Build production-grade data table pages fast.

Software Engineering#CRUD#SWR#pagination#TanStack Table#data-table#server-components
Authoradelabdelgawad
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: data-table-page
Download link: https://github.com/adelabdelgawad/meal_request/archive/main.zip#data-table-page

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.