Unduh shadcn table - Unduh Kode Sumber shadcn table

shadcn table

Kode sumber lainnya

1.0.0

Unduh

Tabel shadcn

Ini adalah tabel shadcn dengan penyortiran, penyaringan, dan pagination sisi server. Ini bootstrap dengan create-t3-app .

Tabel shadcn

PERINGATAN Proyek ini masih dalam pengembangan dan tidak siap untuk digunakan produksi.
Ini menggunakan teknologi baru (PPR, React Compiler) yang dapat berubah dan dapat merusak aplikasi Anda.

Tumpukan teknologi

Kerangka kerja: Next.js
Styling: Tailwind CSS
Komponen UI: Shadcn/UI
Paket Tabel: Tanstack/react-table
Database: Neon
ORM: Gerimis Orm
Validasi: Zod

Fitur

Pagination sisi server, penyortiran, dan penyaringan (melalui hook useDataTable )
Kolom yang dapat disesuaikan ( dataTable dan props columns )
Filter pencarian yang dinamis, dan filter faceted ( filterFields prop)
Data-Table-Toolbar Dynamic dengan pencarian, filter, dan tindakan
Notion opsional seperti pemfilteran lanjutan ( enableAdvancedFilter prop)
Linear opsional seperti floating bar pada pemilihan baris ( floatingBar prop)

Berjalan secara lokal

Klon Repositori

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

Instal dependensi menggunakan PNPM
```
pnpm install
```
Salin .env.example ke .env dan perbarui variabel.
```
cp .env.example .env
```
Mulai server pengembangan
```
pnpm run dev
```
Dorong Skema Database
```
pnpm run db:push
```

Bangun Meja Anda Sendiri

Salin folder dan file berikut ke dalam proyek Anda (dikonfigurasi dengan) di lokasi spesifik yang tepat

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

Juga pasang komponen shadcn yang diperlukan dan paket lain yang diperlukan dengan perintah berikut:

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

Konfigurasikan variabel lingkungan Anda kemudian atur URL database, untuk contoh ini, kami menggunakan database PlanetScale MySQL2. Skema kami juga akan dibuat menggunakan ini.
Tindakan Basis Data: Untuk ini Anda dapat menggunakan ORM pilihan Anda, tetapi demi contoh khusus ini, kami menggunakan gerimis ORM dan neon.
Sebagai contoh, mari kita gunakan tabel tasks .
- Buat skema tabel di @/db/schema.ts
- Buat validasi ZOD Associated @/lib/validations/tasks.ts file
Menyiapkan Tabel
- Buat File : Buat page.tsx dan, jika perlu, layout.tsx di direktori aplikasi Anda.
- Salin Direktori : Salin ./_components dan ./_lib direktori ke dalam proyek Anda.
- Perbarui kueri/mutasi : ubah ./_lib/queries.ts , dan ./_lib/actions.ts untuk mencocokkan operasi basis data Anda.
- Perbarui Bilah Mengambang : Perbarui ./_components/tasks-table-floating-bar.tsx untuk mencocokkan tindakan meja Anda (opsional).
- Tentukan kolom tabel : perbarui ./_components/tasks-table-columns.tsx untuk mendefinisikan header kolom, tindakan, kolom yang dapat dicari dan difilter.
- Mengatur data pengambilan : di ./page.tsx , tentukan getTasksPromise , getTaskCountByStatus , dan getTaskCountByPriority .
- Ambil data : di ./_components/tasks-table.tsx , konsumsi janji getTasksPromise menggunakan React.use hook. Janji diteruskan untuk memicu batas suspense .
- Memoize Tabel Kolom : Dalam ./_components/tasks-table.tsx , memoize kolom yang didefinisikan dalam ./_components/tasks-table-columns.tsx menggunakan React.useMemo hook untuk mencegah re-render yang tidak perlu.
- Gunakan pengait tabel data : di ./_components/tasks-table.tsx , hubungi ./hooks/useTasksTable.tsx hook untuk menangani pagination sisi server, penyortiran, dan penyaringan.
- Hapus Tugas Penyedia Tabel : Pastikan untuk menghapus penyedia dari ./components/tasks-table-provider.tsx . Penyedia digunakan untuk menampilkan beberapa fitur tambahan seperti floating bar dan filter canggih.