Philosophie

Yayaw Table donne à votre application un langage commun pour afficher et modifier des enregistrements. Un catalogue produits, un tableau de bord opérationnel et un pipeline commercial partagent de nombreux besoins : valeurs typées, recherche, filtres, autorisations, formulaires et actions. Décrivez ces besoins une fois, puis choisissez comment les utilisateurs travaillent avec leurs données.

Posséder le composant

Le registre shadcn copie les fichiers sources dans votre projet. Vous pouvez les lire, adapter leurs styles, remplacer un rendu et choisir quand les mettre à jour. Votre application possède le code installé et son intégration. Une mise à jour reste un changement de code à examiner avec vos propres modifications.

Commencer par la configuration

Une table combine trois catalogues : getTableConfig décrit les colonnes et les comportements, getTableActions fournit les données et les mutations, et getFormConfig personnalise l’édition lorsque les champs générés ne suffisent plus. tableType choisit une entrée du catalogue ; tableId identifie une instance particulière.

Utilisez defineTableConfig pour ranger les comportements dans table, les métadonnées des colonnes dans columns et la disposition des formulaires dans form. Commencez par quelques colonnes et une action de liste. Ajoutez ensuite les filtres, les vues sauvegardées, l’édition inline ou les cartes selon les besoins.

Un type de donnée dépasse le rendu d’une cellule

Déclarer un nombre, une date, un booléen, un choix ou une collection informe le formatage, les filtres, les champs générés et la consultation des fiches. Un prix reste trié numériquement même s’il s’affiche en euros. Un booléen faux reste faux lorsqu’on le modifie ou l’exporte. Personnalisez le rendu pour adapter la présentation ; conservez une valeur exploitable par le reste de l’interface.

Composer l’expérience

Table, Kanban et galerie permettent de travailler sur les mêmes enregistrements. Les vues sauvegardées mémorisent une organisation utile. Les formulaires peuvent partir de champs générés puis évoluer vers des sections, des contrôles conditionnels, des sélecteurs de relations et des collections imbriquées. Une fiche de consultation peut coexister avec un formulaire d’édition distinct.

La configuration n’a pas besoin d’anticiper toutes les décisions produit. Les fonctions de rendu React et les slots Vue permettent d’ajouter une interface propre à l’application ; les callbacks lui laissent la maîtrise des workflows.

Répartir clairement les responsabilités

La bibliothèque gère les interactions de la table et coordonne les appels à vos actions. Votre backend authentifie l’utilisateur, applique les autorisations, valide les écritures, filtre l’ensemble des données et persiste les enregistrements. Masquer une action relève de l’interface ; son opération serveur nécessite toujours une autorisation.

De même, le panneau d’activité affiche l’historique que vous lui fournissez. Restaurer des valeurs et ajouter un événement d’annulation relève d’une transaction backend. Un QueryClient coordonne les données côté client ; il ne remplace pas le stockage.

React et Vue, des concepts communs

Les deux éditions partagent une configuration typée et des contrats d’actions compatibles. Leurs providers, props, fonctions de rendu et slots respectent les conventions de chaque framework. Choisissez React ou Vue dans un exemple : ce choix est mémorisé entre les guides et les deux langues. Les différences sont expliquées là où elles comptent.

Construire votre première table

Suivez le démarrage React ou le démarrage Vue, puis consultez les concepts pour relier les éléments. La démo interactive montre l’effet des options sur l’interface.

Apprendre à partir d’un usage concret

Commencez par le catalogue, ajoutez des écritures validées avec le stock, réorganisez les mêmes lignes dans un pipeline, puis ajoutez permissions et opérations groupées avec l’administration. Chaque guide associe une configuration minimale et des exemples complets React et Vue. Les configurations décrivent le comportement ; les composants d’entrée et les adaptateurs d’actions le rendent opérationnel.