カスタムデータ型を編集可能にする

lightning-datatable でカスタムデータ型を編集可能にするには、追加のテンプレートを作成して、データ型をインライン編集するための UI を実装します。

インライン編集機能を追加する手順の概要を次に示します。

編集テンプレートを作成します。
編集テンプレートをカスタムデータ型定義に追加します。
列定義でカスタムデータ型を編集可能にします。

「LightningDatatable の拡張によるカスタムデータ型の定義」の例の customNumber 型のインライン編集を実装します。

編集テンプレートの作成

カスタムデータ型テンプレートを定義したフォルダで、customNumber.html カスタムデータ型の編集に使用するテンプレート customNumberEdit.html を作成します。

1myCustomTypeDatatable
2   ├──customName.html
3   ├──customNumber.html
4   ├──customNumberEdit.html
5   ├──myCustomTypeDatatable.js
6   └──myCustomTypeDatatable.js-meta.xml

カスタムデータ型の編集テンプレートは、カスタムデータ型テンプレートの出力コンポーネントと一致する入力コンポーネントを使用します。lightning-input コンポーネントをお勧めします。この例では、出力コンポーネント lightning-formatted-number が customNumber テンプレートで使用されるため、その編集テンプレートで lightning-input type="number" を使用します。lightning-input type="number" コンポーネントを使用すると、ユーザはカスタムデータ型のセルの数値を変更できます。

編集テンプレートで使用できるコンポーネントについての詳細は、後述する**「カスタムデータ型のインライン編集の考慮事項」**を参照してください。

Tip

1<!--customNumberEdit.html-->
2<template>
3  <div class="slds-p-around_x-small">
4    <lightning-input
5      type="number"
6      value={editedValue}
7      required={required}
8      label={columnLabel}
9      min={typeAttributes.min}
10      data-inputable="true"
11      class="slds-float_right"
12    >
13    </lightning-input>
14  </div>
15</template>

次の属性を使用して、入力コンポーネントと拡張データテーブルコンポーネント間で値を渡します。

属性	型	説明
`editedValue`	string	編集するカスタムセルの現在の値。
`columnLabel`	string	列定義から取得された `label` 値。
`required`	boolean	列定義から取得された必要性の値。デフォルト値は false です。列定義で `required` が true に設定されていると、ユーザが項目を操作して値を入力しなかった場合に項目に検証エラーが表示されます。
`typeAttributes`	object	object には、セルの type 属性値が含まれます。`typeAttributes.attributeName` 構文を使用して値にアクセスします。

この例では、min 属性を設定して、カスタム数値をインライン編集するときにユーザが負でない数値を入力するようにします。次のセクションで min をカスタムデータ型定義に追加します。

標準セルレイアウトのアクセシビリティをサポートするには、data-inputable="true" 属性が必要です。

カスタムデータ型定義への編集テンプレートの追加

myCustomTypeDatatable.js で編集テンプレートをインポートし、customTypes オブジェクトの customNumber 定義でプロパティ editTemplate: customNumberEditTemplate を追加します。editTemplate プロパティでカスタムデータ型のインライン編集のテンプレートを指定します。

1//myCustomTypeDatatable.js
2import LightningDatatable from "lightning/datatable";
3import customNameTemplate from "./customName.html";
4import customNumberTemplate from "./customNumber.html";
5import customNumberEditTemplate from "./customNumberEdit.html";
6
7export default class MyCustomTypeDatatable extends LightningDatatable {
8  static customTypes = {
9    customName: {
10      template: customNameTemplate,
11      standardCellLayout: true,
12      typeAttributes: ["accountName"],
13    },
14    customNumber: {
15      template: customNumberTemplate,
16      editTemplate: customNumberEditTemplate,
17      standardCellLayout: true,
18      typeAttributes: ["status", "min"],
19    },
20    // Other types here
21  };
22}

アクセシビリティとキーボードナビゲーションをサポートするには、standardCellLayout 値を true に変更します。詳細は、後述する**「編集可能なカスタムデータ型のアクセシビリティ」**を参照してください。

min 属性をデータ型定義の typeAttributes に追加します。

列定義でカスタムデータ型を編集可能にする

データテーブルの列定義で、editable: true プロパティをカスタムデータ型に追加します。

