この例は、カスタムデータ型と、単純なマークアップではないコンポーネントが含まれるテンプレートを示しています。
lwc-recipes リポジトリには、Apex や lightning/uiRecordApi モジュールを使用したインライン編集を実証するいくつかのコンポーネントがあります。名前が datatableInline で始まるコンポーネントを探してください。
Note
この例では、Amount のカスタムデータ型を使用してデータテーブルを作成します。
初回読み込み時のデータテーブルを次に示します。
myDatatableWrapper コンポーネントには、カスタムデータ型を定義する拡張データテーブルコンポーネントが含まれます。
1/* myDatatableWrapper.html */
2
3<template>
4 <c-my-custom-type-datatable columns={COLS} key-field="id" data={data}>
5 </c-my-custom-type-datatable>
6</template>1// myDatatableWrapper.js
2
3import { LightningElement } from 'lwc';
4export default class MyDatatableWrapper extends LightningElement {
5 COLS = [
6 { label: 'Account', type: 'text', fieldName: 'account', editable: false, displayReadOnlyIcon: true},
7 { label: 'Stage', type: 'text', fieldName: 'stage', editable: false, displayReadOnlyIcon: true},
8 { label: 'Amount', type: 'customNumber', fieldName: 'amount', editable: true,
9 typeAttributes: {
10 status: {fieldName: 'status'},
11 step: {fieldName: 'step'}
12 }
13 },
14 { label: 'Due Date', type: 'date', fieldName: 'date', editable: false, displayReadOnlyIcon: true}
15 ];
16
17 data = [
18 {account: 'Acme Corp.', amount: '200.00', status: 'action:user',
19 step: '0.01', stage:'Value Proposition', date: '2022-02-10T00:00:00Z'},
20 {account: 'Norwood Inc.', amount: '500000.00', status: 'action:user',
21 step: '0.01', stage:'Closed Won', date: '2022-01-20T00:00:00Z'},
22 {account: 'Edge Communications', amount: '800000.00', status: 'action:user',
23 step: '0.01', stage:'Closed Won', date: '2022-02-18T00:00:00Z'},
24 {account: 'Pyramid Construction Inc.', amount: '50000.00', status: 'action:user',
25 step: '0.01', stage:'Closed ', date: '2022-03-10T00:00:00Z'},
26 {account: 'GenePoint', amount: '30000', status: 'action:user',
27 step: '0.01', stage:'Negotiation/Review ', date: '2022-05-28T00:00:00Z'},
28 {account: 'Dickenson plc', amount: '1550000.00', status: 'action:user',
29 step: '0.01', stage:'Closed Won', date: '2022-03-16T00:00:00Z'}
30 ]編集可能なカスタムデータ型が含まれる拡張データテーブルのフォルダを次に示します。
1myCustomTypeDatatable
2 ├──customNumber.html
3 ├──customNumberEdit.html
4 ├──myCustomTypeDatatable.js
5 └──myCustomTypeDatatable.js-meta.xml編集テンプレートには、インライン編集 UI を定義する別のコンポーネントが含まれます。
1/*customNumber.html*/
2<template>
3 <c-my-fancy-number value={value}> </c-my-fancy-number>
4</template>子コンポーネントはデータ型の表示を定義します。また、データに適用されるスタイル設定を決定するロジックが含まれます。
myFancyNumber コンポーネントは、データを評価してクラス、アイコン、アイコンのスタイル設定を適用します。
1/* myFancyNumber.html */
2
3<template>
4 <div class={computedClass}>
5 <lightning-formatted-number format-style="currency" value={value}>
6 </lightning-formatted-number>
7 <lightning-icon
8 class="slds-p-horizontal_xx-small"
9 icon-name={computedIcon}
10 size="xx-small"
11 variant={iconVariant}
12 >
13 </lightning-icon>
14 ({range})
15 </div>
16</template>1// myFancyNumber.js
2
3import { LightningElement, api, track, wire } from "lwc";
4
5export default class MyFancyNumber extends LightningElement {
6 @api value;
7 get range() {
8 return this.value > 50000 ? "High" : "Low";
9 }
10 get computedClass() {
11 return this.value > 50000 ? "slds-text-color_success" : "slds-text-color_error";
12 }
13
14 get computedIcon() {
15 return this.value > 50000 ? "utility:arrowup" : "utility:arrowdown";
16 }
17
18 get iconVariant() {
19 return this.value > 50000 ? "success" : "error";
20 }
21}customNumberEdit.html テンプレートでは、lightning-input コンポーネントと type="number" が使用されています。
1/* customNumberEdit.html */
2<template>
3 <lightning-input
4 type="number"
5 value={editedValue}
6 label={columnLabel}
7 required={required}
8 step={typeAttributes.step}
9 data-inputable="true"
10 >
11 </lightning-input>
12</template>カスタム数値データ型項目が編集された後 (テーブルが保存される前) のデータテーブルを次にしまします。編集された項目は黄色で強調表示されます。
変更したデータの保存についての詳細は、「インライン編集を使用したテーブルでのデータの表示」を参照してください。
The Japanese Summer '24 guide is now live
j