Learn how to create a React Table with pagination, column filters, and sorting. In this chapter of the Next.js Full Stack Project, we will add a React Table to display our ticket results with these advanced features.

⭐ 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 Pagination, Column Filters & Sorting | Next.js Full Stack Project

(0:00:00) Intro
(0:01:03) Tech Stack
(0:01:23) User Stories Checklist
(0:01:54) Drizzle Query Updates
(0:07:56) Ticket Table structure
(0:28:30) Loading State Options
(0:36:26) React Table Pagination
(0:47:19) Column Filters
(1:11:48) Column Sorting

📚 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 Pagination, Column Filtering, and Column Sorting tutorial helpful? If so, please share. Let me know your thoughts in the comments. 

#nextjs #react #table

Dave Gray

Learn how to enhance a React table in a Next.js full stack project with features like pagination, column filtering, and sorting. The tutorial includes coding steps and best practices for implementing these features using various tools and libraries, including Sentry for debugging.