Philosophy

Yayaw Table gives your application a common language for displaying and editing records. A product catalog, an operations dashboard, and a sales pipeline share many needs: typed values, search, filters, permissions, forms, and actions. Describe those needs once, then choose how people work with the data.

Own the component

The shadcn registry copies source files into your project. You can read them, adapt their styles, replace a renderer, and decide when to update. Your application owns the installed code and the integration. Updates are deliberate code changes that you review alongside your own modifications.

Start with configuration

A table combines three catalogs: getTableConfig describes columns and behavior, getTableActions supplies data and mutations, and getFormConfig customizes editing when generated fields are insufficient. tableType selects a catalog entry; tableId identifies a particular instance.

Use defineTableConfig to keep behavior under table, column metadata under columns, and form layout under form. Start with a few columns and a list action. Add filters, saved views, inline editing, or card displays when they help the task.

A data type has meaning beyond its cell

Declaring a number, date, boolean, choice, or collection informs formatting, filters, generated fields, and record consultation. A price should sort numerically even when rendered as currency. A false boolean should remain false when edited or exported. Extend a renderer when presentation needs to change; keep the underlying value useful to the rest of the interface.

Compose the experience

Table, Kanban, and gallery are ways of working with the same records. Saved views capture a useful arrangement. Forms can start from generated fields and grow into sections, conditional controls, related-record pickers, and nested collections. A read-only record view can coexist with a separate editing form.

Configuration does not need to anticipate every product decision. React renderers and Vue slots provide escape hatches for application-specific UI, and callbacks let the application own workflows.

Keep application responsibilities explicit

The library manages table interactions and coordinates calls to your actions. Your backend authenticates the actor, enforces permissions, validates writes, filters the complete dataset, and persists records. Hiding an action is a user-interface choice; the corresponding server operation still needs authorization.

Likewise, an audit panel displays the history you supply. Restoring values and appending an undo event belong in a backend transaction. A QueryClient coordinates client data; it does not replace storage.

React and Vue, shared concepts

Both editions use typed configuration and compatible action concepts. Their providers, component props, renderers, and slots follow their own framework. Choose React or Vue in an example: the choice is remembered across these guides and both languages. Framework differences are documented where they matter.

Build your first table

Follow the React quick start or Vue quick start, then use the concepts guide to connect the pieces. The live playground shows how the configuration changes the interface.

Learn through a concrete workflow

Start with the catalog, add validated writes with stock, reorganize the same records in a pipeline, then add permissions and batch operations with administration. Each guide pairs a minimal configuration with complete React and Vue examples. Configuration snippets describe behavior; entry components and action adapters make it work.