Yayaw

YaYaw Table Demo

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

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.

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 />