データテーブル
Avonni データテーブルコンポーネントは、データのコレクションを構造化された表形式で表示することを可能にします。
データテーブルの設定
データソースを選択
最初のステップは、データテーブルがどこからデータを取得するかを指定することです。
選択肢は次のとおりです：
列を定義してデータをマッピングする
データソースが接続されたら、どのフィールドを列として表示するか、およびそれらをどのように設定するかを定義する必要があります。
列の追加と設定：
列を追加： 「列を追加」ボタンをクリックして新しい列を作成します。表示したいフィールドごとに繰り返します。
データフィールドをマッピング：
ソースフィールド： この列に値を入力するために、選択したデータソース（手動、変数、またはクエリ）からフィールドを選択します。
列ラベル（オプション）： 列ヘッダーに表示するユーザー向けのわかりやすい名前を入力します。空白のままにすると、システムがフィールド名やラベルを使用する場合があります。
データ型： データテーブルは通常データ型（テキスト、数値、日付など）を自動検出します。必要に応じて（例：数値を通貨として表示するなど）これを上書きできることが多いです。
列設定をカスタマイズ： 必要に応じてこれらの設定を調整してください：
フィルタ可能： ユーザーがこの列に基づいてテーブルをフィルタリングできるようにします。
編集可能： ユーザーがこの列のセル内でデータを直接変更できるようにします。 重要： 編集内容の保存の詳細は、下の「インライン編集を有効にする」セクションを参照してください。
検索可能： テーブル全体の検索にこの列を含めます。
ソート可能： ユーザーがこの列でテーブルをソートできるようにします。
幅： 列の幅を固定値やパーセンテージで指定します。
配置： テキストの配置（左寄せ、中央、右寄せ）を制御します。
その他のオプション： 高度なカスタマイズについては、データテーブルのドキュメントで追加の列設定を確認してください。
列の並べ替え（オプション）： 設定エリア内で列をドラッグ＆ドロップして表示順を変更します。
インライン編集を有効にする（オプション）
ユーザーがテーブルのセル内でデータを直接編集できるようにします。
インライン編集オプション
鉛筆アイコン： 列で「編集可能」設定を有効にすると鉛筆アイコンが表示されます。ユーザーはこれをクリックしてセルの値を編集します。
直接セル編集（「入力として表示」）： よりスムーズな体験にするには、「入力として表示」オプションを選択します。これにより、追加のクリックなしでセルが編集可能になります。
インライン編集の保存
重要
インライン編集を有効にしても、 変更は自動的に保存されません. 一緒に使う：両方の利点を享受 必ず 「保存時」インタラクションを設定します:
インタラクションを追加： インタラクションタブで「保存時」のインタラクションを追加します。
アクションタイプ: 基盤となるSalesforceデータの変更を保存するには「レコードを更新」を選択します。
チュートリアル 👇
フィールドを編集可能にする方法行アクションを追加（オプション）
テーブル内の個々のレコードに関連するアクションへのクイックアクセスを提供します。
行アクションの作成：
アクション列を作成： テーブルに新しい列を追加し、その タイプ 最小（Min） 「アクション」を設定します。 必須でない これは行アクションを作成するためのものです。
アクションラベルを定義： アクション列の設定内で、希望するアクション（例：「編集」、「削除」、「詳細表示」）を追加します。これらのラベルは各行のドロップダウンメニューに表示されます。
行アクションの機能を設定：
インタラクション： 各行アクションについて 名前と完全に一致 を定義する必要があります。例えば、「削除」をクリックすると確認フローを開くインタラクションを起動するはずです。
データをグループ化（オプション）
データをカテゴリ別に整理して、より簡単に分析・理解できるようにします。
グルーピングの設定：
グルーピング列： データマッピングセクションでグループ化する列を選択します（例：「ステータス」、「地域」、「所有者」）。
グループ表示のカスタマイズ
表示オプション：
未定義ラベルを非表示：空のグルーピング値の表示を制御します。
グループを折りたたむ：スペースを節約するために、初期状態でグループを折りたたみます。
行数を表示：各グループ内のレコード数を表示します。
グループ順序： グループのソート順を設定します（デフォルト、昇順、降順、またはカスタム）。
値をリンク化： （参照関係フィールドの場合）グループヘッダーの値をクリック可能にして、関連レコードに遷移させます。
その他の設定
一般プロパティ
有効にすると最初の列に行番号を表示します。 注意：AvonniデータテーブルはSalesforceの標準データテーブルを基盤として使用しています。そのため、「インライン編集」をオンにすると（ユーザーがテーブル内でデータを直接編集できるようにすると）行番号が自動的に表示されます。これはSalesforceの設計によるもので、私たちがその動作を変更することはできません。
レコードIDを使用した行の事前選択を直接サポートする重要な注意点
Avonniデータテーブルは、Salesforceの lightning-datatableと同様に、レコードIDを使用した行の事前選択に直接対応していません。行の選択は次によって管理されます：
データ： The
テーブルに提供されるデータ。ユーザー操作： テーブル内でのクリック。
組み込みプロパティを介してIDで行をプログラム的に選択することはできません。代わりに、行の選択は表示されているデータとユーザーの直接操作の結果です。
モバイル対応性
AvonniデータテーブルはSalesforceのLightning Data Table上に構築されています。Lightning Data Tableはレスポンシブ性が限定的で、小さい画面に自動で最適化されない場合があります。モバイルデバイス向けにデータテーブルを最適化するには、次のオプションを検討してください：
モバイル用に別のデータテーブルを作成する： モバイルユーザー向けに列数を減らした簡素化されたものを作成します。Salesforceのコンポーネント表示設定を使用して、小さい画面でのみこのモバイル対応テーブルを表示するようにします。
プレビュー Avonniリスト コンポーネント： よりレスポンシブなソリューションを求める場合は、Avonni Listコンポーネントの使用を検討してください。このコンポーネントは 組み込みのレスポンシブ設定を備えており 画面サイズに基づいて表示を調整します。これをSalesforceのコンポーネント表示設定と組み合わせて、モバイルデバイスでのみリストを表示することができます。
ヘッダー
ヘッダーはデータテーブルの最上行です。ヘッダーセクションを使用して外観をカスタマイズし、機能を追加します。
ヘッダーオプション
表示されるタイトル： データテーブルに明確で説明的なタイトルを付けます。これによりユーザーはテーブルの内容を一目で理解できます。
キャプション： タイトルの下に短い説明や追加情報を追加して、データの文脈や詳細を提供します。
アイコン： ヘッダーにアイコンを含めて視覚的に魅力を高めたり、テーブルの目的を表現したりします。
結合されているか： このオプションはヘッダーの下側の境界線を削除し、ヘッダーをテーブルや他のコンポーネントとシームレスに馴染ませます。
アクション： ヘッダーにボタンを追加して、ユーザーが新しいレコードの作成やデータのエクスポートなどのよく使うアクションに素早くアクセスできるようにします。これらのアクションは「インタラクション」タブでカスタマイズできます。
表示アクション： ヘッダーに直接表示するアクションボタンの数を制御します。表示上限を超えるアクションはドロップダウンメニューに配置されます。たとえば、アクションが4つあり「表示アクション」を2に設定した場合、最初の2つのボタンだけが直接表示されます。
アクションを非表示： ヘッダーのアクションメニューを完全に非表示にします。
アクションを無効化： ヘッダー内でアクションメニューを非アクティブ（グレー表示）にしますが、表示は維持します。
チュートリアル: Avonniデータテーブルでヘッダーアクションを動的にグレースケール化する方法
列幅
必要に応じて列幅をカスタマイズできます。デフォルトでは、すべての列にピクセル単位の最小値と最大値が設定されています。
個別に列幅を設定する
列幅は個別に設定できます 各列について次のように：
ことを確認してください（例: 真偽値入力にテキストを送らない）。 データマッピングセクション
列をクリック
スクロールダウン 完全にスクロールして「
高度なオプション"この列に特定の固定幅を設定します。
列のソート
列のソートオプションを設定できます。デフォルトの ソート方向 がソートされた列に適用されます。
各列は ソート可能にするには、列プロパティから直接ソート可能トグルを有効にできます。
ページネーション
The ページネーション セクションではデータテーブルのページネーションを有効にできます。
ここに データテーブルにページネーションを追加する方法 があります：
プロパティパネルで、ページネーションオプションのセクションを展開します
「
ページネーションを表示」トグルにチェックを入れますページごとのアイテム数を入力します
次のような他の設定を調整します：
ページネーションの配置
ボタンのアイコンとラベル。
ピルコンテナ
ピルコンテナオプションを有効にすると、選択された項目がピルコンテナに表示されます。適切なオプションを有効にすると、ピルは並べ替え可能で一行表示にできます。
The ラベルフィールド 属性は選択されたフィールドによってピルの名前を表示します。
最終結果
ラベルフィールド
ピルラベルに使用されるフィールド名を決定します。
並べ替え可能
ピルコンテナ内でのソートを有効にします。
一行表示
ピルコンテナを一行に制限します。
データをフィルタリング
Avonniデータテーブルでは、ユーザーがデータにフィルタを適用して必要な情報を見つけやすくなります。フィルタを設定するためのいくつかのオプションがあります：
コンポーネント設定（プロパティパネル）で： コンポーネントのプロパティ内でフィルタ設定をカスタマイズします。
非表示データでのフィルタリング： テーブルに表示されていない列に基づいてデータをフィルタリングすることもできます。
どの方法でも、ユーザーがデータの表示をどのように絞り込めるかを制御できます。
フィルタを追加する方法
プロパティパネルから
ことを確認してください（例: 真偽値入力にテキストを送らない）。 データマッピングセクション
列をクリック 検索可能にしたいフィールドの
下にスクロールして、
フィルタ可能属性でそれらの単位を視覚的に示すことを検討してください。
を切り替えます
非表示データでのフィルタリング データマッピングセクションでは、特定のフィールドをフィルタとして使用して、列として表示されていない他のフィールドのためのフィルタを追加できます
。これにより、データテーブルに余分な列を追加して混雑させずに、追加のフィルタをデータに追加できます。
フィールドを表示せずにデータテーブルでフィールドフィルタを適用する方法
フィルタオプション
水平
Avonniデータテーブルは、異なるユーザーの好みや画面サイズに対応するために設計された3種類のフィルタリングオプションを提供します。
ポップオーバー
これらのフィルタはデータテーブルの直上に横一列で表示されます。
サイドパネル
このオプションでは、フィルタをクリック可能なアイコンやボタンの背後に隠すことができます。クリックすると、フィルタオプションを含む小さな浮動インターフェースが表示されます。
サイドパネルのフィルタはデータテーブルの左または右に配置され、展開または折りたたみ可能なパネルからアクセスできます。
データテーブルを選択
フィルタメニューへのアクセス
フィルターの表示方法を選択します。
プロパティパネルからフィルタセクションまでスクロールします。
フィルタパネルのカスタマイズ
Avonniデータテーブルコンポーネントで「パネル」フィルタを使用するように構成すると、便利なサイドパネルにフィルタオプションを表示できます。このパネルは以下に説明する追加のカスタマイズ設定を提供します：
位置（左、右）：
閉じた状態：
この設定は、ユーザーがフィルタを操作したときにフィルタパネルが画面の左側または右側からスライドアウトするかを決定します。
このオプションはフィルタパネルの初期状態を制御します。
最初はデータテーブルの内容を強調したい場合は「閉じている」を「真」に設定してフィルタパネルを非表示で開始します。
トグルボタンを非表示にする：
デフォルトでフィルタパネルを開いた状態にして、ユーザーがすぐに表示をカスタマイズできるようにしたい場合は「閉じている」を「偽」に設定します。
フィルタパネルを手動で開閉する際に切り替えボタンが表示されるかどうかを示します。
フィルタパネルを他のフロー内のイベント（例：フィルタアイコンがクリックされたとき）に基づいて開閉したい場合は「切り替えボタンを隠す」を「真」に設定します。
常に表示される切り替えボタンをユーザーに提供してパネルを制御させたい場合は「切り替えボタンを隠す」を「偽」に設定します。
関連するピックリストフィルタ Avonniデータテーブルのピックリストフィルタはデータに自動適応します。ピックリスト列をフィルタリングする場合、フィルタメニューは現在のテーブルデータの少なくとも1つの行に存在するピックリスト値のみを表示します
。これにより未使用のオプションを表示せず、フィルタリングプロセスを簡素化します。これを有効にするには、データテーブルプロパティで「ピックリストの空の値を非表示」
検索
を「オン」に設定します。
検索オプションでは検索ボックスの設定を構成できます。プレースホルダーテキストのカスタマイズや検索ボックスの位置の設定が可能です。検索ボックスは少なくとも1つのフィールドが検索可能な場合に表示されます。
検索可能なフィールドについての注意点
一緒に使う：両方の利点を享受 追加することは 参照関係フィールド： 参照フィールドは クエリデータソース
一緒に使う：両方の利点を享受 できません 参照関係フィールド： オプションを使用して検索します。つまり、検索ボックスを使用して参照関係フィールドの値に基づいてレコードを見つけることができます。 変数データソース
オプション。ただし、この機能は近日中に追加予定です！
一緒に使う：両方の利点を享受 できません リッチテキストフィールド： 参照フィールドは リッチテキストフィールドは
一緒に使う：両方の利点を享受 追加することは リッチテキストフィールド： オプションを使用して検索します。つまり、検索ボックスを使用して参照関係フィールドの値に基づいてレコードを見つけることができます。 オプションを使用して検索します。
このオプションにより、リッチテキストフィールド内の内容に基づいてレコードを検索できます。
プロパティパネルから
ことを確認してください（例: 真偽値入力にテキストを送らない）。 データマッピングセクション
列をクリック 検索可能にしたいフィールドの
下にスクロールして、
フィールドを検索可能にする属性でそれらの単位を視覚的に示すことを検討してください。
検索可能
非表示データでの検索
データテーブルを選択
この機能により、テーブルビューに表示されていなくても、基礎データセット内の特定フィールドに対して検索クエリを実行できます。
計算された数式
データマッピングセクションを開きます検索フィールド
属性で、データテーブルに表示せずに検索可能にする必要のあるフィールドを選択します。
デフォルトの検索値を設定する検索オプション内の「defaultSearchValue
インタラクション
」属性を使用すると、テーブルに事前定義された検索語を設定できます。データテーブルが読み込まれると、この指定された語で自動的に検索します。
Avonniデータテーブル内で、ユーザーがデータと対話するためのさまざまなインタラクティブ要素を構成できます：
ヘッダーアクション（テーブル全体のアクション）: 目的
テーブル全体に作用するアクションや一般的なタスクをトリガーするアクションを提供します。: 実装方法
：最大値。: データテーブルのヘッダー領域にボタンやその他のインタラクティブコンポーネントを追加します。
「新しいレコードを作成」、「CSVにエクスポート」、「一括更新」、「フィルタプリセットを適用」など。
ヘッダーアクション（テーブル全体のアクション）: 行アクション（レコード固有のアクション）
テーブル全体に作用するアクションや一般的なタスクをトリガーするアクションを提供します。: テーブル内の特定のレコードに関連するアクションをユーザーが実行できるようにします。
：最大値。: 各データテーブル行にボタンやその他のインタラクティブコンポーネントを追加します。
「レコードを編集」、「レコードを削除」、「レコード詳細を表示」、「承認／却下」、「ワークフローを開始」など。
ヘッダーアクション（テーブル全体のアクション）: 変更の保存（保存アクション）
テーブル全体に作用するアクションや一般的なタスクをトリガーするアクションを提供します。: データテーブルの編集可能なセル内で行われた編集を永続化するために、「レコードを保存」アクションをトリガーする指定されたインタラクションを設定します。これにより基盤となるデータソースに変更がコミットされます。
変更の取り消し（キャンセルアクション）
ヘッダーアクション（テーブル全体のアクション）: ユーザーが保存されていない編集を元に戻してテーブルを元の状態に戻せるようにします。
テーブル全体に作用するアクションや一般的なタスクをトリガーするアクションを提供します。: 保留中の変更をキャンセルするための指定されたボタンまたはアクションを設定します。
最終更新
役に立ちましたか？