📃 Table

พัฒนาตารางแสดงข้อมูลโดยใช้ Next.js เป็น Fullstack และ PostgreSQL เป็นฐานข้อมูลหลัก ใช้ Tanstack Table สำหรับการเก็บแคชข้อมูลในหน่วยความจำเพื่อเพิ่มความเร็วในการโหลดข้อมูลได้อย่างมีประสิทธิภาพ การเก็บข้อมูลแคชไว้สำหรับแต่ละหน้า (pagination) จะช่วยลดเวลาในการดึงข้อมูลใหม่ทุกครั้งที่ผู้ใช้เปลี่ยนหน้า ข้อมูลที่แคชไว้จะช่วยให้การเปลี่ยนหน้าทำได้รวดเร็ว

การสร้างคอมโพเนนต์ของตารางใน Next.js สามารถทำได้โดยการสร้างคอมโพเนนต์ที่สามารถนำกลับมาใช้ซ้ำได้ ซึ่งหมายความว่าสามารถสร้างคอมโพเนนต์ตารางที่ใช้ได้ในหลายจุดของแอปพลิเคชันโดยไม่ต้องสร้างใหม่ทุกครั้ง การใช้ pnpm สำหรับการจัดการแพ็กเกจจะช่วยให้การติดตั้งและอัปเดตแพ็กเกจมีประสิทธิภาพมากขึ้น ช่วยให้การพัฒนาและบำรุงรักษาโค้ดสะดวกยิ่งขึ้น ตัวอย่างเรียกใช้ Table

// src\features\articles\components\ArticlesList.tsx
<DataTable
 columns={columns}
 data={data.data}
 pagination={data.pagination}
 setPagination={setPagination}
/>

🔧 Tools

🚀 Example