> 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
*** ## Data Table を Salesforce データに接続する ### データソース Data Source セクションでは、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 つの列を「検索可能」に設定する必要があります。

## 設定 {% tabs %} {% tab title="🎛️ 一般" %} | 名前 | 説明 | | ----------------------- | ------------------------------------ | | **テーブルヘッダーを非表示** | テーブルのヘッダーを非表示に切り替えます | | **チェックボックス列を非表示** | 行選択チェックボックスに使用される列を削除します | | **行番号列を表示** | 行番号を表示する列を表示 | | **行番号のオフセット** | 行番号の開始番号を設定します | | **最大行選択数** | 選択可能な行の最大数を制限します | | **下部バーを非表示** | 通常はアクションや情報表示に使用される下部バーを非表示にします | | **選択項目数を表示** | 現在選択されている項目の数を表示します | | **読み取り専用** | テーブルを操作不可にし、編集や選択を許可しません | | **すべての列で編集を許可** | すべての列で編集を有効にします | | **すべての列でフィルターを許可** | すべての列でフィルタリングオプションを有効にします | | **すべての列で折り返しを許可** | すべての列でテキストの折り返しを許可します | | **デフォルトアクションを非表示** | 編集や削除などのあらかじめ定義されたアクションを非表示にします | | **列幅モード** | 列幅設定で 'fixed' または 'auto' のいずれかを選択します | | **列幅の最大/最小** | 列幅の最大値と最小値を設定します | | **テキスト折り返しの最大行数** | セル内のテキスト折り返しの最大行数を定義します | | **列サイズ変更を無効化** | 列のサイズを変更する機能を無効にします | | **サイズ変更ステップ** | 列サイズ変更の増分ステップを設定します | | **並べ替え済み/デフォルトの並べ替え方向** | 初期の並べ替え方向として 'asc' または 'desc' を選択します | | **並べ替え基準値を表示** | 現在どの列が並べ替えに使用されているかを表示します | | **ヘッダーのタイトル/キャプション** | テーブルヘッダーのタイトルとキャプションを設定します | | **ヘッダーのアイコン名/サイズ** | カスタマイズ可能なサイズのアイコンをヘッダーに追加します | | **ヘッダーが結合されている** | ヘッダーをテーブル本体と視覚的に接続することを選択できます | | **ヘッダーアクションの非表示/無効化** | ヘッダーアクションの表示と操作性を制御します | | **表示されるヘッダーアクションボタン** | ヘッダーに表示するアクションボタンを指定します | | **ヘッダーアクション** | テーブルヘッダーにカスタムアクションを追加します | | {% endtab %} | | {% tab title="⏩️ ページネーションと検索" %} ### ページネーション属性 | 名前 | 説明 | | ---------------- | ------------------------ | | **ページネーションを表示** | ページネーションコントロールの表示を切り替えます | | **1 ページあたりの項目数** | 1 ページに表示する項目数を設定します | ### ピルコンテナのオプション * 選択項目用のコンテナを表示します。通常は行選択と併用されます。 ### 検索オプション | 名前 | 説明 | | ------------- | ----------------------- | | **プレースホルダー** | 検索入力のプレースホルダーテキストを設定します | | **位置** | 検索バーの位置を定義します | | **デフォルトの検索値** | 検索バーにデフォルト値をあらかじめ入力します | | {% endtab %} | | {% tab title="🗄️ フィルタリングとデータソース" %} | 名前 | 説明 | | ---------------- | ----------------------------------------------- | | **フィルタリングオプション** | 各列のポップオーバーとして表示するフィルタリングを設定します。 | | **データソース** | テーブルデータの入力方法として 'manual' と 'query' のどちらかを選択します。 | | **カラム** | データテーブルに列を定義して追加し、各列のプロパティと動作をカスタマイズします。 | | {% endtab %} | | {% tab title="🎨 スタイリング" %} ### ヘッダー | 名前 | 説明 | | ------------------ | ---------------------------------------- | | **背景色** | ヘッダーの背景色を設定します。 | | **枠線の色** | ヘッダーの境界線の色を定義します。 | | **枠線の太さ** | 境界線の太さを調整します。 | | **枠線のスタイル** | 境界線のスタイル（solid、dotted、dashed など）を選択します。 | | **角の丸み** | ヘッダーの角を丸くします。 | | **下部境界線の色（結合時）** | ヘッダーがテーブル本体と視覚的に結合されている場合の下部境界線の色を指定します。 | | **下部枠線の太さ（連結時）** | 結合された下部境界線の太さを決定します。 | | **下部枠線のスタイル（連結時）** | 結合された下部境界線のスタイルを設定します。 | | **パディングとマージン** | ヘッダー内側の余白（パディング）と外側の余白（マージン）を制御します。 | ### ヘッダーのタイトル | 名前 | 説明 | | ------------ | ------------------------------ | | **色** | タイトルテキストの色を設定します。 | | **フォントサイズ** | タイトルテキストのサイズを調整します。 | | **フォントの太さ** | タイトルテキストの太さを変更します。 | | **フォントスタイル** | タイトルテキストに特定のスタイル（斜体、通常）を適用します。 | ### ヘッダーのキャプション | 名前 | 説明 | | ------------ | ---------------------- | | **色** | キャプションテキストの色を定義します。 | | **フォントサイズ** | キャプションテキストのサイズを調整します。 | | **フォントの太さ** | キャプションテキストの太さを制御します。 | | **フォントスタイル** | キャプションテキストのスタイルを設定します。 | ### ヘッダーアイコン | 名前 | 説明 | | -------------- | ---------------------------- | | **背景色** | アイコンの背景色を設定します。 | | **前景色** | アイコン自体の色を変更します。 | | **前景色ユーティリティ** | コントラストや強調のための補助色を調整します。 | | **角の丸み** | より柔らかい見た目になるよう、アイコンの角を丸くします。 | ### ピルコンテナ | 名前 | 説明 | | ---------------- | ----------------------------- | | **ピルの背景色/ホバー** | ピル要素の背景色を設定し、ホバー時には別の色になります。 | | **ピルのテキスト色/ホバー** | ピル内のテキスト色を変更し、ホバー時には別の色になります。 | | **ピルの行間** | テキスト配置のためにピル内の行間を調整します。 | ### アバター | 名前 | 説明 | | ---------------------- | ---------------------------------------------------------------------------------------- | | **アバター画像の object-fit** | アバター画像をコンテナ内でどのように収めるかを決定します。オプションには 'fill'、'contain'、'cover'、'none'、'scale-down' があります。 | ### ページネーションボタン | 名前 | 説明 | | ---------- | ------------------------------------------ | | **スタイル設定** | 色、サイズ、境界線プロパティなど、ページネーションボタンの外観をカスタマイズします。 | ### フッター | 名前 | 説明 | | ------------- | ----------------- | | **背景色** | フッターの背景色を設定します。 | | **枠線の色** | フッターの境界線の色を定義します。 | | **枠線の太さ** | 境界線の太さを調整します。 | | **枠線のスタイル** | 境界線のスタイルを選択します。 | | **角の丸み** | フッターの角を丸くします。 | | {% endtab %} | | | {% endtabs %} | | ## ユースケース例 ### 例 1 : 取引先リストの強化と関連コンタクト {% @arcade/embed url="" flowId="sxcJn4NliMFN6qTRk5Mi" %} インライン検索、フィルタリング、ナビゲートに応じて更新されるライブコンタクトパネルを備え、パートナーが取引先データを強力かつ直感的に探索できるようにします。 *** #### **達成できること** * **検索・フィルタリング可能な取引先リスト:** 組み込みの検索・フィルターコントロールを使用して、パートナーが名前や業種で取引先をすばやく見つけられるようにします。 * **インラインリンクされたレコード:** 取引先名をクリック可能にし、パートナーがレコード詳細ページへ直接移動できるようにします。 * **ライブ関連コンタクトパネル:** 選択された取引先に紐づくコンタクトを表示するよう自動更新される 2 つ目のテーブルを表示します。 * **ページネーションされた結果:** 1 ページあたりの表示レコード数を制限して、インターフェースをすっきり保ち、パフォーマンスを維持します。 *** #### **始める前に** * **2 列レイアウトのページ:** Experience Builder の取引先リストページに、両方のコンポーネントを配置できる 2 列レイアウトがすでに用意されていることを確認してください。 *** #### **設定方法** {% stepper %} {% step %} #### **ページに最初の AX - Datatable を追加する** * AX - Datatable コンポーネントを Experience Builder の取引先リストページの左側の列へドラッグします。 {% endstep %} {% step %} #### **データソースを選択する** * 選択 **取引先をクエリ** をこのコンポーネントのデータソースとして使用します。 {% endstep %} {% step %} #### **データマッピングを設定する** * 次の列を追加します: Name、Industry、Owner.FullName、Phone。 * 有効化 **リンク化** を Name 列で有効にして、取引先名をクリック可能なリンクにします。 * を **業界** フィルター項目として設定します。 * を **名前** 検索項目として設定します。 {% endstep %} {% step %} #### **コンポーネントを設定する** * を **API 名** に `AccountsTable`. * を **最大行選択数** に `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 で［プレビュー］をクリックし、取引先の行を選択して、Related Contacts テーブルが選択されたレコードを反映して動的に更新されることを確認します。 {% 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" %} セールスユーザーが、必要な場所で、レコードページを離れることなく、取引先に紐づくすべての商談をひと目で確認できるようにします。 *** #### **達成できること** * **より充実した Customer 360 ビュー:** 主要な商談データを取引先ページに直接表示し、セールスユーザーが一箇所で全体像を把握できるようにします。 * **完全に積み上げられたレコードページ:** タブやオブジェクト間を行き来する必要をなくし、パイプライン作業に必要な情報が詰まった密度の高いページを構築します。 *** #### **始める前に** * **既存コンポーネントを含む取引先レコードページ:** Experience Builder の取引先レコードページに、レコード詳細、バナー、そして新しいコンポーネントを配置できる列レイアウトがすでに含まれていることを確認してください。 *** #### **設定方法** {% stepper %} {% step %} #### **AX - Datatable を取引先ページに追加する** * AX - Datatable コンポーネントを Experience Builder の取引先レコードページへドラッグします。 {% 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.