カスタムデータ型を使用する lightning-datatable セルの外観をカスタマイズできます。
カスタムセルは、標準レイアウトまたはベアレイアウトを使用できます。
標準レイアウト:
カスタムセルのデフォルトレイアウトであるベアレイアウト:
lightning-datatable でサポートされる標準データ型はすべて、標準レイアウトを使用します。
標準レイアウトを使用するには、カスタムデータ型を定義するときに standardCellLayout: true を指定します。
1static customTypes = { customName: { template: customNameTemplate, standardCellLayout: true,
2typeAttributes: ['accountName'], }, // Other types here }「カスタムデータ型の作成」を参照してください。
カスタムデータ型を作成して、デフォルトのベアレイアウトを使用すると、独自のスタイルを適用したり、列内のコンテンツを位置揃えしたり、テキストの折り返しとクリッピングを設定したりできます。
列のすべての行にスタイル設定を適用するには、CSS クラスを列設定の cellAttributes に渡します。
1const COLS = [
2 {
3 label: "Employees",
4 type: "number",
5 fieldName: "NumberOfEmployees",
6 cellAttributes: {
7 class: "slds-theme_shade slds-theme_alert-texture",
8 },
9 },
10];特定の行にスタイル設定を適用するには、fieldName 属性を使用して CSS クラスをデータ定義に接続します。この例では、fieldName プロパティ industryClass を使用して、Energy industry の行に青色のテキストを適用します。
1/* myDatatable.js */
2import { LightningElement, wire, track } from 'lwc';
3import getAccountList from '@salesforce/apex/AccountController.getAccountList';
4
5const COLS = [{
6 label: 'Industry', fieldName: 'Industry',
7 cellAttributes: {
8 class: { fieldName: 'industryClass' },
9 }
10}, // Other columns here
11];
12
13export default class MyDatatable extends LightningElement {
14 columns = COLS;
15 @track accounts = [];
16
17 @wire(getAccountList)
18 wiredAccounts({error, data}) {
19 if (error) {
20 // Handle error
21 } else if (data) {
22 // Process record data
23 this.accounts = data.map((record) => {
24 let industryClass = record.Industry === 'Energy' ? 'blueText': 'defaultText';
25 return {...record, 'industryClass: industryClass}
26 });
27
28 }
29 }カスタムデータ型の標準レイアウトを使用する列のコンテンツを位置揃えできます。cellAttributes 定義で、alignment プロパティを渡します。
1const COLS = [
2 {
3 label: "Account Name",
4 type: "customName",
5 fieldName: "Name",
6 cellAttributes: {
7 alignment: "right",
8 },
9 },
10];サポートされる alignment の値は、left、center、right です。
デフォルトでは、標準の数値型は右揃えです。標準の型には、currency、number、percent データ型が含まれます。
カスタムデータ型を作成するときに、SLDS ユーティリティクラス slds-hyphenate および slds-truncate を使用してテキストの折り返しとクリッピングを実装します。これらのクラスにより、ユーザがデータテーブル列ヘッダーのテキスト折り返しの選択内容を変更したときに、カスタムデータのセルが適切に表示されるようになります。テキストの折り返しでは、行が縦方向に拡大され、より多くのコンテンツが表示されます。テキストのクリッピングでは、コンテンツを切り捨てて列内の 1 行に収めることができます。
取引先名を表示するカスタムデータ型テンプレートがあるとします。列はデフォルトでテキストがクリップされ、コンテンツが切り捨てられて末尾に省略記号が表示されます。
1<template>
2 <template lwc:if={wrapText}>
3 <div class="slds-hyphenate">{typeAttributes.accountName}</div>
4 </template>
5 <template lwc:else>
6 <div class="slds-truncate">{typeAttributes.accountName}</div>
7 </template>
8</template>wrapText 値に基づいて、SLDS ユーティリティクラスを返す getter を作成することもできます。
折り返しテキストを表示するには、列ヘッダーのドロップダウンメニューから [テキストを折り返し] を選択します。
または、データテーブルの読み込み時に列に折り返しテキストを表示するには、列定義に wrapText: true を渡します。
1const COLS = [
2 {
3 label: "Account Name",
4 type: "customText",
5 wrapText: true,
6 typeAttributes: {
7 accountName: { fieldName: "Name" },
8 },
9 },
10];列のコンテンツが折り返されたときに表示される行数を制御できます。拡張データテーブルコンポーネントで wrap-text-max-lines を設定して、残りを非表示にする前の行数を表示します。データテーブルは、複数行のテキストの切り捨てを可能にするために行省略を適用します。
1<template>
2 <c-my-custom-type-datatable
3 key-field="id"
4 data={accounts}
5 columns={columns}
6 wrap-text-max-lines="2"
7 >
8 </c-my-custom-type-datatable>
9</template>Internet Explorer 11 では wrap-text-max-lines はサポートされません。wrapText が true の場合、列にテキスト全体が表示されます。
Note
関連トピック
The Japanese Summer '24 guide is now live
j