YaYaw Table Documentation

YaYaw Table is a flexible data table component library for React. One component, clean API: pass getTableConfig and getTableActions, and the table handles URL state (Nuqs), server-side data, and CRUD/bulk actions.

🚀 Quick Start

Install via the Shadcn registry, then wire config and actions to DataTable:

import { DataTable } from "@/components/ui/yayaw-table";
import { getTableConfig, getTableActions } from "./table-config";

export const MyTable = () => (
  <DataTable
    tableType="products"
    getTableConfig={getTableConfig}
    getTableActions={getTableActions}
    title="Products"
  />
);

You need at least getTableConfig (columns, table options) and getTableActions (e.g. list for data). For Next.js with URL state, add NuqsAdapter to your layout. See Provider & Setup for the full picture.

✅ Benefits

• Less boilerplate – Clear, focused API
• Minimal setup – Sensible defaults
• Stable – No hydration loops with Next.js
• Powered by TanStack Table – Great performance
• Built-in grouping – Expand/collapse support
• Type-safe – First-class TypeScript types
• SSR-friendly – Works with Next.js 15

🔧 Features

Grouping

Grouping, pagination, and sorting are enabled via table configuration and column types. No heavy wiring needed.

Pagination

Accessible pagination controls with proper ARIA and keyboard navigation.

Sorting

Click headers to sort. Enable/disable per column.

Column types

const columns = [
  { id: 'name', type: 'text', header: 'Name' },
  { id: 'brand', type: 'tag', header: 'Brand' },
  { id: 'price', type: 'number', header: 'Price' },
  { id: 'active', type: 'boolean', header: 'Active' },
  { id: 'date', type: 'date', header: 'Created' },
];

Toolbar & Menus

Everything is available from the table toolbar:

• Sorting via column headers
• Column filters and an advanced filters panel
• Grouping toggles when supported by column types
• Column visibility menu (show/hide, reset order)
• Global search input
• CSV export from toolbar (all filtered rows)
• Compact toolbar actions mode (icon + tooltip) via table.actionsAsIcons
• Bulk actions menu (Edit, Copy, Export, Delete)
• Auto-generated edit forms for row/item editing

📖 Documentation

• Installation – Shadcn registry install and project setup
• Provider & Setup – getTableConfig, getTableActions, getFormConfig, DataTable props
• Forms and Collection Fields – Built-in form fields, native array editors, nested collections, and validation
• DataTable – Component props reference
• Configuration – Table and column options
• Columns – Column types and definitions
• Actions – Actions API shape (list, create, update, delete, bulk)
• Query Integration – Shared QueryClient architecture and invalidation
• Bulk Actions – Confirmation flow and callback contract
• Server-side & Server Actions – Next.js Server Actions for list and CRUD
• URL state (Nuqs) – Sort, filters, pagination in the URL
• Troubleshooting – Fix common runtime issues
• Translations – Override UI strings

🎨 Customization

The table uses Tailwind by default. You can customize classes via standard className props.

🔗 Example

See /example in this repo for a full UI integration example: URL state (Nuqs), advanced filters, bulk edit, and locally persisted demo data (localStorage + dataset reset).

For the server-driven pattern, see Server-side & Server Actions.

🙏 Acknowledgements

YaYaw Table stands on the shoulders of excellent open-source projects. Huge thanks to their maintainers and contributors:

• TanStack Table - core table engine and performance foundations
• TanStack Query - async data-fetching and cache model
• shadcn/ui - registry and UI primitives integration model
• Nuqs - URL state management patterns
• Jotai - lightweight atomic state for internal table/UI state
• dnd-kit - drag-and-drop behavior used in interactive table features
• Floating UI and Base UI - robust positioning and accessible headless primitives