Édition en cellule
Modifier une cellule typée avec validation et action de mise à jour.
L’édition en cellule évite d’ouvrir un formulaire pour chaque petite modification. Activez-la sur les champs disposant d’un éditeur clair et d’un contrat de modification partielle adapté.
Exemple de configuration
Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const stockConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "stock"
? {
...column,
inlineEdit: { enabled: true, editor: "number" },
defaultCalculation: "sum",
}
: column
),
},
table: {
...productConfig.table,
allowInlineEdit: true,
allowEdit: true,
enableCalculations: true,
inlineEdit: { enabled: true, debounceMs: 400, optimistic: true },
rowClickMode: "none",
},
});import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const stockConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "stock"
? {
...column,
inlineEdit: { enabled: true, editor: "number" },
defaultCalculation: "sum",
}
: column
),
},
table: {
...productConfig.table,
allowInlineEdit: true,
allowEdit: true,
enableCalculations: true,
inlineEdit: { enabled: true, debounceMs: 400, optimistic: true },
rowClickMode: "none",
},
});Brancher validation et enregistrement
Fournissez getFormConfig avec le schéma du champ et getTableActions avec update. Le stock doit refuser nombres négatifs et fractions dans le formulaire et lors de l’écriture. fieldErrors associe les erreurs serveur aux noms de champs. La recette stock contient l’adaptateur et le schéma complets.
Comportement de l’éditeur
Le double-clic ou Entrée démarre l’édition prise en charge. editor permet de choisir texte, nombre, sélection simple ou multiple, booléen, date, JSON ou URL. formField relie une colonne à un champ de formulaire portant un autre nom. Les colonnes en lecture seule restent protégées lorsque l’édition globale est activée.
Éviter les gestes concurrents
Désactivez l’ouverture du formulaire au clic lorsque le clic sert à éditer une cellule ou ouvrir un lien. Les mises à jour optimistes restent provisoires jusqu’au succès de l’action. Testez un refus d’enregistrement et vérifiez le retour à la dernière valeur confirmée dans l’interface et le cache.
Activer une seule colonne éditable
Exposez un éditeur numérique inline pour Prix. Réutilisez productForm et editableActions : zéro est accepté, les prix négatifs sont refusés par le schéma et le stockage.
Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.
Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "price"
? { ...column, inlineEdit: { enabled: true, editor: "number" } }
: column
),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
rowClickMode: "none",
},
});Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) =>
column.id === "price"
? { ...column, inlineEdit: { enabled: true, editor: "number" } }
: column
),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
rowClickMode: "none",
},
});Protéger les produits archivés
Utilisez le prédicat de ligne pour l’interface et répétez l’autorisation dans l’action de modification. Masquer un éditeur ne sécurise pas le serveur.
Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.
Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) => ({
...column,
inlineEdit: column.id === "stock",
})),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
canEditRow: (row) => row.status !== "archived",
rowClickMode: "none",
},
});Données de démonstration. Les modifications restent dans cet aperçu.
import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";
export const exampleConfig = defineTableConfig({
...productConfig,
columns: {
...productConfig.columns,
definitions: productConfig.columns.definitions.map((column) => ({
...column,
inlineEdit: column.id === "stock",
})),
},
table: {
...productConfig.table,
allowEdit: true,
allowInlineEdit: true,
canEditRow: (row) => row.status !== "archived",
rowClickMode: "none",
},
});