React Table with Live Updates | Data Polling in Next.js & TanStack Table
Description: 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 Close description
⭐ 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 Close description
