LWCのDatatableにカスタムタイプを追加して画像を表示する

2 min read読了の目安(約2600字

今回は Lightning Web Components の lightning-datatable でカスタムタイプを追加する方法です。カスタムタイプを追加すると lightning-datatable では提供されていないデータも好きな形式でテーブルのセルに表示できるようになります。例えば、こんな風に画像を表示させたりも出来るようになるので、datatable をスクラッチで自作しなければいけない理由が一つ減りますね。

作り方

数式項目(IMAGE関数)を使って画像を表示する項目を、データテーブルに表示できるようにしてみます。
そのためには、カスタムタイプとしてformulaを追加します。カスタムタイプを追加するには、lightning-datatable を継承したカスタム要素クラスを作成します。
ここでは、CustomDatatableとして作成します。そのクラス内に、静的なcustomTypesを作成し、予め作成しておいたformulaカスタムタイプに対応するテンプレートを指定します。

customDatatable.js
import LightningDatatable from "lightning/datatable";
import formulaTemplate from "./formulaTemplate.html";
export default class CustomDatatable extends LightningDatatable {
  static customTypes = {
    formula: {
      template: formulaTemplate,
      standardCellLayout: true
    }
  };
}

formulaカスタムタイプに対応するテンプレートは、データを表示するためのテーブルセルのHTMLテンプレートです。今回は、簡便のためにlightning-formatted-rich-textコンポーネントを使って画像を表示します。セルに表示される値は継承元のlightning-datatableからvalueとして自動的に渡されるのでそのまま使います。今回であれば数式項目として<img src="...">の形式で値が渡される想定です。

formulaTemplate.html
<template>
  <lightning-formatted-rich-text value={value}></lightning-formatted-rich-text>
</template>

これでデータテーブルで画像を表示する準備は完了しました。

使い方

それでは、実際にCustomDatatableを使って画像を表示してみます。使い方は通常のlightning-datatableを扱うのと同様にc-custom-datatableを呼び出します。動作確認用にcustomDatatableTestコンポーネントを作成します。

customDatatableTest.html
<template>
  <lightning-card title="データテーブルで画像を表示">
    <c-custom-datatable
      key-field="id"
      data={data}
      columns={columns}
      hide-checkbox-column="true"
    >
    </c-custom-datatable>
  </lightning-card>
</template>

今回は動作確認のため、レコードのリストデータをハードコードしていますが、実際にApexコントローラでクエリしたレコードリストをそのまま扱う事もできます。

customDatatableTest.js
import { LightningElement } from "lwc";
const columns = [
  { label: "名前", fieldName: "name" },
  { label: "画像", fieldName: "image__c", type: "formula" }
];
const data = [
  {
    id: "001",
    name: "Salesforce",
    image__c:
      '<img src="url/to/image">'
  },
  {
    id: "002",
    name: "GitHub",
    image__c:
      '<img src="url/to/image">'
  }
];

export default class CustomDatatableTest extends LightningElement {
  data = data;
  columns = columns;
}

これで、最初のスクリーンショットのように画像を表示できるデータテーブルが作成できました。

また、最終的なフォルダとフォルダ構造は次の通りです。

参考