Composants d'Affichage de Données
StatsCard
Utilisateurs actifs
1,234
+12% ce mois
Revenus
€45,678
+8% ce mois
Commandes
892
-5% ce mois
Taux de conversion
3.2%
+0.5% ce mois
Table
Nom | Email | Rôle | Statut | Actions |
|---|---|---|---|---|
| John Doe | john@example.com | Admin | active | |
| Jane Smith | jane@example.com | User | active | |
| Bob Johnson | bob@example.com | User | inactive | |
| Alice Brown | alice@example.com | Moderator | active | |
| Charlie Wilson | charlie@example.com | User | pending |
Table avec styles alternés
Produit | Prix | Stock | Statut |
|---|---|---|---|
| Laptop Pro | €1,299 | 15 | En stock |
| Mouse Wireless | €29 | 0 | Rupture |
| Keyboard Mechanical | €89 | 5 | Stock faible |
EmptyState
DataTable
Tableau de données simple
| Nom | Rôle | Statut | |
|---|---|---|---|
| John Doe | john@example.com | Admin | active |
| Jane Smith | jane@example.com | User | active |
| Bob Johnson | bob@example.com | User | inactive |
| Alice Brown | alice@example.com | Moderator | active |
| Charlie Wilson | charlie@example.com | User | pending |
DataTableEnhanced
Tableau de données avancé
Nom | Email | Rôle | Statut |
|---|---|---|---|
John Doe | john@example.com | Admin | active |
Jane Smith | jane@example.com | User | active |
Bob Johnson | bob@example.com | User | inactive |
Alice Brown | alice@example.com | Moderator | active |
Charlie Wilson | charlie@example.com | User | pending |
KanbanBoard
Tableau Kanban avec drag & drop pour gérer les tâches par statut.
To Do
Task 1
Task 1 description
high
Task 2
Task 2 description
medium
In Progress
Task 3
Task 3 description
low
Done
Task 4
Task 4 description
high
Calendar
Calendrier mensuel avec événements.
Août 2026
Dim
Lun
Mar
Mer
Jeu
Ven
Sam
1
2
3
4
5
Réunion équipe
6
Présentation client
7
Deadline projet
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
CRUDModal
Modal pour les opérations CRUD (Create, Read, Update, Delete).
ExportButton
Bouton pour exporter des données en CSV ou Excel.
Timeline
Timeline verticale
Commande créée
La commande #1234 a été créée
2024-12-20 10:00
Paiement reçu
Paiement de €99.99 confirmé
2024-12-20 10:15
En préparation
Votre commande est en cours de préparation
2024-12-20 11:00
Expédiée
En attente d'expédition
Timeline horizontale
Étape 1
Complétée
Étape 2
En cours
Étape 3
À venir
List
Liste simple
Liste avec bordures
- Élément avec icône
- Élément avec action
- Élément désactivé
Liste divisée
- Notification 1
- Notification 2
- Notification 3
Virtual Table - Large Datasets
Table avec défilement virtuel pour gérer efficacement de grands ensembles de données (10,000+ lignes).
ID | Name | Email | Role | Status |
|---|---|---|---|---|
| 1 | User 1 | user1@example.com | Admin | active |
| 2 | User 2 | user2@example.com | User | inactive |
| 3 | User 3 | user3@example.com | Moderator | pending |
| 4 | User 4 | user4@example.com | Admin | active |
| 5 | User 5 | user5@example.com | User | inactive |
| 6 | User 6 | user6@example.com | Moderator | pending |
| 7 | User 7 | user7@example.com | Admin | active |
| 8 | User 8 | user8@example.com | User | inactive |
| 9 | User 9 | user9@example.com | Moderator | pending |
Drag & Drop List
Liste avec fonctionnalité de glisser-déposer pour réorganiser les éléments.
#1
Complete user authentication
#2
Implement dashboard layout
#3
Add data visualization
#4
Write unit tests
#5
Deploy to production