React Table with Live Updates - Data Polling in Next.js and TanStack Table

Overview

Learn to implement live data updates in a React table through data polling in this comprehensive tutorial video. Master the integration of TanStack Table with Next.js while exploring essential features like pagination state management through URL parameters, dynamic table column adjustments, and filter count optimization. Discover how to handle permissions across server and client sides, implement form state transitions, validate duplicate entries, and synchronize pagination with filters. Dive deep into practical implementations using a modern tech stack including ShadCN/ui, Tailwind CSS, TypeScript, Drizzle ORM, Neon Postgres, and Kinde Auth. Follow along with detailed demonstrations of user story implementations, separation of concerns, and best practices for building robust, real-time data tables in a full-stack Next.js application.

Syllabus

Intro
Tech Stack
User Stories Checklist
Why We Need Data Polling
Add Live Updates to React Table
Move Pagination State to URL Params
Button Layout Updates
loading and not-found
Adjusting Table Column Widths
Correct Filter Counts
Tech Assignment Values
Ordering Customer Search Results
Permissions & Separation of Concerns
Server-Side vs Client-Side Permissions
Transitioning Form State
Duplicate Entry Validation
The Missing Link
Back Button Data
Pagination & Filters Sync
Wrap-up