> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md). # AX - データテーブル ## 概要 **AX - データテーブル** は、Experience Sitesページ（旧Community Cloud）上のインタラクティブなテーブルにSalesforceレコードを表示するExperience Cloudコンポーネントです。 ポータルユーザーに、列、並べ替え、検索、ページネーションを完全に制御できる絞り込み済みデータセットを表示するために使用します。標準オブジェクトやカスタムオブジェクトからレコードを取得し、外部ユーザーが自分のアカウントやプロファイルに関連するデータを表示、検索、操作できるようにします。 注文履歴を表示する顧客ポータル、注文履歴を表示するパートナーポータル、共有レコードを表示するパートナーポータル、またはユーザーが自分のデータを検索して表示する必要があるセルフサービスサイトに最適です。 {% hint style="success" %} Avonni Data Table は [リアクティブデータコンポーネント](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md) {% endhint %} ## はじめに この簡単なチュートリアルでData Tableコンポーネントの基本を学び、ユースケースの構築を始めましょう。 {% @arcade/embed url="" flowId="oAo6XOMWRBc7Vn4Y9XNd" %} ## チュートリアル
Data Table に「Export To」ボタンを作成する/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb
Data Table の設定/spaces/dHOej9Pd5IxJNGEJMZKW/pages/7lv0HK9VpCriTFHSx1Yz
Data Table でSalesforce CMSファイルを表示する/pages/1cf1f1115c9dc542fcae7bfcfd73820a98f2bddb
## 設定 ### データソース 「データソース」セクションでは、Avonni Data Table を Salesforce データに接続します。2つのオプションがあります。
データソース種別説明ユースケース
手動データテーブルにデータを手動で入力します。動的でないデータ、テスト、デモに最適です。
クエリクエリを作成して、Salesforceデータでテーブルを自動入力します。動的なデータ、リアルタイムデータ、大規模データセットに適しています。
CMSコレクションCMSコレクションをData Table内にシームレスに表示し、動的なコンテンツ更新を行えます。自動更新されるリソース一覧やニュースフィードを作成できます。
{% hint style="info" %} Queryモードでは、サイトのパフォーマンスを最適に保つため、データは25件ずつ表示されます。 {% endhint %} ### データマッピング 「データマッピング」セクションで列を定義しカスタマイズすることで、データテーブルを活用できます。
Avonni Data Table におけるデータモデル共有 **Salesforceのデータ共有ルールの遵守:** * **組織設定の尊重:** Avonniコンポーネントは、Salesforce組織の既存のデータ共有設定およびアクセス設定に完全に準拠します。 * **干渉しない方針:** これらのコンポーネントは、事前に設定されたデータ共有ルールをいかなる形でも変更したり影響を与えたりしません。 * **制御された表示とアクセス:** Avonniコンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって管理されます
#### 列の追加 * 「列を追加」ボタンをクリックして、データソースからフィールドを選択し、データテーブルに列として表示します。
* このセクションでは、どのデータを表示するか、またテーブル内でどのように整理するかを決定します。 * 列をクリックすると、その列のすべてのプロパティにアクセスできます。
#### 列プロパティの設定 * **データ型:** フィールドの表示タイプ（例: テキスト、数値、日付）を調整して、正しくデータを表示します。 * **リンク化:** セルデータを他のレコードやURLにリンクして、すばやく移動できるようにします。 * **セル属性:** セルの配置やアイコンをカスタマイズして、より直感的で視覚的に魅力的なテーブルを作成します。 * **編集可能:** 列をテーブル内で直接編集できるようにするかどうかを決定します。 * **フィルタ可能かつ検索可能:** 列ごとのフィルタリングと検索を有効にして、効率的にデータを管理します。 * **非表示:** 特定の列を非表示にするか選択します。機密データや関連性の低いデータに便利です。 * **並べ替え可能:** ユーザーが指定した列でデータを並べ替えられるようにします。 * **デフォルトアクションを非表示:** 既定のアクションを非表示にして、よりすっきりした表示にします。 * **テキストを折り返す:** 幅の狭い列でも読みやすくするために、テキストの折り返しを有効にします。 * **列幅を設定:** 各列の幅を指定して、バランスの取れた整理されたレイアウトにします。 #### 行アクションの追加 Data Table に行アクションを追加するためのガイド付きインタラクティブチュートリアルです。 {% @arcade/embed url="" flowId="db617gnzKCL8QA22aziq" %} ### 基本設定 **テーブルヘッダーを非表示** * このオプションでテーブルヘッダーを非表示にし、よりすっきりしたミニマルな外観にできます。
**チェックボックス列を非表示** * この設定を有効にすると、通常は複数アクションのシナリオで行選択に使用されるチェックボックス列を非表示にできます。
**行番号列を表示** * これを有効にすると、各行に番号を付ける列を表示でき、データ参照が簡単になります。 ### ヘッダー設定 **タイトルとキャプション** * タイトルとキャプションでヘッダーをカスタマイズし、テーブルデータの文脈や要約情報を提供します。 **アイコン名とサイズ** * アイコンの種類とサイズを選んでヘッダーに追加し、視覚的なアクセントを付けます。 **結合されている** * この設定は、ヘッダーがテーブル本文と視覚的につながるかどうかを決定し、全体のデザインに影響します。 **ヘッダーアクション** * テーブルヘッダーから直接アクセスできるアクション（追加、削除、またはカスタム関数）を設定します。
### ヘッダー上のアクションボタン * テーブルヘッダーにアクションボタンを実装して、新規レコードの追加、データのエクスポート、その他のカスタムアクションを行えるようにし、ユーザー操作性と効率を高めます。
#### ボタンのインタラクションを設定 「On Click」セクションでユーザーがヘッダーのアクションボタンを押したときのインタラクションを設定します。「Navigate」インタラクションの動作について理解するには、 [こちらをクリック](/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md) 詳細はこちら。
#### チュートリアル {% content-ref url="/spaces/dHOej9Pd5IxJNGEJMZKW/pages/5u7NY8IG7F8KC9xYxSSb" %} [Create an Export To button on the Data Table](/projects/experience-cloud-components/create-an-export-to-button-on-the-data-table.md) {% endcontent-ref %} ### ページネーション属性 * 1ページあたりの項目数やページネーションのスタイルなどのページネーション設定を構成し、大きなテーブルでのデータ表示と移動を管理します。 {% hint style="info" %} Queryモードでは、サイトのパフォーマンスを最適に保つため、データは25件単位で表示されます。そのため、ページネーションの設定は有効です。 {% endhint %}
### 検索エンジン設定 * **プレースホルダー:** 検索ボックスにプレースホルダーテキストを設定し、ユーザーが何を検索できるかを案内します。 * **位置:** 最適な使いやすさのために、テーブルレイアウト内で検索ボックスの位置を選択します。 * **デフォルト検索値:** 読み込み時にテーブルデータを絞り込む検索値をあらかじめ設定します。 {% hint style="info" %} 検索ボックスを表示するには、少なくとも1つの列を「検索可能」に設定する必要があります。 {% endhint %}

