LWCのDatatableにカスタムタイプを追加して画像を表示する
今回は Lightning Web Components の lightning-datatable でカスタムタイプを追加する方法です。カスタムタイプを追加すると lightning-datatable では提供されていないデータも好きな形式でテーブルのセルに表示できるようになります。例えば、こんな風に画像を表示させたりも出来るようになるので、datatable をスクラッチで自作しなければいけない理由が一つ減りますね。
作り方
数式項目(IMAGE関数)を使って画像を表示する項目を、データテーブルに表示できるようにしてみます。
そのためには、カスタムタイプとしてformulaを追加します。カスタムタイプを追加するには、lightning-datatable を継承したカスタム要素クラスを作成します。
ここでは、CustomDatatableとして作成します。そのクラス内に、静的なcustomTypesを作成し、予め作成しておいたformulaカスタムタイプに対応するテンプレートを指定します。
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="...">の形式で値が渡される想定です。
<template>
<lightning-formatted-rich-text value={value}></lightning-formatted-rich-text>
</template>
これでデータテーブルで画像を表示する準備は完了しました。
使い方
それでは、実際にCustomDatatableを使って画像を表示してみます。使い方は通常のlightning-datatableを扱うのと同様にc-custom-datatableを呼び出します。動作確認用にcustomDatatableTestコンポーネントを作成します。
<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コントローラでクエリしたレコードリストをそのまま扱う事もできます。
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;
}
これで、最初のスクリーンショットのように画像を表示できるデータテーブルが作成できました。
また、最終的なフォルダとフォルダ構造は次の通りです。
Discussion