HomeCasa Spécification de design d’un tableau de données pour un back-office
Définissez un tableau de données complet : ordre et format des colonnes, tri, filtres, pagination ou défilement virtuel, actions groupées, densité, états, mobile et accessibilité. Conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Il comprend 6 variables personnalisables et vous pouvez le copier gratuitement en un clic.
Intermédiaire · Texte · En attente de relecture éditoriale
Prompt
Agis comme designer produit spécialisé dans les applications B2B riches en données.
Contexte :
- Produit : {{produit}}
- Entité affichée dans le tableau : {{entite}}
- Colonnes disponibles : {{colonnes}}
- Tâches principales de l'utilisateur : {{taches}}
- Volume habituel de lignes : {{volume}}
- Plateforme : {{plateforme}}
Livrables :
1. Priorité et ordre des colonnes selon les tâches, avec alignement (nombres à droite, texte à gauche), format des dates, montants et statuts, et règles de troncature avec infobulle.
2. En-tête : tri (par défaut et multicolonne si utile), en-tête et première colonne figés, redimensionnement et choix des colonnes visibles.
3. Recherche et filtres : filtres rapides, filtres avancés, puces de filtres actifs, « tout effacer » et vues enregistrées.
4. Pagination, défilement infini ou virtualisation : recommandation argumentée pour le volume indiqué.
5. Sélection et actions : actions par ligne, actions groupées, sélection de toutes les lignes ou de toute la page, confirmation des actions destructives.
6. Densité (confortable, compacte), hauteur de ligne et espacements.
7. États : chargement avec skeleton, vide, aucun résultat, erreur et données partielles.
8. Comportement responsive ou alternative sur petit écran.
9. Accessibilité : tableau sémantique, aria-sort, navigation au clavier, focus visible et annonce des mises à jour.
10. Tableau récapitulatif des composants et tokens nécessaires au design system.
Contraintes :
- N'invente ni colonnes ni données d'exemple absentes du contexte ; utilise [À COMPLÉTER].
- Justifie chaque choix par la tâche utilisateur qu'il sert.
- S'il manque une information clé (par exemple les actions possibles sur une ligne), pose-moi la question d'abord.
Format : spécification à titres numérotés, tableaux et wireframe textuel du tableau dans son état par défaut.Comment l'utiliser
- Listez les colonnes réelles et ce que les utilisateurs font du tableau. 2. Validez la recommandation de pagination avec l’équipe technique. 3. Utilisez le tableau final des composants pour créer ou mettre à jour le composant dans votre design system.
Exemple d'utilisation
Entité : commandes · Colonnes : numéro, client, date, montant, statut, transporteur · Tâches : repérer les incidents et exporter · Volume : 100 à 10 000 lignes.
Exemple de résultat
1. Priorité des colonnes
| Ordre | Colonne | Alignement | Format | Tâche servie |
|---|---|---|---|---|
| 1 | N° de commande | Gauche, figée | Chasse fixe, lien | Retrouver une commande |
| 2 | Statut | Gauche | Badge icône + texte | Repérer les incidents |
| 3 | Client | Gauche | Tronqué avec infobulle | Identifier la commande |
| 4 | Date | Droite | 12/03/2025 · 14:05 | Trier par ancienneté |
| 5 | Montant | Droite | 1 234,50 € | Vérifier les grosses commandes |
| 6 | Transporteur | Gauche | Texte | Regrouper les incidents |
| 7 | Pays | Gauche | Nom court | Filtrer les envois |
4. Pagination
Jusqu'à 10 000 lignes avec export CSV : je recommande une pagination de 50 lignes avec choix de la taille ; on retrouve sa position au retour d'une commande et la sélection en masse reste sans ambiguïté.
5. Sélection
En cochant tout : « 50 commandes de cette page sélectionnées · Sélectionner les 2 340 correspondant au filtre ». Les actions destructives demandent une confirmation avec le nombre exact.
Wireframe (état par défaut)
[Rechercher…] [Statut ▾] [Transporteur ▾] [Pays ▾] [Vues ▾] [Exporter CSV]
Filtres : (En incident ×) (7 derniers jours ×) Tout effacer
☐ | N° ▲ | Statut | Client | Date | Montant | Transp. | Pays
☐ | [À COMPLÉTER] | ⚠ Incident | [À COMPLÉTER] | [À COMPLÉTER] | [À COMPLÉTER] | … | ……
Informations clés
- Catégorie
- Design UI/UX · Tableaux de bord
- Type de résultat
- Texte
- Niveau
- Intermédiaire
- Conçu pour
- ChatGPT, Claude, Gemini et Microsoft Copilot
- Vérifié sur
- En attente de vérification éditoriale
- Variables
- Produit, Entité, Colonnes disponibles, Tâches principales, Volume de lignes et Plateforme
- Langue
- Français
- Prix
- Gratuit, sans inscription
- Mis à jour
- 07/11/2026
Questions fréquentes
Pagination ou défilement infini pour un tableau de données ?
Pour un tableau de travail, la pagination ou la virtualisation fonctionne généralement mieux, car l’utilisateur doit retrouver une ligne précise et voir le total. Le prompt tranche selon votre volume et vos tâches.
Comment adapter un tableau complexe au mobile ?
On garde en général 2 ou 3 colonnes clés et on déplace le reste dans une ligne dépliable ou une vue en cartes. La spécification propose l’alternative la plus adaptée.
À quoi sert ce prompt ?
Définissez un tableau de données complet : ordre et format des colonnes, tri, filtres, pagination ou défilement virtuel, actions groupées, densité, états, mobile et accessibilité.
Avec quels outils d'IA fonctionne-t-il ?
Il est conçu pour ChatGPT, Claude, Gemini et Microsoft Copilot. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.
Comment personnaliser le prompt ?
Cliquez sur « Personnaliser » et remplissez les variables (Produit, Entité, Colonnes disponibles, Tâches principales, Volume de lignes et Plateforme). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.
Faut-il de l'expérience pour l'utiliser ?
Il est de niveau intermédiaire : il vaut mieux connaître le sujet pour fournir un bon contexte et relire le résultat d'un œil critique.
Ce prompt est-il gratuit ?
Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.
Puis-je me fier au résultat de l'IA ?
Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.