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

Productivity & Workflow

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

About

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

Hybrid SSR/SWR architecture for optimal performance and SEO
Server-response-based cache mutation for maximum data integrity
Type-safe column definitions using TanStack Table primitives
0 GitHub stars
Scaffolds complete file structures including API routes and UI components
URL-based state management for pagination and filtering via nuqs

Use Cases

Developing high-performance list views with real-time data synchronization
Building administrative dashboards and back-office management systems
Creating complex CRUD interfaces with advanced filtering and bulk actions

About

Key Features

Hybrid SSR/SWR architecture for optimal performance and SEO
Server-response-based cache mutation for maximum data integrity
Type-safe column definitions using TanStack Table primitives
0 GitHub stars
Scaffolds complete file structures including API routes and UI components
URL-based state management for pagination and filtering via nuqs

Use Cases

Developing high-performance list views with real-time data synchronization
Building administrative dashboards and back-office management systems
Creating complex CRUD interfaces with advanced filtering and bulk actions