lightning-datatable でクエリレコードの表示〜選択した行に処理を行う(Lightning Web Component)

LWC の lightning-datatable を使うと、関連リストっぽいものが実装できます。
備忘として、レコードのクエリ〜表示〜選択した行への処理までを簡単にまとめておきます。

実装例とソースコード
ポイント

実装例とソースコード

例として、取引先を10件表示し、選択したレコードに対して処理を行うコンポーネントを作成します。

<template>
    <lightning-quick-action-panel>
        <lightning-datatable key-field="id" data={viewData} columns={columns} onrowselection={handleRowSelection}></lightning-datatable>
        <div slot="footer">
            <lightning-button variant="brand" label="実行" onclick={handleClick}></lightning-button>
        </div>
    </lightning-quick-action-panel>
</template>

import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/LightningDatatableDemoController.getAccountList';

const columns = [
    { label: '取引先名', fieldName: 'Name', type: 'text'},
    { label: '電話', fieldName: 'Phone', type: 'text'},
];

export default class LightningDatatableDemo extends LightningElement {
    columns = columns;
    viewData;
    selectedData = [];

    @wire(getAccountList, {})
    accountList({data}){
        if(data){
            this.viewData = data;
        }
    }

    handleRowSelection(event) {
        this.selectedData = event.detail.selectedRows;
    }

    handleClick(event){
        this.selectedData.forEach(account => {
            console.log(account);
            // ここに処理を記述
        });
    }
}

public with sharing class LightningDatatableDemoController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountList(){
        try {
            return [SELECT Name, Phone FROM Account LIMIT 10];
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

ポイント

クエリしたデータの表示

クエリ部分は Apex クラスで実装し、返ってきたデータを lightning-datatable の data 属性（viewData）に代入します。

そのまま代入しても画面表示されますが、プロパティの追加など、配列を加工した場合にエラーになります。

@wire(getAccountList, {})
accountList({data}){
    if(data){
        // これは失敗（object is not extensible）
        data.forEach((d, index) => {
            d.index = index;
        });
        this.viewData = data;
    }
}

配列の加工を行う場合はディープコピーしてから加工します。

@wire(getAccountList, {})
accountList({data}){
    if(data){
        let copyData = JSON.parse(JSON.stringify(data)); // ディープコピー
        copyData.forEach((d, index) => {
            d.index = index;
        });
        this.viewData = copyData;
    }
}

選択した行に対して処理を行う

選択されている行の情報は onrowselection に対応するメソッド内にて、 event.detail.selectedRows で取得できます。これを変数に保存しておき、「実行」ボタンが押されたタイミングで選択した行情報を使った処理を行います。

selectedData = [];

handleRowSelection(event) {
    this.selectedData = event.detail.selectedRows;
}

handleClick(event){
    this.selectedData.forEach(account => {
        console.log(account);
        // ここに処理を記述
    });
}