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
| 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.
Juin 2026
Dim
Lun
Mar
Mer
Jeu
Ven
Sam
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Réunion équipe
22
Présentation client
23
Deadline projet
24
25
26
27
28
29
30
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