Gallery

Gallery is useful for products and visual collections. It shares filtering, sorting, selection and actions with the table.

Card settings

Open View → Card settings to choose the image, title, ratio, image fit and card size. Properties opens a checkbox screen for card fields and their labels. On mobile, settings and choices stay inside one bottom drawer; Back returns to the originating field. Panels scroll only when their content exceeds the available height.

Configuration example

Start from the React quick start or Vue quick start. The following file extends their product catalog. Pass this configuration through getTableConfig in React or config in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const catalogConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "catalog",
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    export: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    coloredTags: false,
    gallery: {
      imageColumn: "image",
      titleColumn: "name",
      cardColumnIds: ["price", "stock", "status"],
      aspectRatio: "square",
      imageFit: "cover",
      cardSize: "medium",
      previewSize: "medium",
      showCardLabels: false,
      media: { enabled: true },
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const catalogConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    layoutPreset: "catalog",
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    export: true,
    enableColumnFilters: true,
    enableAdvancedFilters: true,
    showFilterBar: true,
    filterBarColumns: ["status"],
    coloredTags: false,
    gallery: {
      imageColumn: "image",
      titleColumn: "name",
      cardColumnIds: ["price", "stock", "status"],
      aspectRatio: "square",
      imageFit: "cover",
      cardSize: "medium",
      previewSize: "medium",
      showCardLabels: false,
      media: { enabled: true },
    },
  },
});

Media and content

Point imageColumn to a URL field and titleColumn to a readable name. Choose contain for complete product images or cover for consistent framing. Card size and aspect ratio control layout; they do not transform or host your media. Keep image URLs accessible to the browser.

Preserve the workflow

Switching display mode keeps the current query. Exports still use record values rather than rendered card markup. Test a missing image, a long title and a filtered empty result in the catalog recipe.

Present a visual catalog

Use the image property from the shared records. A square cover crops consistently; the raw image URL remains application data.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    coloredTags: false,
    gallery: {
      imageColumn: "image",
      titleColumn: "name",
      cardColumnIds: ["price", "status"],
      aspectRatio: "square",
      imageFit: "cover",
      cardSize: "medium",
      previewSize: "medium",
      showCardLabels: false,
      media: { enabled: true },
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    coloredTags: false,
    gallery: {
      imageColumn: "image",
      titleColumn: "name",
      cardColumnIds: ["price", "status"],
      aspectRatio: "square",
      imageFit: "cover",
      cardSize: "medium",
      previewSize: "medium",
      showCardLabels: false,
      media: { enabled: true },
    },
  },
});

Use cards without images

Omit imageColumn for a compact textual collection. Show stock and status with labels; filtering and sorting use the same list action as Table.

Copy this complete configuration beside product-config.ts. Use () => exampleConfig as React’s getTableConfig, or :config="exampleConfig" in Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    gallery: {
      titleColumn: "name",
      cardColumnIds: ["stock", "status"],
      showCardLabels: true,
      cardSize: "small",
    },
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  table: {
    ...productConfig.table,
    displayModes: ["table", "gallery"],
    defaultDisplayMode: "gallery",
    gallery: {
      titleColumn: "name",
      cardColumnIds: ["stock", "status"],
      showCardLabels: true,
      cardSize: "small",
    },
  },
});

Native media viewer

Set table.gallery.media.enabled: true to separate media preview from record consultation in both React and Vue. Clicking the visual opens the viewer; clicking the descriptive area follows rowClickMode — the default opens the record view. Info uses an information icon, Preview an eye, and Copy link a link icon. Menus grow with translated labels up to the available viewport width.

// Inside table.gallery; use the same keys in React and Vue.
media: {
  enabled: true,
  urlColumn: "publicUrl",
  typeColumn: "kind",
  mimeTypeColumn: "mimeType",
  posterColumn: "thumbnailPublicUrl",
  hoverPreview: true,
},
previewSize: "medium",

media.getMedia(row) can instead return { url, type, mimeType, poster, alt, tracks }. Supported types are image, video, audio, document (embedded PDF when MIME is application/pdf) and file (download/open fallback). Sources, posters and caption tracks accept HTTP(S) or relative paths. The application provides accessible URLs and captions; the table does not upload or transcode files.

The viewer fits the whole media without distortion, navigates the currently rendered records with Previous/Next or Left/Right, and provides fullscreen, Info and Close. Home/End jump to the first/last record. Native audio/video controls keep their own keyboard behavior. Escape closes the viewer and returns focus. Unavailable media retains an Open file link. Opt-in hover previews play a muted five-second video sample and respect reduced motion.

imageFit: "cover" fills the card by cropping without stretching; "contain" preserves the entire image. previewSize accepts "small", "medium" or "large" (S/M/L in Card settings) and changes preview height independently of cardSize, which controls card width. Medium preserves the chosen aspect ratio. The default aspect ratio is "wide" in both editions; set "square" explicitly to retain the former Vue default. Preview size is saved with views. Runtime media callbacks and custom renderers are never serialized.

For application-specific content, renderMedia(context) and renderProperties(context) receive { row, title, source, imageFit, aspectRatio }. Return React nodes or Vue VNodes respectively. A custom media renderer owns preview activation; omit it to use the native viewer.

Tags and selection

Set table.coloredTags: false for discreet neutral tags; colors are enabled by default. A column's coloredTags overrides the table setting. tagColorMap and generated colors use stored values, so translated labels keep the same colors. Unlabeled properties wrap naturally on the same line.

Selection appears on hover, keyboard focus, selected cards and touch devices. Ctrl/Cmd-click toggles a card without opening it. Shift-click extends a range in the visible order, including both endpoints. Ctrl/Cmd+A selects permitted records across matching result pages. See bulk selection and keyboard scope.