LWC Lightning-datatableのデータ設定について

### Apexからデータを取得する方法

[Apex を使用したデータの操作](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-and-salesforce-data/use-apex-to-work-with-data)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/95334d86-eac3-2b5a-771e-47bc72702f4b.png)


#### ＠wire を使用した Apex コール
HTML
```html
<template>
    <span class="error999">*****lightning-datatable test-----</span>
    <div class="slds-scrollable" style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data.data}
                row-number-offset={rowOffset}
                hide-checkbox-column
                columns={columns}>
        </lightning-datatable>
    </div>
</template>
```

JS
```js
import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/MyContactController.getContacts';

const columns = [
    { label: 'Name', fieldName: 'Name', type: 'text', fixedWidth: null, initialWidth: 50 },
    { label: 'Title', fieldName: 'Title', type: 'text', fixedWidth: null, initialWidth: 100 },
    { label: 'Email', fieldName: 'Email', type: 'text', fixedWidth: null, initialWidth: 150 },
    { label: 'Phone', fieldName: 'Phone', type: 'text', fixedWidth: null, initialWidth: 250 },
];

export default class BasicDatatable extends LightningElement {
    //data = [];
    columns = columns;
    rowOffset = 0;
    @wire(getContacts) data;

    connectedCallback() {
    }
}
```

Apex
```apex
public with sharing class MyContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        return [
            SELECT Name, Title, Email, Phone
            FROM Contact
            LIMIT 10
       ];
    }
}
```

#### 命令的な Apex コール
htmlはほぼ同じです。
今回はdata={myContacts}に変更します。dataはキーワードようなものなので
```html
<template>
    <span class="error999">*****lightning-datatable test-----</span>
    <div class="slds-scrollable" style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={myContacts}
                row-number-offset={rowOffset}
                hide-checkbox-column
                columns={columns}>
        </lightning-datatable>
    </div>
</template>
```

注意点：
* wireの場合は、myContacts = []; が不要だったですが、命令の場合は、必須です。
* Apex側は↑のApexコードから __「(cacheable=true)」__ を削除します
```apex
import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/MyContactController.getContacts';

const columns = [
    { label: 'Name', fieldName: 'Name', type: 'text', fixedWidth: null, initialWidth: 50 },
    { label: 'Title', fieldName: 'Title', type: 'text', fixedWidth: null, initialWidth: 100 },
    { label: 'Email', fieldName: 'Email', type: 'text', fixedWidth: null, initialWidth: 150 },
    { label: 'Phone', fieldName: 'Phone', type: 'text', fixedWidth: null, initialWidth: 250 },
];

export default class BasicDatatable extends LightningElement {
    myContacts = []; //★★★ 必須です。
    columns = columns;
    
    connectedCallback() {
        console.log('***connectedCallback start***');
        getContacts({ //imperative Apex call
            //birthDate: this.minBirthDate
            //apex側にパラメータを渡す場合は、ここに
        })
            .then(result => {
                //code to execute if related contacts are returned successfully
                console.log('***connectedCallback successfully***');
                this.myContacts = result;
                console.log('***contacts' + JSON.stringify(result, null, 2));
            })
            .catch(error => {
                console.log('***connectedCallback error error error***');
                //code to execute if related contacts are not returned successfully
            });

    }
}
```

簡単なテストする場合は、Apexからのデータ取得が不要なので
以下のコードで
```apex
this.myContacts = [{"Name":"dataTable","Title":"tttt","Email":"aaa@google.com","phone":"09011112222"}];
```

おまけ、
[LWCからApexメソッドに、レコード情報をJSONで受け渡す](https://higashinopanda.com/lwc-record-json/)