データ型のレイアウトとスタイルのカスタマイズ

カスタムデータ型を使用する lightning-datatable セルの外観をカスタマイズできます。

カスタムセルは、標準レイアウトまたはベアレイアウトを使用できます。

標準レイアウト:

最初の項目が左の境界線に沿い、最後の項目が右の境界線に沿うように、コンテンツをセル全体に均等に分散する
テキストを左揃えにし、縦方向は中央に揃える
コンテンツの左右に小さいパディングを追加する
編集可能なデータ型のアクセシビリティとキーボードナビゲーションがサポートされる

カスタムセルのデフォルトレイアウトであるベアレイアウト:

テキストを左揃えにし、縦方向は中央に揃える
コンテンツの左右からパディングを削除する
編集可能なデータ型のアクセシビリティとキーボードナビゲーションがサポートされない

lightning-datatable でサポートされる標準データ型はすべて、標準レイアウトを使用します。

標準レイアウトを使用するには、カスタムデータ型を定義するときに standardCellLayout: true を指定します。

「カスタムデータ型の作成」を参照してください。

カスタムデータ型を作成して、デフォルトのベアレイアウトを使用すると、独自のスタイルを適用したり、列内のコンテンツを位置揃えしたり、テキストの折り返しとクリッピングを設定したりできます。

列のすべての行にスタイル設定を適用するには、CSS クラスを列設定の cellAttributes に渡します。

特定の行にスタイル設定を適用するには、fieldName 属性を使用して CSS クラスをデータ定義に接続します。この例では、fieldName プロパティ industryClass を使用して、Energy industry の行に青色のテキストを適用します。

カスタムデータ型の標準レイアウトを使用する列のコンテンツを位置揃えできます。cellAttributes 定義で、alignment プロパティを渡します。

サポートされる alignment の値は、left、center、right です。

デフォルトでは、標準の数値型は右揃えです。標準の型には、currency、number、percent データ型が含まれます。

カスタムデータ型を作成するときに、SLDS ユーティリティクラス slds-hyphenate および slds-truncate を使用してテキストの折り返しとクリッピングを実装します。これらのクラスにより、ユーザがデータテーブル列ヘッダーのテキスト折り返しの選択内容を変更したときに、カスタムデータのセルが適切に表示されるようになります。テキストの折り返しでは、行が縦方向に拡大され、より多くのコンテンツが表示されます。テキストのクリッピングでは、コンテンツを切り捨てて列内の 1 行に収めることができます。

取引先名を表示するカスタムデータ型テンプレートがあるとします。列はデフォルトでテキストがクリップされ、コンテンツが切り捨てられて末尾に省略記号が表示されます。

wrapText 値に基づいて、SLDS ユーティリティクラスを返す getter を作成することもできます。

折り返しテキストを表示するには、列ヘッダーのドロップダウンメニューから [テキストを折り返し] を選択します。

または、データテーブルの読み込み時に列に折り返しテキストを表示するには、列定義に wrapText: true を渡します。

列のコンテンツが折り返されたときに表示される行数を制御できます。拡張データテーブルコンポーネントで wrap-text-max-lines を設定して、残りを非表示にする前の行数を表示します。データテーブルは、複数行のテキストの切り捨てを可能にするために行省略を適用します。

Internet Explorer 11 では wrap-text-max-lines はサポートされません。wrapText が true の場合、列にテキスト全体が表示されます。

関連トピック