Comprehensive advanced table components skill for Next.js applications with TanStack Table v8, server-side operations, and Supabase integration. Use when building data-intensive tables with features like server-side pagination/sorting/filtering, column management, row selection, bulk actions, export functionality, real-time updates, and advanced filtering UI. Covers complete workflow from database design to production-ready table implementations with shadcn/ui components. Automatically triggers for data tables, admin dashboards, report views, or any complex tabular data display needs.
Complete production-ready patterns for building feature-rich data tables in Next.js with server-side operations, advanced filtering, and optimal performance.
Server-First Architecture: All heavy operations (sorting, filtering, pagination) happen on the server to handle large datasets efficiently.
Progressive Enhancement: Tables work without JavaScript, then enhance with client-side features for better UX.
Type-Safe End-to-End: Full TypeScript coverage from database to UI components.
Use this skill when:
Dataset size and requirements?
├─ < 100 rows → Simple client-side table
├─ 100-1000 rows → Hybrid approach (initial server load + client operations)
├─ 1000-10000 rows → Server-side with pagination
├─ 10000+ rows → Server-side with virtualization
└─ Real-time updates → Server-side with subscriptions
| Feature | Small Dataset | Medium Dataset | Large Dataset | Real-time |
|---|---|---|---|---|
| Pagination | Optional | Recommended | Required | Required |
| Virtualization | No | Optional | Recommended | Recommended |
| Server Sorting | No | Optional | Required | Required |
| Server Filtering | No | Recommended | Required | Required |
| Row Selection | Client | Hybrid | Server-aware | Server-aware |
| Bulk Actions | Client | Server | Server (batched) | Server (queued) |
| Export | Client | Server (streamed) | Server (background) | Server (snapshot) |
# Core table dependencies
npm install @tanstack/react-table@latest
npm install @tanstack/match-sorter-utils
# UI components (shadcn/ui)
npx shadcn@latest add table button input select checkbox dropdown-menu
npx shadcn@latest add command popover badge separator skeleton
npx shadcn@latest add sheet dialog tooltip calendar slider
# Additional utilities
npm install nuqs date-fns clsx tailwind-merge
npm install sonner lucide-react
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
npm install papaparse xlsx file-saver
components/
├── data-table/
│ ├── data-table.tsx # Core table component
│ ├── data-table-toolbar.tsx # Search, filters, actions
│ ├── data-table-column-header.tsx # Sortable headers
│ ├── data-table-pagination.tsx # Pagination controls
│ ├── data-table-view-options.tsx # Column visibility
│ ├── data-table-faceted-filter.tsx # Multi-select filters
│ ├── data-table-date-filter.tsx # Date range filters
│ ├── data-table-slider-filter.tsx # Numeric range filters
│ ├── data-table-action-bar.tsx # Bulk action floating bar
│ ├── data-table-row-actions.tsx # Row-level actions
│ ├── data-table-export.tsx # Export functionality
│ └── data-table-skeleton.tsx # Loading states
lib/
├── table/
│ ├── hooks.ts # useDataTable, useTableState
│ ├── utils.ts # Table utilities
│ ├── filters.ts # Filter functions
│ ├── export.ts # Export utilities
│ └── types.ts # TypeScript definitions
Before implementing, answer these questions:
Based on the requirements, implement the appropriate data fetching pattern:
references/core-patterns.md Pattern 2: Data Fetching with Supabasereferences/advanced-features.md Pattern 7: Real-time UpdatesDefine table columns with appropriate features:
references/core-patterns.md Pattern 3: Advanced Column ConfigurationBuild the main table component:
references/core-patterns.md Pattern 1: Server-Side Data Table hookEnhance the table with user interactions:
references/filtering-actions.md Pattern 4: Advanced Filtering UIreferences/filtering-actions.md Pattern 5: Action Bar for Bulk Operationsreferences/filtering-actions.md Pattern 6: Export FunctionalityApply performance optimizations:
references/advanced-features.md Virtual Scrolling patternreferences/performance-best-practices.md React Optimizationreferences/performance-best-practices.md Query OptimizationBased on requirements, add additional features:
references/advanced-features.md Pattern 8: Inline Editingreferences/advanced-features.md Column Resizing and Reorderingreferences/advanced-features.md Pattern 7: Real-time Updates with SupabaseThis skill includes detailed reference documentation for implementation patterns:
Core implementation patterns including:
Advanced filtering and action patterns including:
Advanced table features including:
Performance optimization and best practices including:
To implement a data table, start by determining the dataset size and required features using the Quick Decision Framework, then follow the Implementation Workflow step by step, referencing the appropriate patterns from the references/ files as needed.