In this video, we will update our react table with live updates. We will use what is referred to as data polling to check for new data at regular intervals and update our react table display. React Table is also known as TanStack Table. This will be a valuable feature in our Next.js Full Stack Project.

⭐ Use the code "davegray" for 3 months free on the Team plan of Sentry for any new accounts:
- Sentry Homepage: https://bit.ly/sentry-dg
- Sentry Sign-up: https://bit.ly/try-sentry-dg
- Sentry Next.js: https://bit.ly/sentry-nextjs-dg
- Sentry Next.js Docs: https://bit.ly/sentry-docs-dg

🔥 Neon Postgres: https://fyi.neon.tech/davegray

🔒 Kinde Auth: https://kinde.com/dgray-nextjsstack/

👉 Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

💖 Support me on Patreon ➜ https://patreon.com/davegray

🚩 Subscribe  ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Ask Questions & Discuss on Discord ➜  https://discord.gg/neKghyefqh

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

🔗 Next.js Full Stack Project playlist: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6PCLz7VMP2QQdeKa83rshe5

👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

🔗 Course Resources: https://github.com/gitdagray/nextjs-full-stack-project

React Table with Live Updates | Data Polling in Next.js & TanStack Table

(0:00:00) Intro
(0:01:06) Tech Stack
(0:01:26) User Stories Checklist
(0:02:10) Why We Need Data Polling
(0:03:34) Add Live Updates to React Table
(0:13:58) Move Pagination State to URL Params
(0:25:05) Button Layout Updates
(0:28:42) loading and not-found
(0:37:44) Adjusting Table Column Widths
(0:43:09) Correct Filter Counts
(0:50:17) Tech Assignment Values
(0:55:25) Ordering Customer Search Results
(0:57:04) Permissions & Separation of Concerns
(1:01:45) Server-Side vs Client-Side Permissions
(1:09:08) Transitioning Form State
(1:13:33) Duplicate Entry Validation
(1:24:42) The Missing Link
(1:41:47) Back Button Data
(1:46:29) Pagination & Filters Sync
(1:54:08) Wrap-up

📚 Tutorial References:
🔗 Next.js: https://nextjs.org/
🔗 ShadCN/ui: https://ui.shadcn.com/
🔗 Sentry Next.js: https://bit.ly/sentry-nextjs-dg
🔗 Tailwind CSS: https://tailwindcss.com/
🔗 TypeScript: https://www.typescriptlang.org/
🔗 Drizzle ORM: https://orm.drizzle.team/
🔗 Neon Postgres: https://fyi.neon.tech/davegray
🔗 Kinde Auth: https://kinde.com/dgray-nextjsstack/
🔗 next-safe-action: https://next-safe-action.dev/
🔗 TanStack React Table: https://tanstack.com/table/latest

Was this React Table with Live Updates via data polling tutorial helpful? If so, please share. Let me know your thoughts in the comments. 

#nextjs #react #table

Dave Gray

Learn how to add live updates to a React table using data polling in Next.js and TanStack Table. This lesson includes final code reviews, refactoring, and tips for deployment. Key highlights include adding functionality for live data updates, handling user stories, setting up a new hook for polling, managing interval updates, and ensuring changes reflect correctly in the user interface.