Guide : personnaliser les slots item.title dans Vuetify 3 Data Table
Dans Vuetify 3, le composant v-data-table permet un contrôle fin de l’affichage des données grâce aux slots nommés. Le slot item.title est particulièrement utile pour modifier la cellule de titre sans altérer la structure globale du tableau.
Ce guide explique comment exploiter ce slot pour intégrer du contenu dynamique, des icônes ou des liens, tout en conservant les fonctionnalités de tri et de pagination.
1. Structure de base de v-data-table
- Commencez par définir vos en-têtes et
- vos items dans le script. Le slot
Commencez par définir vos en-têtes et vos items dans le script. Le slot item.title recevra automatiquement la valeur de la colonne correspondante et l’objet complet de la ligne.
2. Utilisation du slot item.title
Dans le template, ciblez le slot avec #item.title="{ item }". Vous pouvez alors afficher item.title ou tout autre champ de l’objet, et ajouter du balisage HTML personnalisé.
- Accédez aux propriétés de l’item via la variable item
- Ajoutez des classes CSS ou des composants enfants
- Conservez la réactivité du tableau
3. Exemple de code complet
- ✓Le code suivant montre comment transformer
- ✓le titre en lien cliquable qui ouvre
- ✓3. Exemple de code complet
Le code suivant montre comment transformer le titre en lien cliquable qui ouvre une modale de détails du jeu, tout en gardant le reste du tableau intact.
"Look at payment speed and table limits, not only the headline bonus."
4. Bonnes pratiques et performances
Évitez les calculs lourds dans le slot pour ne pas ralentir le rendu. Préférez les méthodes computed ou les fonctions memoïsées lorsque le contenu dépend de plusieurs propriétés.
5. Accessibilité et SEO
- ✓Assurez-vous que le contenu ajouté reste
- ✓lisible par les lecteurs d’écran. Utilisez des
- ✓5. Accessibilité et SEO
Assurez-vous que le contenu ajouté reste lisible par les lecteurs d’écran. Utilisez des attributs ARIA lorsque vous remplacez le texte natif par des icônes ou des boutons.
6. Tests et débogage
- ✓Vérifiez le rendu sur mobile et
- ✓testez les interactions clavier. Utilisez les outils
- ✓6. Tests et débogage
Vérifiez le rendu sur mobile et testez les interactions clavier. Utilisez les outils de développement de Vuetify pour inspecter les slots et confirmer que les props sont bien transmis.