カスタムデータ型を編集可能にする
lightning-datatable でカスタムデータ型を編集可能にするには、追加のテンプレートを作成して、データ型をインライン編集するための UI を実装します。
インライン編集機能を追加する手順の概要を次に示します。
- 編集テンプレートを作成します。
- 編集テンプレートをカスタムデータ型定義に追加します。
- 列定義でカスタムデータ型を編集可能にします。
「LightningDatatable の拡張によるカスタムデータ型の定義」の例の customNumber 型のインライン編集を実装します。
カスタムデータ型テンプレートを定義したフォルダで、customNumber.html カスタムデータ型の編集に使用するテンプレート customNumberEdit.html を作成します。
カスタムデータ型の編集テンプレートは、カスタムデータ型テンプレートの出力コンポーネントと一致する入力コンポーネントを使用します。lightning-input コンポーネントをお勧めします。この例では、出力コンポーネント lightning-formatted-number が customNumber テンプレートで使用されるため、その編集テンプレートで lightning-input type="number" を使用します。lightning-input type="number" コンポーネントを使用すると、ユーザはカスタムデータ型のセルの数値を変更できます。
編集テンプレートで使用できるコンポーネントについての詳細は、後述する**「カスタムデータ型のインライン編集の考慮事項」**を参照してください。
次の属性を使用して、入力コンポーネントと拡張データテーブルコンポーネント間で値を渡します。
| 属性 | 型 | 説明 |
|---|---|---|
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 プロパティでカスタムデータ型のインライン編集のテンプレートを指定します。
アクセシビリティとキーボードナビゲーションをサポートするには、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 コンポーネントによって処理されます。たとえば、数値入力に step、min、または 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を使用します。- カスタムデータ型では、サーバ側の入力規則はまだサポートされていません。