The Salesforce Developers website will undergo maintenance on May 29, 2024 from 3:00 a.m. UTC to 10:00 a.m. UTC. The maintenance process may affect the availability of our documentation. Please plan accordingly.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

属性を編集テンプレートの入力コンポーネントに追加する場合、列定義にも追加します。ここでは、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 コンポーネントによって処理されます。たとえば、数値入力に stepmin、または max 属性を指定すると、それらの属性値に対して入力が検証され、有効でない場合はエラーが返されます。カスタムデータ型のより複雑なクライアント側検証を実行することもできます。

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

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

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

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

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