Product catalog
Build a browsable catalog with filters, gallery cards, and CSV export.
What you will build
Build a searchable catalog, then switch between rows and image cards without losing the query.
Start with the React setup or Vue setup. Use the complete files below with the shared recipe modules. The browser-memory store resets on reload; an API integration must preserve the same contracts.
Required files: shared/products.ts, product-config.ts, list-records.ts, product-actions.ts, catalog-config.ts, recipe-catalog.
Use the read-only quick-start actions. This recipe adds one display configuration and an entry component. No mutation store is required.
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 },
},
},
});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 },
},
},
});Entry component
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 { 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>
);
}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 { 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>Verify the result
Open the gallery: Oak desk, Desk lamp and Studio chair appear.
Filter Status to Active: two products remain.
Search “desk”: only Oak desk remains.
Switch to Table: the filter still applies.
Export: the CSV contains the filtered product values.
Clear the filters and export again: all three records are included.
Use the existing playground to explore the library’s controls.
Walk through the result
| Action | Expected result |
|---|---|
Search for 65. | Only Desk lamp remains: search includes numeric fields. |
Filter Status to Active, then search desk. | Only Oak desk remains; the result count is one. |
| Switch from Gallery to Table. | The same filtered records appear. |
| Clear search and filters, then export CSV. | All three products are exported, with their raw typed values. |
On mobile, use View settings for presentation, the Data menu for export, and the search button in the toolbar. Resetting a view does not undo writes. Try the keyboard as well as pointer input.