Yayaw Table
Config-driven data tables for React and Vue, with code you own.
Start with a working example
Choose React or Vue, then follow one of the four guided paths. Each capability guide combines a minimal example with focused variants; framework tabs remember your choice across pages.
| Build | What the complete example includes |
|---|---|
| Catalog | Search across data fields, filters, sorting, gallery and CSV |
| Stock editor | Validated inline writes and refreshed totals |
| Pipeline | Persisted Kanban moves and saved views |
| Administration | Cross-page selection, bulk patches, permissions and a custom Archive action |
Build a table around your data, then add filtering, editing, saved views, forms, Kanban, and gallery displays. Yayaw Table installs as source code through shadcn-compatible registries.
Start with the philosophy, or go straight to installation, the React quick start, or the Vue quick start.
Your data, your configuration
Try the table below: search for 65 to find the Desk lamp, or change the sort order from the view menu. Switch React / Vue to run the other framework. Preview / Code shows the exact executed entrypoint; Reset restores the sample data and view. The quick starts include the supporting configuration and actions.
Sample data. Changes stay in this preview.
"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>
);
}Sample data. Changes stay in this preview.
<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>Learn by capability
| I want to… | Start here |
|---|---|
| Understand the catalogs and identifiers | Core concepts |
| Format and customize values | Columns |
| Show records as a list, board, calendar, chart, form, feed, map or dashboard | Views |
| Search, filter, sort, and page records | Configuration |
| Save an arrangement and share a view | Views and URL state |
| Build editing forms and related-record controls | Forms |
| Edit many records or export a selection | Bulk actions |
| Connect a backend and refresh cached data | Actions, Query integration |
| Find a prop or resolve an integration issue | DataTable reference, Troubleshooting |
Try the interface
Use the interactive playground to explore display modes, fields, row actions, and record consultation. Playground records are fictional and reset on reload.
Distribution covered by these guides
The guides target the current React and Vue registries at table.yayaw.app/r/. The v3.9.2 snapshot matches them. Versioned snapshots are immutable, so an older one does not include later additions: v3.0.0 lacks record consultation and the Gantt derived from the table's own rows, snapshots before v3.6.0 lack the Feed, File tree, Map and Dashboard views, snapshots before v3.7.0 lack the area, bars-and-line and funnel charts, form languages, consent questions and hidden fields, snapshots before v3.8.0 lack dashboard screens (JSON version 2, sources, blocks and full-page tables) and still send date rules as instants, snapshots before v3.9.0 lack the screen editor, each person's order of views, the facet panel, folders in every view and tags columns, snapshots before v3.9.1 keep a React table's page after a new query, and snapshots before v3.9.2 do not start a React table in its columns.order. Check installation and upgrades before copying an example into an older installation.
Next steps
Follow a complete quick start, add one capability at a time, and use the reference when you need an option’s exact contract. The conceptual explanations are shared; React and Vue snippets use their native interfaces.
Previous guide sections
Yayaw Table Documentation
Read the current guide: concepts.
🚀 Quick Start
Read the current guide: concepts.
✅ Benefits
Read the current guide: concepts.
🔧 Features
Read the current guide: concepts.
Grouping
Read the current guide: grouping-calculations.
Saved views
Read the current guide: concepts.
Display modes
Read the current guide: views.
Pagination
Read the current guide: concepts.
Sorting
Read the current guide: concepts.
Column types
Read the current guide: concepts.
Toolbar & Menus
Read the current guide: concepts.
📖 Documentation
Read the current guide: concepts.
🎨 Customization
Read the current guide: concepts.
🔗 Example
Read the current guide: concepts.
🙏 Acknowledgements
Read the current guide: concepts.