Built on WIX Headless

ドキュメント ウィジェット Table ウィジェット

Table ウィジェット

CMS for Harmony で、Wix Harmony 上に検索・フィルター可能なテーブルとして CMS コレクションアイテムを表示します。

Table ウィジェットは、コレクションアイテムをカラム付きの密度の高い、スキャンしやすい一覧として描画します。

できること

  • Data source — Wix CMS コレクション、または External Database(Google Sheets、Pro);External databases を参照
  • AI setup — カラム、フィルター、デザインを平易な言葉で説明;AI setup を参照
  • コレクションフィールドをカラムにマッピング(Color のスウォッチおよび/または hex を含む)
  • 検索とフィルター(マッチ条件、範囲、固定の Choose value フィルター、Dependent filters、Add as URL query params、Reference フィールド、Color スウォッチ)
  • Filters display: 検索とフィルターを上部、または左サイドバーに配置
  • Data refresh — Show refresh button および/または Auto-refresh で、訪問者が最新のコレクションデータを再読み込みできます(タブが非表示のときは一時停止)
  • Scroll to top on page change — 訪問者がページネーションのページを変更すると、ウィジェット上部が見える位置までスクロールします
  • Quick view — 行クリックまたは専用ボタン列から、追加のアイテムフィールドをポップアップ表示
  • Reference / Multi-reference カラムを読みやすいラベルとして表示 — 関連コレクションから Display field を選択
  • Date & time カラムの Show timezone(訪問者のローカル略称)
  • 並べ替えとモバイル向けレイアウト
  • カスタムカラム幅(自動または固定)
  • 行を Dynamic Page にリンク(行全体、またはテキストリンクカラム)— Wix CMS のみ
  • Image、Video、Media Gallery カラムをサムネイルで表示 — 動画はモーダルで開く、クリックで再生、またはミュート自動再生
  • Payments(Pro)— コレクションでカタログ決済が有効なとき、アクションカラムとして Add to cart/Buy now

セットアップ

パネルの AI setup で短い説明から Table を設定し、その後 Manual で調整します。詳細: AI setup。

  1. Add → Elements → Installed Apps → CMS for Harmony から Table を追加します(同じウィジェットを複数回追加できます)。
  2. コレクションを接続 — または Data source を External Database に設定し、Google Sheets 接続(Pro)を選びます。
  3. カラムと書式を選びます。
  4. 必要に応じて検索/フィルター、Data refresh、Scroll to top on page change、Quick view、Dynamic Page リンク(Wix CMS)、決済アクションを有効にします。

Data refresh

Data refresh で Show refresh button および/または Auto-refresh をオンにし、訪問者が最新のコレクションデータを再読み込みできるようにします。Auto-refresh はタブが非表示のとき一時停止します。同じページの Form で Update displays on this page が有効で、同じコレクションを使っている場合、送信後にこのウィジェットも再読み込みできます。

Scroll to top on page change

ページネーションがオンのとき、Scroll to top on page change を有効にすると、Prev/Next でページがスクロールし、ウィジェット上部が見える位置になります。

Quick view

Quick view パネルセクション(Wix CMS)でポップアップを有効にし、表示するフィールドを選びます。行クリック、専用ボタン列、および/またはトリガー列から開けます。サイズ、レイアウト、前後ナビは Repeater の Quick view と同じです。

テーブルは在庫、ディレクトリ、管理画面風の一覧に適しています。カードグリッドには Repeater を使ってください。