こんにちは、アンダーソンです。
今回はlightning-datatableを実装してみました。
ちょっとつまずいたことがありましたのでそれも載せたいと思います。
簡単にレコードのテーブルを表示できる
lightning-datatableは簡単にレコードのテーブルをlightningの見た目で表示してくれる優れものです。表示するだけなら簡単でhtml側は下記のようなマークアップでOKです。
<lightning-datatable
key-field="id"
data={data}
columns={columns}
</lightning-datatable>これでOKです。
- key-fieldは必須のようです。idを指定しておけばOKのようで、おそらく各行が一意であることを示してると思われます。
- dataはそのテーブルに表示させる配列です。
- columnsはテーブルの列です。
ではdataとcolumnsをjavascriptで作っていきます。
まずcolumnsからです。
const columns = [
{fieldName:'Name',label: "Name"},
{fieldName:"Text__c",label: "Text__c"},
{fieldName:"CheckBox__c",label: "CheckBox__c", type:'boolean'},
{fieldName:"Datetime__c",label: "Datetime__c", type:'date'},
{fieldName:"PickList__c",label: "PickList__c",},
];
export default class ListComponent extends LightningElement {
columns = columns;
}これでOKです。
次にdataを用意します。
dataは前回のブログで用意したデータを用意しています。
めんどくさい方はGitHubに今回のコード全て載せてますのでそちらをご覧ください。
戻ってきたリストをそのまま入れてもOKですし、
オブジェクトを作成して入れてあげてもOKです。
これで綺麗に整形されたテーブルで表示してくれるので非常に簡単です。
今回ハマったこと
今回テーブルの作成にあたり、ハマったことがあったので共有です。
まずcolumnsの設定の際にfieldNameを設定するのですが、これを返却値のラベル名と合わせておく必要があります。
CheckBox__c: true
Datetime__c: "2020-03-03T14:35:00.000Z"
Id: "a0B6F00001egMIMUA2"
Name: "Test1"
PickList__c: "いちご"
Text__c: "テストです。"オブジェクトの構造は上記のようになっています。
columnsの設定と見比べると、fieldNameと完全に一致しているのがわかると思います。
ここでcolumnsのfieldNameを一文字でも間違えると表示されません（大文字小文字も判定します。）
あとはチェックボックスが表示されないってことです。
columns内でtype指定をしてあげないと基本はtextになるようですが、チェックボックスはちゃんとtextに変換してくれないようなので気をつけましょう。
まとめ
今回は簡単ですが、lightning-datatableの実装例を書いてみました。
全部のコードはGitHubに載せてあります。
簡単なコードで綺麗なUIを表示できるのでLWCはいいですね。
ぜひ試しにやってみてください。
その他の開発に関する記事はこちらです。
Developerも含めた試験問題にチャレンジしてみましょう。
コメント