editable: true プロパティが Employees 列に適用され、customNumber 型を使用する、「カスタムデータ型の作成」の**「カスタムデータ型を使用したデータテーブルの実装」**の myDatatable.js の例を次に示します。

1/* myDatatable.js */
2import { LightningElement, wire, track } from 'lwc';
3import getAccountList from '@salesforce/apex/AccountController.getAccountList';
4
5const COLS = [
6    { label: 'Account Name', type: 'customName',
7     typeAttributes: {
8        accountName: { fieldName: 'Name' }
9    },
10    },
11    { label: 'Industry', fieldName: 'Industry',
12     cellAttributes: {
13        class: {fieldName: 'industryColor'},
14    }
15    },
16    { label: 'Employees', type: 'customNumber', fieldName: 'NumberOfEmployees', editable: true,
17     typeAttributes: {
18            status: {fieldName: 'status'},
19            min: 0
20    },
21    cellAttributes: {
22        class: 'slds-theme_alert-texture'
23    }
24}];

属性を編集テンプレートの入力コンポーネントに追加する場合、列定義にも追加します。ここでは、min 属性を Employees 列の typeAttributes に追加しました。

カスタムデータ型の変更された値の処理

カスタムデータ型の編集された項目は、標準データ型と同様に黄色で強調表示されて表示されます。セルの変更された値は、一時的に editedValue プロパティに保存されます。

標準データ型と同様に、onsave アクションと draft-values 属性を使用してデータテーブルの変更された値を保持します。「インライン編集を使用したテーブルでのデータの表示」と、lightning-datatable リファレンスドキュメントの**「Working with Inline Editing (インライン編集の使用)」**セクションを参照してください。

編集可能なカスタムデータ型のアクセシビリティ

編集可能なカスタムデータ型でキーボードナビゲーションなどアクセシビリティ機能をサポートする手順は、次のとおりです。

属性 data-inputable="true" を編集テンプレートの入力コンポーネントに追加します。
customTypes でカスタムデータ型定義の standardCellLayout: true を設定します。

これらの属性により、データテーブルのアクションモードとナビゲーションモードがカスタムデータ型で機能するようになります。編集可能なカスタムデータ型が表示されているセルで Enter キーまたはスペースバーを押して、アクションモードに入ります。ナビゲーションモードの場合、データテーブルで Tab キーを押すと、編集可能なカスタムデータ型が表示されているセルに移動できます (アクション可能であるため)。

aria-label 属性は、label 属性の値を使用して入力コンポーネントに適用されます。

カスタムデータ型の編集されたセルの検証およびエラー処理

基本的なクライアント側入力検証は、lightning-input コンポーネントによって処理されます。たとえば、数値入力に step、min、または max 属性を指定すると、それらの属性値に対して入力が検証され、有効でない場合はエラーが返されます。カスタムデータ型のより複雑なクライアント側検証を実行することもできます。

クライアントでカスタムデータ型のユーザ入力をさらに検証するには、カスタム編集テンプレートの子コンポーネントを使用します。

入力コンポーネントで data-inputable="true" を設定し、validity() getter をその JS に含めて、入力コンポーネントの有効性 API を公開します。

1@api
2get validity() {
3    return this.customInput.validity;
4}

編集テンプレートの入力コンポーネントから showHelpMessageifInvalid() メソッドを公開し、変更されたデータが無効である場合にカスタムデータ型でカスタムメッセージを表示できるようにします。

1@api
2showHelpMessageIfInvalid() {
3    this.customInput.showHelpMessageIfInvalid()
4}

詳細は、lightning-input のリファレンスドキュメントを参照してください。

カスタムデータ型のインライン編集の考慮事項

1 つの入力項目がある Lightning 基本コンポーネントのみがカスタム編集テンプレートの入力コンポーネントとしてサポートされます。複数の入力があっても API で 1 つの入力に評価されるコンポーネント (lightning-input type="datetime" など) もサポートされます。
lightning-input-field コンポーネントは、lightning-record-edit-form でのみ使用されるように設計されており、データテーブルで使用することはできません。代わりに、lightning-input を使用します。
カスタムデータ型では、サーバ側の入力規則はまだサポートされていません。

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。