Téléchargement shadcn table - Téléchargement du code source shadcn table

shadcn table

Autre code source

1.0.0

Télécharger

Table de shadcn

Il s'agit d'une table shadcn avec tri, filtrage et pagination côté serveur. Il est bootstrapé avec create-t3-app .

Table de shadcn

AVERTISSEMENT Ce projet est toujours en développement et n'est pas prêt pour une utilisation en production.
Il utilise de nouvelles technologies (PPR, compilateur React) qui sont susceptibles de changer et peuvent briser votre application.

Pile technologique

Framework: suivant.js
Styling: Tailwind CSS
Composants d'interface utilisateur: shadcn / ui
Package de table: Tanstack / React-Table
Base de données: néon
Orm: Arroser Orm
Validation: zod

Caractéristiques

Pagination, tri et filtrage côté serveur (via le crochet useDataTable )
Colonnes personnalisables (accessoires dataTable et columns )
Filtres de recherche et filtres à facettes (PROP filterFields )
Dynamic Data-Table-Toolbar avec recherche, filtres et actions
Notion facultative comme le filtrage avancé ( enableAdvancedFilter Prop)
La barre flottante Linear en option sur la sélection de lignes (Prop floatingBar )

Courir localement

Cloner le référentiel

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

Installez les dépendances à l'aide de PNPM
```
pnpm install
```
Copiez le .env.example sur .env et mettez à jour les variables.
```
cp .env.example .env
```
Démarrer le serveur de développement
```
pnpm run dev
```
Pousser le schéma de la base de données
```
pnpm run db:push
```

Construisez votre propre table

Copiez les dossiers et fichiers suivants dans votre projet (configuré avec) aux emplacements spécifiques exacts

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

Installez également les composants ShadCN requis et les autres packages requis avec les commandes suivantes:

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

Configurez vos variables d'environnement puis configurez l'URL de la base de données, pour cet exemple, nous utilisons la base de données PlanetScale MySQL2. Nos schémas seront également fabriqués en utilisant cela.
Actions de la base de données: Pour cela, vous pouvez utiliser n'importe quel ORM de votre choix, mais pour cet exemple particulier, nous utilisons Drizzle Orm et Neon.
Par exemple, utilisons la table tasks .
- Créez le schéma de table sur @/db/schema.ts
- Créez le fichier de validations zod associées @/lib/validations/tasks.ts
Configuration de la table
- Créer des fichiers : créer page.tsx et, si nécessaire, layout.tsx dans votre répertoire d'applications.
- Copier les répertoires : copier ./_components et ./_lib répertoires dans votre projet.
- Mettez à jour les requêtes / mutations : modifiez ./_lib/queries.ts , et ./_lib/actions.ts pour correspondre à vos opérations de base de données.
- Mise à jour de la barre flottante : mise à jour ./_components/tasks-table-floating-bar.tsx pour correspondre aux actions de votre table (facultative).
- Définissez les colonnes de table : mise à jour ./_components/tasks-table-columns.tsx pour définir des en-têtes de colonne, des actions, des colonnes consultables et filtrables.
- Configuration des données Récorage : dans ./page.tsx , définissez getTasksPromise , getTaskCountByStatus et getTaskCountByPriority .
- Répondez des données : dans ./_components/tasks-table.tsx , consommez la promesse getTasksPromise à l'aide du crochet React.use . La promesse est adoptée pour déclencher la frontière suspense .
- Mémoiser les colonnes de table : dans ./_components/tasks-table.tsx , les colonnes Memoize définies dans ./_components/tasks-table-columns.tsx à l'aide du crochet React.useMemo pour éviter les redimensions inutiles.
- Utilisez le crochet de table de données : dans ./_components/tasks-table.tsx , appelez ./hooks/useTasksTable.tsx crochet pour gérer la pagination, le tri et le filtrage côté serveur.
- Supprimer le fournisseur de table de tâches : assurez-vous de supprimer le fournisseur de ./components/tasks-table-provider.tsx . Le fournisseur est utilisé pour présenter certaines fonctionnalités supplémentaires comme la barre flottante et les filtres avancés.