Un composant de table — chaque fonction dont un backoffice a besoin, zéro configuration par page
↓ Faites défiler pour contrôler l'animation
La Table d'Entités
Chaque fonction. Un composant.
Recherche, filtres, tri, sélection, pagination, aperçu, actions en masse, modes de vue — tout depuis une seule table metadata-driven.
La Table
Une table, metadata-driven.
Colonnes, types et ordre proviennent de l'endpoint meta de l'entité. Placez le composant sur n'importe quelle page — il se rend lui-même.
Pagination
Paging server-side, intégré.
Naviguez de grands datasets sans tout charger. Taille de page, enregistrements totaux et navigation — tout géré par le serveur.
Exemple de MetadataJSON
1{
2"entity":"customers",
3"columns":[
4{
5"key":"name",
6"label":"Name",
7"type":"text",
8"sticky":true
9},
10{
11"key":"status",
12"label":"Status",
13"type":"badge",
14"options":["Active","Lead",…]
15},
16… 3 more columns
17]
18}
Recherche & Filtres
Trouvez n'importe quoi, filtrez tout.
Recherche globale avec scoping par champ, filtres standard et un builder avancé avec opérateurs type-aware.
Gestion des Colonnes
Vos colonnes, vos règles.
Réorganisez, masquez et fixez les colonnes. Fuseaux horaires IANA par enregistrement. Tout persisté par utilisateur.
Sélection & Cross-page
Sélectionnez entre les pages. Rien de perdu.
Les sélections survivent à la pagination server. Voir seulement les sélectionnés avec paging client-side. Scroll horizontal préservé entre les rechargements.
Tri & Actions de Ligne
Triez en trois états. Agissez sur chaque ligne.
Asc, desc, nul — un cycle à trois états. Actions par ligne apparaissent au survol : éditer, aperçu, dupliquer, supprimer et custom.
Modes de Vue & Suppression
Voyez-le à votre façon. Même les supprimés.
Table, grille de cartes ou liste de cartes. Basculez actifs, supprimés ou tous — lignes soft-deleted affichées avec chrome rouge.
Opérations en Masse & Aperçu
Agissez sur des centaines. Inspectez n'importe lequel.
Suppression, restauration, duplication et exportation en masse. Panneau d'aperçu slide-out avec navigation prev/next.
Une table. Chaque fonction. Zero config.
Intro
🔒https://backoffice.acme.org/customers
AC
JD
Rechercher...Ctrl K
Europe/Rome
Système / Paramètres / Clients
Emailse termine par.com
Tout sélectionnerTrier paren ordreOnboarded Le
Nom
Email
Statut
Onboarded Le
Créé
Acme Corp
info@acme.com
Actif
16 May 2026, 19:00
15 Mar 2024
Globex Inc
hello@globex.com
Actif
16 May 2026, 19:00
02 Apr 2024
Initech
contact@initech.com
Lead
16 May 2026, 19:00
10 May 2024
Umbrella Co
admin@umbrella.com
Inactif
20 Jun 2024
Stark Industries
tony@stark.com
Actif
01 Jul 2024
Nom
Email
Statut
Onboarded Le
Supprimé Le
Acme Old
old@acme.com
Supprimé
10 Jan 2024
01 Jun 2024
Beta Corp
info@beta.com
Supprimé
05 Feb 2024
15 Jul 2024
Gamma LLC
contact@gamma.com
Supprimé
20 Mar 2024
10 Aug 2024
Delta Inc
admin@delta.com
Supprimé
15 Apr 2024
22 Sep 2024
Epsilon Co
hello@epsilon.com
Supprimé
01 May 2024
05 Oct 2024
Nom
Email
Statut
Onboarded Le
Créé
Acme Corp
info@acme.com
Actif
16 May 2026, 19:00
15 Mar 2024
Acme Old
old@acme.com
Supprimé
10 Jan 2024
01 Jun 2024
Globex Inc
hello@globex.com
Actif
16 May 2026, 19:00
02 Apr 2024
Beta Corp
info@beta.com
Supprimé
05 Feb 2024
15 Jul 2024
Stark Industries
tony@stark.com
Actif
01 Jul 2024
NomAcme Corp
Emailinfo@acme.com
StatutActif
Créé15 Mar 2024
NomGlobex Inc
Emailhello@globex.com
StatutActif
Créé02 Apr 2024
NomInitech
Emailcontact@initech.com
StatutLead
Créé10 May 2024
NomUmbrella Co
Emailadmin@umbrella.com
StatutInactif
Créé20 Jun 2024
NomStark Industries
Emailtony@stark.com
StatutActif
Créé01 Jul 2024
NomAcme Corp
Emailinfo@acme.com
StatutActif
Onboarded Le16 May 2026, 19:00
Créé15 Mar 2024
NomGlobex Inc
Emailhello@globex.com
StatutActif
Onboarded Le16 May 2026, 19:00
Créé02 Apr 2024
NomInitech
Emailcontact@initech.com
StatutLead
Onboarded Le16 May 2026, 19:00
Créé10 May 2024
NomUmbrella Co
Emailadmin@umbrella.com
StatutInactif
Onboarded Le—
Créé20 Jun 2024
NomStark Industries
Emailtony@stark.com
StatutActif
Onboarded Le—
Créé01 Jul 2024
1-8 / 247
0 selected
Taille de page
1 / 31
System / Settings / Customers
Nom
Email
Statut
Créé
Acme Corp
info@acme.com
Actif
15 Mar 2024
Globex Inc
hello@globex.com
Actif
02 Apr 2024
Initech
contact@initech.com
Lead
10 May 2024
Umbrella Co
admin@umbrella.com
Inactif
20 Jun 2024
1-25 / 247
Taille de page
1 / 10
Rechercher Dans
All fields
Code
Prénom
Nom
Société
Email
Téléphone
UUID
Raison du statut
Adresse
Ville
État/Région
Pays
Code postal
Emailse termine par.com
Filtres Avancés
Standard
Avancé
Tous les critères
N'importe quel critère
Emailse termine par.com
Onboarded At
16 May 2026, 19:00America/New_York
16 May 2026, 19:00Europe/Rome
16 May 2026, 19:00Asia/Tokyo
Colonnes
Champs fixes
Nom
Champs de données
Code
Email
Statut
Téléphone
Champs d'audit
Créé Le
Créé Par
Nom
Acme Corp
Globex Inc
Initech
Umbrella Co
Stark Industries
Edit
Dupliquer
Version history
Aperçu
Supprimer
Nom
Statut
Supprimé Le
Acme Old
Supprimé
01 Jun 2024
Beta Corp
Supprimé
2024-07-15
Aperçu
1 / 124
Champs fixes
SociétéAcme Corp
CodeACM-001
Champs de données
PrénomJohn
NomDoe
Emailinfo@acme.com
Téléphone+1 555-0100
StatutActif
Champs d'audit
Mis à jour le16 May 2026, 19:00
Version42
Rendu metadata-driven
Colonnes, types et ordre proviennent de la définition de l'entité. Placez la table sur n'importe quelle page — elle se construit elle-même.
Pagination server-side
Naviguez de grands datasets sans tout charger. Le serveur gère le paging — votre navigateur ne voit que la page courante.
Enregistrements totaux
Montre toujours quelles lignes vous regardez et combien existent au total. Se met à jour instantanément lors du pagination ou filtrage.
Lignes par page
Choisissez combien de lignes tiennent à l'écran. Votre préférence est mémorisée pour chaque entité.
Recherche
Tapez au moins 3 caractères et la table filtre automatiquement — un match "contains" sur tous les champs de texte sélectionnés, combiné avec OR. Se déclenche 450ms après l'arrêt de la frappe.
Panneau Rechercher Dans
Ouvrez le panneau latéral droit pour restreindre la recherche à des colonnes spécifiques. Tous les champs de texte sont inclus par défaut. Votre sélection est mémorisée par entité.
Toolbar Filtres & Actions en Masse
Une seconde toolbar sous la principale. Basculez les actions en masse, effacez tous les filtres ou révisez les badges de filtres actifs — tout sur une ligne.
Effacer tous les filtres
Supprimez tous les filtres actifs en un seul clic.
Badges de filtres actifs
Chaque badge montre un champ, opérateur et valeur. Cliquez le × sur un badge pour retirer instantanément ce filtre.
Builder de filtres avancés
Un panneau latéral droit pour construire des filtres complexes multi-conditions qui vont au-delà des filtres standard.
Réinitialiser tous les filtres
Efface tous les filtres avancés en un clic. Comme Tout effacer dans la toolbar — remet à zéro filtre appliqué.
Critères AND / OR
Basculez si toutes les conditions doivent correspondre (AND) ou si n'importe laquelle peut correspondre (OR).
Aperçu des filtres
Chaque filtre actif est montré comme une ligne lisible : champ, opérateur et valeur. Modifiez ou supprimez un seul filtre sans recommencer.
Formulaire de filtre dynamique
Choisissez un champ et le formulaire s'adapte automatiquement — les opérateurs correspondent au type de colonne et l'input de valeur devient date picker, sélecteur de badge ou input texte.
Filtres standard
Une liste simple de tous les champs filtrables. Chaque champ de texte utilise un opérateur contains — tapez n'importe quelle sous-chaîne et la table filtre instantanément.
Opérateur contains
Chaque champ de texte filtre avec un match contains. Pas besoin de choisir un opérateur — tapez simplement et les résultats se mettent à jour en direct.
Fuseau horaire du navigateur
Toutes les valeurs datetime sont formatées avec le fuseau horaire de votre navigateur (montré dans la topbar). La même valeur UTC s'affiche identiquement sur toutes les lignes.
Mode enregistrement IANA
Basculez pour voir chaque valeur dans son fuseau horaire local original. Les heures diffèrent par enregistrement. Un badge montre le fuseau horaire IANA local au moment de la saisie.
Sélecteur de colonnes
Affichez, masquez et réorganisez les colonnes par glisser-déposer dans leur section. L'ordre change en temps réel. Votre disposition est sauvegardée.
Champs fixes
Les colonnes fixes restent visibles lors du scroll horizontal. La colonne la plus à droite pour les actions de ligne est toujours fixe et ne peut être masquée ni déplacée.
Champs d'audit
Les champs d'audit suivent qui a créé ou modifié un enregistrement. Une entité peut être auditable ou non — cela dépend de la définition de l'entité dans les metadata.
Colonnes fixes
Nom (gauche) et Actions (droite) restent visibles lors du scroll horizontal. La colonne d'actions la plus à droite est toujours fixe et ne peut être masquée ni déplacée.
Fixe à gauche
La colonne Nom est marquée comme fixe dans le sélecteur de colonnes. Elle reste épinglée au bord gauche tandis que les autres colonnes défilent en dessous.
Fixe à droite
Les actions de ligne sont toujours fixes sur le bord droit. Cette colonne ne peut être ni masquée ni réordonnée.
Sélection de lignes
Cliquez les checkboxes pour sélectionner des lignes. Votre sélection persiste à travers la pagination server-side — les lignes sélectionnées restent sélectionnées même lorsque vous paginez ou rechargez.
Tout sélectionner
La checkbox d'en-tête sélectionne ou désélectionne toutes les lignes de la page courante à la fois.
Compteur de sélection
Le footer montre combien de lignes sont sélectionnées. Utilisez le toggle œil pour voir uniquement les lignes sélectionnées avec paging client-side.
Tri — cycle à 3 états
Cliquez une colonne pour cycler entre ascendant, descendant et aucun tri. Un tri par défaut des metadata est toujours appliqué quand aucun tri utilisateur n'est actif.
Aucun tri utilisateur
Le tri par défaut défini dans les metadata de l'entité est toujours appliqué. Les colonnes montrent une icône flèche neutre jusqu'à ce que vous cliquiez.
Ascendant
Le premier clic trie en ascendant. La flèche pointe vers le haut et l'en-tête de colonne est mis en évidence.
Descendant
Le second clic inverse à descendant. Un troisième clic efface le tri utilisateur et revient au défaut des metadata.
Actions de ligne
Éditer, dupliquer, historique des versions, aperçu, supprimer et restaurer — plus des actions custom définies dans les metadata de l'entité. Chaque action est sous contrôle RBAC. Les actions admin-level requièrent une authentification MFA step-up par action avant de pouvoir procéder.
Modes de vue
Basculez entre table, grille de cartes ou liste compacte. Votre préférence est mémorisée entre les sessions.
Vue grille de cartes
Chaque ligne devient une carte dans une grille responsive. Mêmes metadata, tri, filtrage et sélection — juste un layout différent.
Toolbar vue cartes
Toutes les fonctions de table sont encore disponibles ici — tout sélectionner, trier par colonne et direction — adaptées pour le mode de vue actif. Les toggles de fuseau horaire IANA sont aussi automatiquement détectés et rendus pour chaque colonne datetime qui les déclare.
Vue liste de cartes
Des cartes horizontales s'empilent verticalement, montrant plus de champs par carte. Idéal pour scanner des enregistrements détaillés sans scroll horizontal.
Entités Soft Deleted
Basculez entre actifs, supprimés et tous les enregistrements. Les lignes soft-deleted sont préservées avec fond rosé et opacité réduite, jamais vraiment supprimées jusqu'à purge explicite.
Uniquement les enregistrements supprimés
En passant au filtre deleted, seules les entrées soft-deleted sont montrées. Chaque ligne affiche un fond rosé, une opacité réduite et un badge Supprimé avec l'horodatage de suppression.
Tous les enregistrements
La vue tous les enregistrements fusionne entrées actives et soft-deleted dans une seule liste. Les lignes supprimées restent visuellement distinctes avec leur fond rose, faciles à identifier et restaurer.
Mode actions en masse
La même toolbar passe en mode bulk quand des lignes sont sélectionnées. Opérez sur les enregistrements sélectionnés — même entre pages différentes — ou sur tout le dataset quand les permissions RBAC le permettent. La toolbar revient automatiquement aux filtres quand des filtres sont appliqués.
Toggle de mode
Cliquez pour basculer entre filtres et actions en masse. Quand des lignes sont sélectionnées, la toolbar passe automatiquement en mode bulk. Quand des filtres sont appliqués, elle passe aux filtres.
Formats d'export
Exportez les lignes sélectionnées ou tout le dataset en XLSX ou CSV — de vrais fichiers générés server-side, pas des fakes client-side. L'export HTML supporte des templates custom avec aperçu en direct, génération PDF et output email-ready.
Dupliquer des enregistrements
Crée une copie exacte de l'enregistrement sélectionné — tous les champs clonés server-side via un seul appel API. Fonctionne sur une ligne ou plusieurs à la fois.
Coming soon
Field-level control: choose which fields to copy, which to exclude, and which to manually set before duplicating.
Panneau d'aperçu
Un panneau redimensionnable dans la zone de table. Inspectez les détails complets de n'importe quelle ligne sans quitter la liste. Naviguez entre enregistrements avec prev/next — même entre pages. Basculez en mode édition, accédez aux actions de ligne ou fermez — tout depuis l'en-tête.