Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/smilejetgz/nextjs-tanstack-table


https://github.com/smilejetgz/nextjs-tanstack-table

docker eslint faker lodash nextjs14 pnpm postgresql prisma shadcn-ui table tailwindcss tanstack typescript

Last synced: 7 days ago
JSON representation

Awesome Lists containing this project

README

        

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

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

```javascript
// src\features\articles\components\ArticlesList.tsx

```

## 🔧 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 |
| :------------: |
| |