How does it handle filtering and pagination?

It uses URL parameters managed by nuqs. When the URL state changes, SWR automatically detects the change in the key and re-fetches the data from the API routes.

Is the generated table mobile-responsive?

Yes, it leverages a centralized reusable data-table component and standard Shadcn UI patterns that support responsive layouts and overflow handling.

Does this skill support optimistic UI updates?

No, this skill intentionally uses server-response-based updates. It waits for the API response before mutating the SWR cache to ensure the UI always reflects the true state of the database.

What libraries are required for the generated code to work?

The generated code depends on swr for fetching, nuqs for URL state, @tanstack/react-table for table logic, and a reusable data-table component at @/components/data-table.

Can I use this with the Next.js App Router?

Absolutely. This skill is specifically architected for the Next.js App Router, utilizing Server Components for the initial page fetch and Client Components for interactivity.

Next.js Data Table Page Generator

Name: Next.js Data Table Page Generator
Author: adelabdelgawad

byadelabdelgawad

0•

Productivity & Workflow

Generates production-grade Next.js data table pages featuring SSR initial loading, SWR caching, and URL-driven state management.

This skill automates the creation of complex entity management interfaces in Next.js by following a proven, high-performance architecture. It combines Server-Side Rendering (SSR) for fast initial paints with SWR for reactive client-side updates, ensuring a seamless user experience. The generator scaffolds a complete directory structure including API routes, TanStack Table column definitions, and context-based CRUD actions, while utilizing nuqs for synchronized URL state. It is specifically designed for developers building robust admin dashboards and CRUD-heavy applications that require type safety and reliable data synchronization without the risks of optimistic UI updates.

Key Features

01Hybrid SSR/SWR architecture for optimal performance and SEO

02Server-response-based cache mutation for maximum data integrity

03Type-safe column definitions using TanStack Table primitives

040 GitHub stars

05Scaffolds complete file structures including API routes and UI components

06URL-based state management for pagination and filtering via nuqs

Use Cases

01Developing high-performance list views with real-time data synchronization

02Building administrative dashboards and back-office management systems

03Creating complex CRUD interfaces with advanced filtering and bulk actions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adelabdelgawad/claude-fullstack-plugins nextjs-data-table-page

For use in Claude.ai and ChatGPT

Download Skill