Yayaw

YaYaw Table Demo

Interactive playground with feature toggles and a production-style products table.

Fictional products and activity. Changes stay in this demo. Click a product or View to open its details.

Table settings

Toggle features live. Settings are persisted in URL query params.

Design

Density mode

Choose row spacing for table headers and cells.

Layout preset

Apply reusable defaults for common admin, catalog, or preview table surfaces.

Record presentation

Choose where the record details open.

Row interaction

Choose the default behavior for clicks on non-interactive row areas.

Features

Authorizations

Configuration used

const getTableConfig = () => ({
  columns: {
    visible: ["select", "name", "brand", "category", "price", "status", "actions"]
  },
  enableRowSelection: true,
  enableColumnFilters: true,
  enableGrouping: true,
  displayModes: ["table", "kanban", "gallery"],
  defaultDisplayMode: "table",
  layoutPreset: "catalog",
  rowClickMode: "activate"
});

<DataTable tableType="products" title="Products" enableAdvancedFilters />