تنزيل shadcn table - تنزيل رمز مصدر shadcn table

shadcn table

شفرة المصدر الأخرى

1.0.0

تنزيل

جدول Shadcn

هذا هو جدول Shadcn مع فرز من جانب الخادم ، والتصفية ، والترقيم. إنه محاذاة مع create-t3-app .

جدول Shadcn

تحذير هذا المشروع لا يزال قيد التطوير وليس جاهزًا للاستخدام.
يستخدم تقنيات جديدة (PPR ، برنامج التحويل البرمجي) الذي يخضع للتغيير وقد يكسر التطبيق الخاص بك.

مكدس التكنولوجيا

الإطار: Next.js
التصميم: Tailwind CSS
مكونات واجهة المستخدم: Shadcn/UI
حزمة الجدول: TANSTACK/رد الفعل
قاعدة البيانات: النيون
orm: رذاذ orm
التحقق من الصحة: zod

سمات

ترقيم الصفحات من جانب الخادم والفرز والتصفية (عبر خطاف useDataTable )
أعمدة قابلة للتخصيص ( dataTable و columns Props)
مرشحات البحث الديناميكية ، ومرشحات الوجه ( filterFields Prop)
Data-Table-Toolbar الديناميكية مع البحث والمرشحات والإجراءات
Notion اختيارية مثل التصفية المتقدمة ( enableAdvancedFilter Prop)
Linear اختياري مثل الشريط العائم على اختيار الصف ( floatingBar Prop)

الجري محليا

استنساخ المستودع

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

تثبيت التبعيات باستخدام PNPM
```
pnpm install
```
انسخ .env.example إلى .env وتحديث المتغيرات.
```
cp .env.example .env
```
ابدأ خادم التطوير
```
pnpm run dev
```
ادفع مخطط قاعدة البيانات
```
pnpm run db:push
```

بناء طاولتك الخاصة

انسخ المجلدات والملفات التالية في مشروعك (تم تكوينه مع) في المواقع المحددة المحددة الدقيقة
- 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
```
قم بتكوين متغيرات البيئة الخاصة بك ثم قم بإعداد عنوان URL لقاعدة البيانات ، لهذا المثال ، نحن نستخدم قاعدة بيانات MySQL2 PlanetScale. سيتم أيضًا إجراء مخططاتنا باستخدام هذا.
إجراءات قاعدة البيانات: لهذا يمكنك استخدام أي orm من اختيارك ، ولكن من أجل هذا المثال بالذات ، نحن نستخدم Drizzle Orm و Neon.
على سبيل المثال ، دعنا نستخدم جدول tasks .
- قم بإنشاء مخطط الجدول على @/db/schema.ts
- قم بإنشاء ملفات ZOD المرتبطة @/lib/validations/tasks.ts
إعداد الجدول
- إنشاء ملفات : إنشاء page.tsx ، وإذا لزم الأمر ، layout.tsx .
- الدلائل نسخ : نسخة ./_components و ./_lib الدلائل في مشروعك.
- تحديث الاستعلامات/الطفرات : تعديل ./_lib/queries.ts ، و ./_lib/actions.ts لمطابقة عمليات قاعدة البيانات الخاصة بك.
- تحديث الشريط العائم ./_components/tasks-table-floating-bar.tsx تحديث.
- تحديد أعمدة الجدول : تحديث ./_components/tasks-table-columns.tsx
- getTaskCountByPriority بيانات الإعداد getTaskCountByStatus getTasksPromise ./page.tsx
- بيانات الجلب : في ./_components/tasks-table.tsx ، تستهلك وعد getTasksPromise باستخدام خطاف React.use . يتم تمرير الوعد لتشغيل حدود suspense .
- أعمدة جدول المذكرات : في ./_components/tasks-table.tsx ، أعمدة مذكرات محددة في ./_components/tasks-table-columns.tsx باستخدام hook React.useMemo لمنع إعادة التوريد غير الضرورية.
- استخدم خطاف جدول البيانات : في ./_components/tasks-table.tsx ، اتصل ./hooks/useTasksTable.tsx
- قم بإزالة مزود جدول المهام : تأكد من إزالة الموفر من ./components/tasks-table-provider.tsx . يتم استخدام المزود لعرض بعض الميزات الإضافية مثل الشريط العائم والمرشحات المتقدمة.