2020.03.04

Lightning Web Componentで作るlightning-datatableについて

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
gettyimages (15118)

はじめに

みなさん、Lightning Web Component(LWC) 使っていますか?
私はここ最近、ついにLWCへの一歩を踏み出したところです。
まだまだ理解は浅いのですが、せっかくなのでブログに書いていこうと思います。

さっそくですが、タイトルにも書いているlightning-datatableコンポーネントは、テーブルが簡単に作成できてすごく便利ですよね。テーブルを表示するときは大体お世話になっています。
ただ、レコードのIDがリンクで表示されないなど、絶妙に使いづらかったりしますよね。

と、いうことで今回はlightning-datatableを拡張して、独自に作成したデータ型を追加してみたいと思います。


そもそもLWCって?という方は過去に公開されている記事を参考にしてみてください。

作成するコンポーネント

作成するコンポーネントは下記の3つです。

・sampleDatatable
 画面に表示するメインのコンポーネントです。

・customDatatable
 lightning-datatableを継承するコンポーネントです。
 ここにデータ型を定義していきます。

・datatableLinkRow
 リンクのコンポーネントです。

これらを作成して下記のようにテーブル内にリンク型のデータを表示することができます。

sampleDatatable

<template>
    <c-custom-datatable
        key-field="id"
        data={data}
        columns={columns}>
    </c-custom-datatable>
</template>
sampleDatatable.html
import { LightningElement, track } from 'lwc';

const columns = [
    { label: 'Name', fieldName: 'name' },
    { label: 'Link', fieldName: 'link', type: 'customLink', typeAttributes: { linkName: { fieldName: 'linkName' }, },
];

export default class sampleDatatable extends LightningElement {
    @track columns = columns;
    @track data = [
      {
        id: 'a',
        name: 'テストデータ1',
        link: 'testLink1',
        linkName: 'リンク1',
      },
      {
        id: 'b',
        name: 'テストデータ2',
        link: 'testLink2',
        linkName: 'リンク2',
      }
    ];
}
sampleDatatable.js
このコンポーネントが画面に表示されるメインのコンポーネントになります。
colmunsに指定している、customLinkが追加したデータ型の部分になっています。

customDatatable

import LightningDatatable from 'lightning/datatable';
import link from './link.html';

export default class CustomDatatable extends LightningDatatable {
   static customTypes = {
        customLink: {
            template: link,
            typeAttributes: ['linkName'],
        },
        // typeを追加する場合はここに追加していく
   };
}
customDatatable.js
このクラスではLightningDatatableを継承しています。
利用するテンプレート(template)と値を渡したいプロパティ名(typeAttributes)をcustomTypesに設定します。
<template>
    <c-datatable-link-row
        row-id={value}
        link-name={typeAttributes.linkName}>
    </c-datatable-link-row>
</template>
link.html
テンプレートは、CustomDatatable.jsと同階層に作成して、次に作成するdatatableLinkRowコンポーネントを呼び出します。
valueには「fieldName」に設定した値が入ります。
typeAttributes.linkNameには「typeAttribute」の「fieldName」に設定した値が入ります。

datatableLinkRow

<template>
    <a onclick={handleClick} target="_self">{linkName}</a>
</template>
datatableLinkRow.html
import { LightningElement, api } from 'lwc';

export default class DatatableLinkRow extends LightningElement {
    @api rowId
    @api linkName;

    handleClick(){
        console.log(this.rowId);
    }
}
datatableLinkRow.js
このクラスではリンクのコンポーネントを作成すればOKです。

さいごに

いかがでしたでしょうか。
今回は簡単にリンクを表示してみただけですが、応用すればもっといろいろなことができると思います!
今後のアップデートでもっと使いやすくなるかもしれませんが、何かの参考になれば嬉しいです。

最後まで読んでいただきありがとうございました。


23 件
     
  • banner
  • banner

関連する記事