Understand configuration, actions, forms, instance identity, and data ownership.

A working table connects a configuration to a data source. Keep that connection small and stable: the same catalogs can serve several instances without mixing their state.

The three catalogs

Catalog	Responsibility	Typical contents
`getTableConfig(tableType)`	What the interface offers	Columns, default sort, display modes, permissions, form layout
`getTableActions(tableType)`	How records are loaded and changed	`list`, `create`, `update`, `delete`, bulk methods, saved-view methods
`getFormConfig(formType, context)`	How records are edited	Fields, validation, conditional state, sections, asynchronous options

React resolves the catalogs through DataTable. Vue accepts a direct config prop as well as catalog lookup functions. Keep these functions stable rather than recreating their contents during each render.

A complete configuration

This read-only starting point enables ordinary browsing and disables mutations until handlers are supplied. Use the matching quick start to provide the list action.

product-config.ts

import { defineTableConfig } from "@/components/ui/yayaw-table";

export const productConfig = defineTableConfig({
  id: "products",
  translations: { namespace: "products", keys: {} },
  columns: {
    definitions: [
      { id: "name", header: "Name", type: "text" },
      { id: "price", header: "Price", type: "number" },
      { id: "stock", header: "Stock", type: "number" },
      {
        id: "status",
        header: "Status",
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
        ],
      },
    ],
    order: ["name", "price", "stock", "status"],
    visible: ["name", "price", "stock", "status"],
    mandatory: ["name"],
    sort: [{ id: "name", desc: false }],
  },
  table: {
    allowCreate: false,
    allowEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
    enableViews: false,
    syncUrl: false,
    defaultPageSize: 10,
  },
});

export const getTableConfig = (tableType: string) =>
  tableType === "products" ? productConfig : undefined;

product-config.ts

import { defineTableConfig } from "@/components/ui/yayaw-table-vue";

export const productConfig = defineTableConfig({
  id: "products",
  translations: { namespace: "products", keys: {} },
  columns: {
    definitions: [
      { id: "name", header: "Name", type: "text" },
      { id: "price", header: "Price", type: "number" },
      { id: "stock", header: "Stock", type: "number" },
      {
        id: "status",
        header: "Status",
        type: "select",
        options: [
          { label: "Draft", value: "draft" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
        ],
      },
    ],
    order: ["name", "price", "stock", "status"],
    visible: ["name", "price", "stock", "status"],
    mandatory: ["name"],
    sort: [{ id: "name", desc: false }],
  },
  table: {
    allowCreate: false,
    allowEdit: false,
    allowDelete: false,
    allowDuplicate: false,
    allowBulkEdit: false,
    allowBulkDelete: false,
    enableRowSelection: false,
    enableViews: false,
    syncUrl: false,
    defaultPageSize: 10,
  },
});

export const getTableConfig = (tableType: string) =>
  tableType === "products" ? productConfig : undefined;

defineTableConfig merges defaults. Explicit false values stay false. The structured shape keeps behavior under table; older React flattened configurations remain compatible, but all new examples use the structured catalog.

Identity is not interchangeable

Identifier	Purpose	Example
`tableType`	Select configuration and action catalogs	`products`
`tableId`	Isolate URL, selection, views, and query state for an instance	`warehouse-products`
`formType`	Select a form catalog	`product-editor`
Row ID	Identify a record across pages and mutations	`product-42`

Use stable row IDs through getRowId. Positional indexes cannot represent selected records across server pages. Two independent tables on one page need distinct tableId values, even when they share a tableType.

Data flow

A user interaction changes the query state. The table calls list with one-based pagination, sorting, search, and filters. The action returns the current page plus total counts. A mutation persists the change and the table refreshes through the shared query cache.

React uses the action-driven list path. Vue also supports local data, where its local engine applies the query. For remote data, both editions depend on your backend applying the complete query before pagination.

Defaults, current state, and saved views

Configuration establishes the initial interface. URL state and saved views represent a user’s current arrangement; changing a default does not forcibly replace an existing saved arrangement. Callbacks and renderers belong in application code, while persisted view snapshots contain serializable state.

Extend the right layer

Use column metadata for formatting, a form field for editing, a renderer or Vue slot for custom presentation, and an action for persistence. Avoid implementing a second source of query state outside the table. Read query integration, forms, and the actions contract before adding a custom workflow.

Core concepts