shadcn table

ตาราง Shadcn

นี่คือตาราง Shadcn ที่มีการเรียงลำดับเซิร์ฟเวอร์การกรองและการแบ่งหน้า มันถูก bootstrapped ด้วย create-t3-app

คำเตือน โครงการนี้ยังอยู่ในระหว่างการพัฒนาและยังไม่พร้อมสำหรับการใช้งานการผลิต

มันใช้เทคโนโลยีใหม่ (PPR, React Compiler) ซึ่งอาจมีการเปลี่ยนแปลงและอาจทำลายแอปพลิเคชันของคุณ

ซ้อนเทค

• เฟรมเวิร์ก: next.js
• สไตล์: Tailwind CSS
• ส่วนประกอบ UI: Shadcn/UI
• แพ็คเกจตาราง: tanstack/react-table
• ฐานข้อมูล: นีออน
• ORM: Drizzle Orm
• การตรวจสอบ: zod

คุณสมบัติ

• การแบ่งหน้าเซิร์ฟเวอร์การเรียงลำดับและการกรอง (ผ่านตะขอ useDataTable )
• คอลัมน์ที่ปรับแต่งได้ ( dataTable และ columns อุปกรณ์ประกอบฉาก)
• ตัวกรองการค้นหาแบบไดนามิกและตัวกรอง faceted ( filterFields Prop)
• TANDIC Data-Table-Toolbar พร้อมการค้นหาตัวกรองและการกระทำ
• Notion เสริมเช่นการกรองขั้นสูง ( enableAdvancedFilter prop)
• เป็นตัวเลือก Linear เหมือนแถบลอยในการเลือกแถว ( floatingBar Prop)

ทำงานในพื้นที่

1. โคลนที่เก็บ

   git clone https://github.com/sadmann7/shadcn-table

2. ติดตั้งการพึ่งพาโดยใช้ PNPM

   pnpm install

3. คัดลอก .env.example เป็น .env และอัปเดตตัวแปร

   cp .env.example .env

4. เริ่มต้นเซิร์ฟเวอร์การพัฒนา

   pnpm run dev

5. กดสคีมาฐานข้อมูล

   pnpm run db:push

สร้างตารางของคุณเอง

1. คัดลอกโฟลเดอร์และไฟล์ต่อไปนี้ลงในโครงการของคุณ (กำหนดค่าด้วย) ที่ตำแหน่งเฉพาะที่แน่นอน

   • src/components/data-table
   • src/db/index.ts
   • src/hooks
   • src/lib
   • src/types

   ติดตั้งส่วนประกอบ ShadCN ที่ต้องการและแพ็คเกจอื่น ๆ ที่จำเป็นด้วยคำสั่งต่อไปนี้:

   pnpm dlx shadcn@latest init
   
   pnpm dlx shadcn@latest add badge button calendar checkbox command dialog dropdown-menu form input label popover select separator skeleton sonner table toggle-group tooltip drawer
   
   pnpm add drizzle-orm postgres @tanstack/react-table zod @t3-oss/env-nextjs
   pnpm add -D drizzle-kit dotenv-cli pg tsx

2. กำหนดค่าตัวแปรสภาพแวดล้อมของคุณจากนั้นตั้งค่า URL ฐานข้อมูลสำหรับตัวอย่างนี้เราใช้ฐานข้อมูล PlanetScale MySQL2 schemas ของเราจะทำโดยใช้สิ่งนี้

3. การกระทำฐานข้อมูล: สำหรับสิ่งนี้คุณสามารถใช้ ORM ใด ๆ ที่คุณเลือก แต่เพื่อประโยชน์ของตัวอย่างนี้เราใช้ Drizzle Orm และ Neon

   ตัวอย่างเช่นให้ใช้ตาราง tasks

   • สร้างสคีมาตารางที่ @/db/schema.ts
   • สร้างการตรวจสอบ ZOD ที่เกี่ยวข้อง @/lib/validations/tasks.ts ไฟล์

4. การตั้งค่าตาราง

   • สร้างไฟล์ : สร้าง page.tsx และหากจำเป็น layout.tsx ในไดเรกทอรีแอพของคุณ
   • คัดลอกไดเรกทอรี : คัดลอก ./_components และ ./_lib ไดเรกทอรีลงในโครงการของคุณ
   • อัปเดตการสืบค้น/การกลายพันธุ์ : แก้ไข ./_lib/queries.ts และ ./_lib/actions.ts เพื่อให้ตรงกับการดำเนินการฐานข้อมูลของคุณ
   • อัปเดตแถบลอยน้ำ : อัปเดต ./_components/tasks-table-floating-bar.tsx เพื่อให้ตรงกับการกระทำของตารางของคุณ (ไม่บังคับ)
   • กำหนดคอลัมน์ตาราง : อัปเดต ./_components/tasks-table-columns.tsx เพื่อกำหนดส่วนหัวคอลัมน์การกระทำคอลัมน์ที่ค้นหาได้และสามารถกรองได้
   • การตั้งค่าข้อมูลการดึงข้อมูล : in ./page.tsx , กำหนด getTasksPromise , getTaskCountByStatus และ getTaskCountByPriority
   • ข้อมูลดึงข้อมูล : in ./_components/tasks-table.tsx ใช้สัญญา getTasksPromise โดยใช้ React.use hook คำสัญญาจะถูกส่งผ่านไปยังเขตแดน suspense
   • คอลัมน์ตารางความทรงจำ : ใน ./_components/tasks-table.tsx , คอลัมน์บันทึกความทรงจำที่กำหนดไว้ใน ./_components/tasks-table-columns.tsx โดยใช้ React.useMemo hook เพื่อป้องกันการวิ่งซ้ำที่ไม่จำเป็น
   • ใช้ตะขอตารางข้อมูล : ใน ./_components/tasks-table.tsx , call ./hooks/useTasksTable.tsx hook เพื่อจัดการกับการแบ่งหน้าเซิร์ฟเวอร์การเรียงลำดับและการกรอง
   • ลบผู้ให้บริการตารางงาน : ตรวจสอบให้แน่ใจว่าได้ลบผู้ให้บริการออกจาก ./components/tasks-table-provider.tsx ผู้ให้บริการใช้เพื่อแสดงคุณสมบัติเพิ่มเติมบางอย่างเช่นแถบลอยและตัวกรองขั้นสูง

ภาพรวม CodeBase

ดูวิดีโอภาพรวม Codebase บน YouTube

พิจารณาสมัครรับข้อมูลช่อง YouTube ของ Kavin Desi Valli สำหรับวิดีโอเพิ่มเติม

ฉันจะปรับใช้สิ่งนี้ได้อย่างไร?

ทำตามคำแนะนำการปรับใช้สำหรับ Vercel, Netlify และ Docker สำหรับข้อมูลเพิ่มเติม