Ce que vous allez construire

Construisez un tableau par statut avec des déplacements enregistrés et des vues réutilisables.

Partez de l’installation React ou Vue. Assemblez les fichiers complets ci-dessous et les modules partagés. Le stockage mémoire se réinitialise au rechargement ; une API doit conserver les mêmes contrats.

Fichiers nécessaires : shared/products.ts, shared/store.ts, product-config.ts, list-records.ts, view-actions.ts, editable-actions.ts, product-form.ts, get-form-config.ts, pipeline-config.ts, recipe-pipeline.

Copiez le stockage et l’adaptateur communs, puis le catalogue de formulaire produit. Les options de statut définissent les colonnes et l’action valide la nouvelle valeur.

pipeline-config.ts

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const pipelineConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    enableViews: true,
    allowViewSave: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

pipeline-config.ts

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const pipelineConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "kanban"],
    defaultDisplayMode: "kanban",
    allowEdit: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    enableViews: true,
    allowViewSave: true,
    allowInlineEdit: true,
    enableGrouping: true,
    kanban: {
      groupBy: "status",
      titleColumn: "name",
      cardColumnIds: ["price", "stock"],
      showCardLabels: true,
    },
  },
});

Composant d’entrée

Agrandir ↗

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

recipe-pipeline.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { NuqsAdapter } from "nuqs/adapters/react";
import { useState } from "react";
import { Toaster } from "sonner";
import { DataTable } from "@/components/ui/yayaw-table";
import { getEditableActions } from "./editable-actions";
import { getFormConfig } from "./get-form-config";
import { pipelineConfig } from "./pipeline-config";
import type { ExamplePresentation } from "./presentation";

const getConfig = () => pipelineConfig;

export default function PipelineRecipe(presentation: ExamplePresentation = {}) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <NuqsAdapter>
        <DataTable
          {...presentation}
          getFormConfig={getFormConfig}
          getRowId={(row) => String(row.id)}
          getTableActions={getEditableActions}
          getTableConfig={getConfig}
          tableId="recipe-pipeline"
          tableType="products"
          title={presentation.title ?? "Pipeline"}
        />
        <Toaster />
      </NuqsAdapter>
    </QueryClientProvider>
  );
}

Agrandir ↗

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

recipe-pipeline.vue

<script setup lang="ts">
import type { ExamplePresentation } from "./presentation";

defineProps<ExamplePresentation>();

import { YayawDataTable } from "@/components/ui/yayaw-table-vue";
import { getEditableActions } from "./editable-actions";
import { getFormConfig } from "./get-form-config";
import { pipelineConfig } from "./pipeline-config";

const getRowId = (row: Record<string, unknown>) => String(row.id);
</script>

<template>
  <YayawDataTable v-bind="$props" table-type="products" table-id="recipe-pipeline" :title="title ?? 'Pipeline'"
    :config="pipelineConfig" :get-table-actions="getEditableActions" :get-row-id="getRowId"
    :get-form-config="getFormConfig" />
</template>

Vérifier le résultat

Ouvrez le Kanban : Desk lamp est en Draft.
Déplacez Desk lamp vers Active.
Passez en tableau et vérifiez son statut Active.
Filtrez sur Draft et vérifiez son absence.
Avec un backend, testez une transition refusée et le retour à l’état confirmé.

Utilisez le playground existant pour explorer les contrôles de la bibliothèque.

Vérifier le résultat pas à pas

Action	Résultat attendu
Déplacez Desk lamp de Draft vers Active.	Le statut change dans le stockage, pas seulement à l’écran.
Passez en Tableau.	Desk lamp possède toujours le statut Active.
Enregistrez la présentation depuis le menu de vue.	Rouvrir la vue enregistrée ne montre aucune pastille de modification.
Changez une propriété de carte, puis réinitialisez la vue.	La présentation enregistrée revient ; les données produit ne sont pas annulées.

Sur mobile, utilisez les Réglages de la vue pour la présentation, le menu Données pour l’export, et le bouton de recherche de la barre d’outils. Réinitialiser une vue n’annule pas les écritures. Testez aussi le clavier.

Pipeline Kanban

Ce que vous allez construire

pipeline-config.ts

Composant d’entrée

Vérifier le résultat

Vérifier le résultat pas à pas

On this page