Ce que vous allez construire

Construisez un catalogue interrogeable, puis passez des lignes aux cartes illustrées sans perdre la requête.

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, product-config.ts, list-records.ts, product-actions.ts, catalog-config.ts, recipe-catalog.

Utilisez les actions en lecture seule du démarrage. Cette recette ajoute une configuration d’affichage et un composant d’entrée. Le stockage des mutations n’est pas nécessaire.

catalog-config.ts

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

export const catalogConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "catalog",
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    export: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    coloredTags: false,
    gallery: {
      imageColumn: "image",
      titleColumn: "name",
      cardColumnIds: ["price", "stock", "status"],
      aspectRatio: "square",
      imageFit: "cover",
      cardSize: "medium",
      previewSize: "medium",
      showCardLabels: false,
      media: { enabled: true },
    },
  },
});

catalog-config.ts

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

export const catalogConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "catalog",
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    export: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    coloredTags: false,
    gallery: {
      imageColumn: "image",
      titleColumn: "name",
      cardColumnIds: ["price", "stock", "status"],
      aspectRatio: "square",
      imageFit: "cover",
      cardSize: "medium",
      previewSize: "medium",
      showCardLabels: false,
      media: { enabled: true },
    },
  },
});

Composant d’entrée

Agrandir ↗

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

recipe-catalog.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 { catalogConfig } from "./catalog-config";
import type { ExamplePresentation } from "./presentation";
import { getTableActions } from "./product-actions";

const getConfig = () => catalogConfig;

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

Agrandir ↗

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

recipe-catalog.vue

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

defineProps<ExamplePresentation>();

import { YayawDataTable } from "@/components/ui/yayaw-table-vue";
import { catalogConfig } from "./catalog-config";
import { getTableActions } from "./product-actions";

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

<template>
  <YayawDataTable v-bind="$props" table-type="products" table-id="recipe-catalog" :title="title ?? 'Catalog'"
    :config="catalogConfig" :get-table-actions="getTableActions" :get-row-id="getRowId"
    />
</template>

Vérifier le résultat

Ouvrez la galerie : Oak desk, Desk lamp et Studio chair apparaissent.
Filtrez le statut sur Active : deux produits restent.
Cherchez « desk » : seul Oak desk reste.
Passez en tableau : le filtre reste actif.
Exportez : le CSV contient les valeurs du produit filtré.
Effacez les filtres et exportez : les trois fiches sont incluses.

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

Vérifier le résultat pas à pas

Action	Résultat attendu
Recherchez `65`.	Seule Desk lamp reste : la recherche inclut les champs numériques.
Filtrez Statut sur Active, puis cherchez `desk`.	Seul Oak desk reste ; le total est égal à un.
Passez de Galerie à Tableau.	Les mêmes résultats filtrés apparaissent.
Effacez recherche et filtres, puis exportez en CSV.	Les trois produits sont exportés avec leurs valeurs typé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.

Catalogue produits

Ce que vous allez construire

catalog-config.ts

Composant d’entrée

Vérifier le résultat

Vérifier le résultat pas à pas

On this page