Tableaux de données
Créez des tableaux de données prêts pour la production pour les tableaux de bord SaaS avec des actions de chargement, de vide, d'erreur, de filtres, de pagination et de ligne.
Vue d’ensembleLien vers la section
Les tableaux de données sont un modèle de tableau de bord SaaS de base.
Ils alimentent les vues d'administration, les écrans de facturation, les listes de clients, les journaux, les abonnements, les projets, les factures et les flux de travail opérationnels. Une table prête pour la production n'est pas seulement des lignes et des colonnes. C’est une interface complète pour comprendre, filtrer, agir et naviguer dans les données structurées.
Utilisez ce modèle lorsque les utilisateurs ont besoin de :
- numériser des enregistrements reproductibles
- Comparer les valeurs structurées
- filtrer ou rechercher un jeu de données
- Agir sur des lignes individuelles
- Se déplacer à travers les résultats paginés
- récupérer des états de chargement, de vide et d'erreur
Pourquoi cela compte
Les tableaux sont les endroits où la complexité du produit devient visible. Si le chargement, les filtres, les actions en ligne et la pagination sont incohérents, l’ensemble du tableau de bord est moins fiable.
Ce que vous allez construireLien vers la section
Anatomie de la table
Contrôles
États de production
Modèle mentalLien vers la section
La table rend la structure. La couche de données possède la vérité. La barre d'outils contrôle l'intention. Le pied de page gère la navigation.
| Zone | Responsabilité |
|---|---|
| En-tête | Contexte de la page et actions principales |
| Barre d'outils | Recherche, filtres, actions en masse et contrôles d'affichage |
| Tableau | Lignes, colonnes, sélection et rendu des lignes |
| Actions en ligne | Actions contextuelles pour un enregistrement |
| Footer | Pagination, comptage et résumé de sélection |
| Couche de données | Récupération, tri, filtrage, permissions et mutations |
Règle du système
Une table ne doit pas posséder la source de données. Continuez à récupérer, filtrer, trier, les autorisations et les mutations dans le calque de fonctionnalités.
ÉtapesLien vers la section
Définir l'anatomieLien vers la section
Une table de production est composée de zones distinctes. Chaque domaine doit évoluer indépendamment.
export function ProjectsTable() {
return (
<section className="space-y-4">
<ProjectsTableHeader />
<ProjectsTableToolbar />
<ProjectsTableContent />
<ProjectsTableFooter />
</section>
);
}Cela permet de garder la table flexible lorsque les exigences du produit augmentent.
Conserver les données en dehors de la tableLien vers la section
La table devrait recevoir des données, des statuts et des rappels. Il ne doit pas posséder de règles de récupération, de contrôle d'autorisation ou de mutation.
export function ProjectsTableContainer() {
const projects = useProjects();
const filters = useProjectFilters();
return (
<ProjectsTable
data={projects.data}
status={projects.status}
filters={filters.value}
onFiltersChange={filters.setValue}
onRetry={projects.refetch}
/>
);
}La couche de fonctionnalité possède la vérité. La table affiche l'état actuel.
Concevoir des états avant les lignesLien vers la section
Chaque table a besoin d'états de chargement, de vide et d'erreur explicites.
N'ajoutez pas ces états à la fin. Ils définissent la sensation de production de la table.
Ajouter des contrôles délibérémentLien vers la section
Les filtres et les actions de ligne devraient soutenir la tâche sans que la table se sente encombrée.
Utiliser la divulgation progressive :
- contrôles en ligne pour les filtres fréquents
Sheetpour les filtres avancésDropdownMenupour les actions secondaires en ligne- la confirmation ou la récupération pour des actions destructrices
| Nom | Statut | Actions |
|---|---|---|
| Acme | Actif |
AnatomieLien vers la section
Une table évolutive a des régions claires.
| Région | Ce qui y appartient | Ce qu'il faut éviter |
|---|---|---|
| En-tête | titre, description, action primaire | logique de récupération de données |
| Barre d'outils | recherche, filtres, actions groupées | tout contrôle possible à la fois |
| Tableau | lignes, colonnes, sélection, actions de lignes | règles d'affaires et logique de serveur |
| Footer | pagination, nombre d'éléments, nombre sélectionné | État de navigation caché |
Pourquoi cela compte
Lorsque les responsabilités sont séparées, la table peut se développer sans devenir un seul élément fragile.
ÉtatsLien vers la section
Une table de production gère plus que le chargement et le succès.
| État | Composante | Objectif |
|---|---|---|
| Chargement | Skeleton | Conserver la forme alors que les données sont attendues |
| Vide | EmptyState | Expliquer les résultats valides vides |
| Erreur | Alert | Expliquer l'échec et la récupération |
| Filtrage | État de la barre d'outils | Afficher clairement les contraintes actives |
| Mutation | État en ligne ou toast | Confirmer les progrès et le rétablissement de l'action |
| Paginating | Footer state | Gardez la navigation prévisible |
N'utilisez jamais le même modèle de rétroaction pour chaque état. Le chargement des données, la suppression d'une ligne, l'enregistrement des filtres et la modification des pages sont des expériences utilisateur différentes.
VariationsLien vers la section
Tableau simple
Use when the dataset is small and users mainly need to scan records.
Guide de décisionLien vers la section
Utilisez ce modèle si :
- la page affiche des données structurées reproductibles
- les utilisateurs doivent numériser, filtrer, comparer ou agir sur les lignes
- la table apparaît dans un tableau de bord ou une surface d'administration
- Les états de chargement, de vide et d'erreur sont importants
- pagination, actions en ligne ou actions en masse sont requises
Évitez ce modèle si:
- Le contenu est éditorial ou marketing
- Les données sont mieux représentées sous forme de cartes, de chronologie ou de flux.
- l'utilisateur n'a besoin que d'une seule valeur de résumé
- Le scan mobile-first est plus important que la comparaison tabulaire
- la table cacherait l'action du produit principal
Préférez
- chargement explicite, vide et états d'erreur
- Pagination et filtrage contrôlés
- actions en ligne dans les menus contextuels
- filtres progressifs pour les ensembles de données complexes
- une propriété claire entre la couche de données et l'interface utilisateur
Éviter
- récupérer des données dans une primitive de table visuelle
- Utiliser un tableau pour le contenu non-tabulaire
- Cacher les échecs de blocage derrière un toast
- Entasser la barre d'outils avec tous les filtres possibles
- Des actions destructrices sans confirmation ou récupération
Liste de contrôle de productionLien vers la section
Avant d'expédier une table de données, confirmez que :
- loading préserve la mise en page attendue
- L'état vide explique le résultat et l'action suivante
- état d'erreur inclut la récupération ou réessayer
- La pagination est contrôlée et prévisible
- Les filtres peuvent être nettoyés
- Les filtres actifs sont visibles
- les actions de ligne sont accessibles au clavier
- Les actions destructrices nécessitent une confirmation ou une récupération
- L'état de sélection est clair lorsque des actions en masse existent
- Le comportement mobile est défini
Prêt à transformer ce modèle en une véritable surface SaaS ?
Starter Pro vous donne une base plus solide pour les tableaux de bord de
production, les routes protégés, l'authentification, la facturation et
les flux de produits backend. /docs/starter-pro