Des tables pilotées par configuration pour React et Vue, avec un code qui vous appartient.

Commencer par un exemple fonctionnel

Choisissez React ou Vue, puis suivez l’un des quatre parcours guidés. Chaque guide associe un exemple minimal et des variantes ciblées ; les onglets conservent votre choix de framework entre les pages.

Construire	Contenu de l’exemple complet
Catalogue	Recherche dans les champs, filtres, tri, galerie et CSV
Éditeur de stock	Écritures inline validées et totaux actualisés
Pipeline	Déplacements Kanban enregistrés et vues sauvegardées
Administration	Sélection sur plusieurs pages, édition groupée, permissions et action Archiver personnalisée

Construisez une table autour de vos données, puis ajoutez les filtres, l’édition, les vues sauvegardées, les formulaires, le Kanban et la galerie. Yayaw Table s’installe sous forme de code source avec des registres compatibles shadcn.

Commencez par la philosophie, ou passez directement à l’installation, au démarrage React ou au démarrage Vue.

Vos données, votre configuration

Testez le tableau ci-dessous : recherchez 65 pour trouver Desk lamp, ou changez le tri depuis le menu de la vue. React / Vue change le framework exécuté. Aperçu / Code affiche le composant utilisé ; Réinitialiser restaure les données et la vue. Les guides de démarrage fournissent la configuration et les actions associées.

Agrandir ↗

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

products.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { NuqsAdapter } from "nuqs/adapters/react";
import { useState } from "react";
import { DataTable } from "@/components/ui/yayaw-table";
import type { ExamplePresentation } from "./presentation";
import { getTableActions } from "./product-actions";
import { getTableConfig } from "./product-config";

export default function Products(presentation: ExamplePresentation = {}) {
  // Reuse the application's provider instead when it already owns a QueryClient.
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <NuqsAdapter>
        <DataTable
          {...presentation}
          getRowId={(row) => String(row.id)}
          getTableActions={getTableActions}
          getTableConfig={getTableConfig}
          tableId="products-example"
          tableType="products"
          title={presentation.title ?? "Products"}
        />
      </NuqsAdapter>
    </QueryClientProvider>
  );
}

Agrandir ↗

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

products.vue

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

defineProps<ExamplePresentation>();

import { YayawDataTable } from "@/components/ui/yayaw-table-vue";
import { getTableActions } from "./product-actions";
import { productConfig } from "./product-config";
</script>

<template>
  <YayawDataTable v-bind="$props"
    :config="productConfig"
    :get-table-actions="getTableActions"
    :get-row-id="row => String(row.id)"
    table-id="products-example"
    table-type="products"
    :title="title ?? 'Products'"
  />
</template>

Apprendre par fonctionnalité

Je souhaite…	Point de départ
Comprendre les catalogues et les identifiants	Concepts
Formater et personnaliser les valeurs	Colonnes
Afficher les enregistrements en liste, Kanban, calendrier, graphique, formulaire, fil, carte ou tableau de bord	Vues
Rechercher, filtrer, trier et paginer	Configuration
Sauvegarder une organisation et partager une vue	Vues et état URL
Construire des formulaires et des sélecteurs de relations	Formulaires
Modifier plusieurs lignes ou exporter une sélection	Actions groupées
Connecter un backend et rafraîchir son cache	Actions, Intégration Query
Retrouver une prop ou résoudre un problème	Référence DataTable, Dépannage

Essayer l’interface

La démo interactive permet d’explorer les modes d’affichage, les champs, les actions et les fiches de consultation. Les données sont fictives et réinitialisées au rechargement.

Distribution couverte par ces guides

Les guides ciblent les registres React et Vue courants sur table.yayaw.app/r/. Le snapshot v3.9.2 leur correspond. Les snapshots sont immuables : un snapshot plus ancien ne comprend donc pas les ajouts ultérieurs : v3.0.0 n’a ni la consultation des fiches ni le Gantt dérivé des lignes de la table, les snapshots antérieurs à v3.6.0 n’ont pas les vues Fil, Arborescence, Carte et Tableau de bord, ceux antérieurs à v3.7.0 n’ont ni les graphiques en aires, barres et courbe et entonnoir, ni les langues de formulaire, les questions de consentement et les champs cachés, ceux antérieurs à v3.8.0 n’ont pas les écrans de tableau de bord (JSON version 2, sources, blocs et tables pleine page) et envoient encore les règles de date comme des instants, ceux antérieurs à v3.9.0 n’ont ni l’éditeur d’écran, ni l’ordre des vues propre à chacun, ni le panneau de facettes, ni les dossiers dans toutes les vues, ni les colonnes de tags, ceux antérieurs à v3.9.1 gardent la page d’une table React après une nouvelle requête, et ceux antérieurs à v3.9.2 ne démarrent pas une table React dans son columns.order. Consultez l’installation et les mises à jour avant de reprendre un exemple dans une ancienne installation.

Yayaw Table

Commencer par un exemple fonctionnel

Vos données, votre configuration

Apprendre par fonctionnalité

Essayer l’interface

Distribution couverte par ces guides

Pour continuer

Sections du guide précédent

Documentation Yayaw Table

🚀 Démarrage rapide

✅ Bénéfices

🔧 Fonctionnalités

Groupement

Vues enregistrées

Modes d'affichage

Tri

Types de colonnes

Barre d'outils & menus

📖 Documentation

🎨 Personnalisation

🔗 Exemple

🙏 Remerciements

Tous les guides

On this page