📃 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

Favicon	Package	Version
	NextJS	14.2.6
	Pnpm	9.6.0
	Tanstack	5.55.0
	Tailwind	3.4.10
	Shadcn	2.0.4
	Typescript	5
	Lodash	4.17.7
	Faker	8.4.1
	Eslint	8
	Prisma	5.18.0
	PostgreSQL	17
	Docker	4.33.1
	Postman	11.11.1

🚀 Example

DataTable version 1.0.0

API