検索ボックスを表示するには、少なくとも1つの列を「検索可能」に設定する必要があります。

### 設定リファレンス #### 一般 **テーブルヘッダーを非表示** テーブルのヘッダーを非表示にし、 **テーブルの罫線を非表示** さらにテーブルの罫線も非表示にします（ただし、 **テーブルヘッダーを非表示** も有効な場合のみ）、そして **チェックボックス列を非表示** 行選択用チェックボックスに使用される列を削除します。 **行番号列を表示** 行番号列を表示し、 **行番号オフセット** その番号付けの開始番号を設定します。 **最大行選択数** 選択できる行数の最大値を制限し、 **選択不可の行のキー値** 選択を無効にする行のキー項目値をカンマ区切りで一覧表示します。 **選択項目数を表示** 現在選択されている項目数を表示し、 **下部バーを非表示** 通常、アクションや情報表示に使用される下部バーを非表示にします。 **読み取り専用** テーブルを操作不可にし、編集や選択を禁止します。 **すべての列で編集を許可**, **すべての列でフィルタを許可**, **すべての列で検索を許可**, **すべての列で並べ替えを許可**、さらに **すべての列で折り返しを許可** すべての列で編集、フィルタリング、検索、並べ替え、テキスト折り返しを有効にし、 **デフォルトアクションを非表示** 編集や削除などの事前定義アクションを非表示にします。 **テーブルヘッダーを折り返す** 長いヘッダーラベルを切り詰めずに折り返します。 **列幅モード** を選択します `固定` または `自動` の列幅、 **列幅の最大/最小値** 幅の上限と下限を設定し、 **折り返しテキストの最大行数** 折り返されたセルテキストの行数を制限し、 **列のサイズ変更を無効化** 列のサイズ変更をオフにし、 **サイズ変更ステップ** サイズ変更の増分を設定します。 **並べ替え/デフォルトの並べ替え方向** 初期の並べ替え方向を設定します（`昇順` または `降順`）、そして **並べ替えに使用中の値を表示** 現在どの列が並べ替えに使用されているかを表示します。 **ヘッダーのタイトル/キャプション** ヘッダーのタイトルとキャプションを設定し、 **ヘッダーアイコンの名前/サイズ** 選択したサイズのヘッダーアイコンを追加し、 **ヘッダーが結合されている** ヘッダーをテーブル本文と視覚的につなげます。 **ヘッダーアクションを非表示/無効化**, **表示されるヘッダーアクションボタン**、さらに **ヘッダーアクション** ヘッダーアクションボタンの表示/非表示、数、および定義を制御します。 #### ページネーションと検索 **ページネーションを表示** ページネーションコントロールの表示を切り替え、 **1ページあたりの項目数** 1ページに表示する項目数を設定します。 **ピルコンテナ** オプションで選択項目用のコンテナを表示し、行選択と併用されることがよくあります。 検索では、 **プレースホルダー** 検索入力のプレースホルダーテキストを設定し、 **位置** 検索バーの位置を定義し、 **デフォルト検索値** デフォルト値をあらかじめ入力します。 #### フィルタリングとデータソース **フィルタリングオプション** 各列に対してポップオーバーとして表示されるようにフィルタリングを設定します。 **データソース** 〜の間で選択します `手動` と `クエリ` テーブルデータの入力方法として、そして **列** テーブルの列を定義して追加し、各列のプロパティと動作をカスタマイズします。 ## スタイリング {% tabs %} {% tab title="ヘッダー" %} | 名前 | 説明 | | ----------------- | ---------------------------------------- | | **背景色** | ヘッダーの背景色を設定します。 | | **罫線色** | ヘッダーの罫線の色を定義します。 | | **罫線サイズ** | 罫線の太さを調整します。 | | **罫線スタイル** | 罫線のスタイル（solid、dotted、dashed など）を選択します。 | | **角丸** | ヘッダーの角を丸くします。 | | **下部罫線色（結合時）** | ヘッダーがテーブル本文と視覚的に結合されているときの下部罫線の色を指定します。 | | **下部罫線サイズ（結合時）** | 結合された下部罫線の太さを決定します。 | | **下部罫線スタイル（結合時）** | 結合された下部罫線のスタイルを設定します。 | | **パディングとマージン** | ヘッダーの内側の余白（padding）と外側の余白（margin）を制御します。 | | {% endtab %} | | {% tab title="ヘッダータイトル" %} | 名前 | 説明 | | ------------ | ------------------------------ | | **色** | タイトルテキストの色を設定します。 | | **フォントサイズ** | タイトルテキストのサイズを調整します。 | | **フォントの太さ** | タイトルテキストの太さを変更します。 | | **フォントスタイル** | タイトルテキストに特定のスタイル（斜体、標準）を適用します。 | | {% endtab %} | | {% tab title="ヘッダーキャプション" %} | 名前 | 説明 | | ------------ | ---------------------- | | **色** | キャプションテキストの色を定義します。 | | **フォントサイズ** | キャプションテキストのサイズを調整します。 | | **フォントの太さ** | キャプションテキストの太さを制御します。 | | **フォントスタイル** | キャプションテキストのスタイルを設定します。 | | {% endtab %} | | {% tab title="ヘッダーアイコン" %} | 名前 | 説明 | | -------------- | ---------------------------- | | **背景色** | アイコンの背景色を設定します。 | | **前景色** | アイコン自体の色を変更します。 | | **前景色ユーティリティ** | コントラストや強調のためのユーティリティ色を調整します。 | | **角丸** | アイコンの角を丸くして、より柔らかい印象にします。 | | {% endtab %} | | {% tab title="ピルコンテナ" %} | 名前 | 説明 | | ----------------- | ----------------------------- | | **ピルの背景色/ホバー時** | ピル要素の背景色を設定し、ホバー時には別の色になります。 | | **ピルのテキスト色/ホバー時** | ピル内のテキスト色を変更し、ホバー時には別の色になります。 | | **ピルの行間** | テキストの整列のために、ピル内の行間を調整します。 | | {% endtab %} | | {% tab title="アバター" %} | 名前 | 説明 | | --------------------- | -------------------------------------------------------------------------------------- | | **アバター画像のオブジェクトフィット** | アバター画像をコンテナ内にどのように収めるかを決定します。選択肢には 'fill'、'contain'、'cover'、'none'、'scale-down' があります。 | | {% endtab %} | | {% tab title="ページネーションボタン" %} | 名前 | 説明 | | ------------ | ------------------------------------------- | | **スタイリング設定** | ページネーションボタンの外観を、色、サイズ、罫線プロパティを含めてカスタマイズします。 | | {% endtab %} | | {% tab title="フッター" %} | 名前 | 説明 | | ------------- | ---------------- | | **背景色** | フッターの背景色を設定します。 | | **罫線色** | フッターの罫線の色を定義します。 | | **罫線サイズ** | 罫線の太さを調整します。 | | **罫線スタイル** | 罫線のスタイルを選択します。 | | **角丸** | フッターの角を丸くします。 | | {% endtab %} | | | {% endtabs %} | | ## ユースケース ### 例1：強化されたアカウント一覧と関連連絡先 {% @arcade/embed url="" flowId="sxcJn4NliMFN6qTRk5Mi" %} パートナーがアカウントデータを強力かつ直感的に確認できるようにします。インライン検索、フィルタリング、そして移動に応じて更新されるライブ連絡先パネルを備えています。 *** #### **実現できること** * **検索・フィルタ可能なアカウント一覧:** 組み込みの検索およびフィルタコントロールを使って、パートナーが名前や業種でアカウントをすばやく見つけられるようにします。 * **インラインリンク付きレコード:** アカウント名をクリック可能にして、パートナーがレコード詳細ページへ直接移動できるようにします。 * **ライブ関連連絡先パネル:** 選択されたアカウントに紐づく連絡先を表示する2つ目のテーブルを自動更新で表示します。 * **ページ分割された結果:** 1ページあたりの表示レコード数を制限して、画面をすっきり保ち、パフォーマンスを維持します。 *** #### **始める前に** * **2カラムのページレイアウト:** Experience Builder のアカウント一覧ページに、両方のコンポーネントを配置できる2カラムレイアウトがすでに用意されていることを確認します。 *** #### **設定方法** {% stepper %} {% step %} #### **1つ目のAX - Datatableをページに追加** * Experience Builder のアカウント一覧ページの左カラムに AX - Datatable コンポーネントをドラッグします。 {% endstep %} {% step %} #### **データソースを選択** * 選択 **アカウントをクエリ** をこのコンポーネントのデータソースとして。 {% endstep %} {% step %} #### **データマッピングを設定** * 次の列を追加します: Name、Industry、Owner.FullName、Phone。 * 有効にする **リンク化** Name列で有効にし、アカウント名をクリック可能なリンクにします。 * 設定 **Industry** をフィルタフィールドとして。 * 設定 **名前** を検索フィールドとして。 {% endstep %} {% step %} #### **コンポーネントを設定** * を設定 **API名** を `AccountsTable`. * 設定 **最大行選択数** を `1` 1度に1件のアカウントのみ選択できるようにします。 * ページネーションを有効にし、 **最大レコード数** を `10`. {% endstep %} {% step %} #### **ヘッダーをカスタマイズ** * を設定 **ヘッダータイトル** を `アカウント`. * を設定 **ヘッダーアイコン** を `standard:account_info`. {% endstep %} {% step %} #### **2つ目のAX - Datatableをページに追加** * 同じページの右カラムに2つ目の AX - Datatable コンポーネントをドラッグします。 {% endstep %} {% step %} #### **連絡先テーブルのデータソースを選択** * 選択 **連絡先をクエリ** をデータソースとして * 次のようにフィルタを追加し、 **AccountId** 次と等しい `{{AccountsTable.selectedRecord.Id}}`、このテーブルの結果を現在選択されているアカウントに関連付けます。 {% endstep %} {% step %} #### **データマッピングを設定** * 次の列を追加します: Name、Title。 {% endstep %} {% step %} #### **コンポーネントを設定** * を設定 **API名** を `relatedContactsTable`. {% endstep %} {% step %} #### **ヘッダーをカスタマイズ** * を設定 **ヘッダータイトル** を `関連連絡先`. * を設定 **ヘッダーアイコン** を `standard:contact`. {% endstep %} {% step %} #### **ページをプレビューする** * Experience Builder で［プレビュー］をクリックし、取引先の行を選択して、関連連絡先テーブルが選択したレコードを反映して動的に更新されることを確認します。 {% endstep %} {% endstepper %} *** #### **リンク** {% content-ref url="/pages/4bf5a4b8c092ce6f9765b58cfa7449cf2e6a1daa" %} [リンクされたデータテーブル](/experience-cloud/experience-cloud-ja/chtoriaru/reactive-components/linked-data-tables.md) {% endcontent-ref %} *** ### 例 2：取引先ページ上の関連商談 {% @arcade/embed url="" flowId="tZa89LmaWt8n5CoQhwB8" %} 営業ユーザーが、レコードページを離れることなく、必要な場所で、各取引先に紐づくすべての商談をひと目で確認できるようにします。 *** #### **実現できること** * **より充実した顧客360度ビュー：** 主要な商談データを取引先ページに直接表示し、営業ユーザーが1か所で全体像を把握できるようにします。 * **情報を詰め込んだレコードページ：** タブやオブジェクト間を移動してパイプラインを管理する必要がない、密度の高い情報豊富なページを作成します。 *** #### **始める前に** * **既存コンポーネントを含む取引先レコードページ：** Experience Builder の取引先レコードページには、レコード詳細、バナー、そして新しいコンポーネントを配置できる列レイアウトがすでに含まれていることを確認します。 *** #### **設定方法** {% stepper %} {% step %} #### **AX - Datatable を取引先ページに追加する** * Experience Builder で、AX - Datatable コンポーネントを取引先レコードページにドラッグします。 {% endstep %} {% step %} #### **データソースを選択** * 選択 **商談を取得** をこのコンポーネントのデータソースとして。 {% endstep %} {% step %} #### **データマッピングを設定** * 次の列を追加します：Name、Stage、Amount。 * 有効にする **リンク化** Name 列で、商談名がクリック可能なリンクになるようにします。 {% endstep %} {% step %} #### **コンポーネントを設定** * を設定 **API名** を `RelatedOpportunities`. * 次のようにフィルタを追加し、 **AccountId** 次と等しい `{!Item.id}`これにより、現在表示している取引先にスコープされた結果になります。 {% endstep %} {% step %} #### **ヘッダーをカスタマイズ** * を設定 **ヘッダータイトル** を `商談`. * を設定 **ヘッダースタイル** を `見出し 2`. * を設定 **ヘッダーアイコン** を `standard:opportunity`. {% endstep %} {% step %} #### **ページをプレビューする** * Experience Builder で［プレビュー］をクリックし、取引先レコードに移動して、その取引先に関連する商談のみがテーブルに表示されることを確認します。 {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-data-table.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.