Décidez du résultat attendu lors de l’activation d’une fiche avant d’ajouter ses actions. Utilisez la consultation pour lire, un formulaire pour modifier et des liens explicites pour naviguer.

Capacités intégrées

allowCreate, allowEdit, allowDuplicate et allowDelete contrôlent les actions intégrées. Fournissez les méthodes create, update, duplicate et delete correspondantes. Les gardes de ligne affinent les autorisations. N’activez pas une mutation uniquement pour afficher son bouton si aucun handler n’existe.

Modes de clic

rowClickMode accepte default, activate, edit, link ou none. default ouvre la vue enregistrement dans tous les modes d’affichage — onOpenDetails/onRowActivate de l’application si fourni, sinon la vue enregistrement intégrée, dont les champs dérivent des colonnes quand details n’est pas fourni. enableRowClickEdit ou rowClickMode: 'edit' ouvre plutôt le formulaire d’édition, et une colonne de lien de ligne continue de naviguer. Passez details={false} (:details="false" en Vue) pour retirer la vue enregistrement intégrée, ou rowClickMode: 'none' pour désactiver complètement le clic. Utilisez onRowActivate pour piloter un panneau de l’application ; onRowClick traite la navigation par lien de ligne. Le menu des actions de ligne affiche l’entrée Infos dès que la vue enregistrement est accessible. Distinguez liens et édition en cellule de l’ouverture du formulaire au clic.

Exemples complets

Consultez la consultation pour une configuration fonctionnelle, les autorisations pour les prédicats et la recette fiche pour édition, activité et annulation. La référence DataTable décrit les paramètres ; les callbacks groupés React reçoivent des lignes TanStack, ceux de Vue les objets métier.

Actions de ligne personnalisées

DataTable.rowActions ajoute des actions métier au menu standard. Chaque entrée contient type, label, une icône optionnelle, disabled (booléen ou prédicat sur la ligne) et onClick(row). Utilisez un nœud icon en React ou iconComponent en Vue. Le serveur doit revérifier les droits. La configuration média native fournit automatiquement Aperçu et Copier le lien ; évitez de les ajouter une seconde fois. Infos ouvre la fiche et reste distinct d’Aperçu.

Essayer dans la page

Sélectionnez des lignes, ouvrez le menu d’actions et comparez les opérations disponibles sur une fiche verrouillée.

Agrandir ↗

Données de démonstration. Les modifications restent dans cet aperçu.

recipe-admin.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Archive, type LucideProps } from "lucide-react";
import { NuqsAdapter } from "nuqs/adapters/react";
import { useState } from "react";
import { Toaster } from "sonner";
import { DataTable } from "@/components/ui/yayaw-table";
import { adminMutations } from "../shared/admin-mutations";
import { getAdminActions } from "./admin-actions";
import { adminConfig } from "./admin-config";
import { getFormConfig } from "./get-form-config";
import type { ExamplePresentation } from "./presentation";

const getConfig = () => adminConfig;

// Custom bulk actions accept a function component for their icon.
const ArchiveIcon = (props: LucideProps) => <Archive {...props} />;

export default function AdminRecipe(presentation: ExamplePresentation = {}) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <NuqsAdapter>
        <DataTable
          {...presentation}
          customBulkActions={(selection) => [
            {
              id: "archive-products",
              icon: ArchiveIcon,
              label: "Archive",
              confirm: {
                title: "Archive selected products?",
                description:
                  "Archived products remain visible but cannot be edited or selected.",
                confirmLabel: "Archive",
              },
              onClick: async () => {
                const result = adminMutations.bulkUpdate(
                  selection.selectedOriginalRows.map((row) => String(row.id)),
                  { status: "archived" }
                );
                await queryClient.invalidateQueries({
                  queryKey: ["tableData", "recipe-admin"],
                });
                return {
                  ...result,
                  clearSelection: result.success,
                  closeMenu: result.success,
                };
              },
            },
          ]}
          getFormConfig={getFormConfig}
          getRowId={(row) => String(row.id)}
          getTableActions={getAdminActions}
          getTableConfig={getConfig}
          tableId="recipe-admin"
          tableType="products"
          title={presentation.title ?? "Admin"}
        />
        <Toaster />
      </NuqsAdapter>
    </QueryClientProvider>
  );
}