LWCのDatatableをCustom Data Typeで拡張する

概要 Lightning Web ComponentのDatatable(lightning-datatable)は、簡単にテーブル形式でデータを表示することができるコンポーネントです。Datatableでは、標準でサポートしている型(※)がありますが、カスタマイズしたい場合にはLightningDatatableを拡張してCustom Typeを定義することができます。Custom Typeにより例えば行削除ボタンや画像、カスタムのテキストや数値のセルを実装することができます。 ※Summer’23時点actionbooleanbuttonbutton-iconcurrencydatedate-localemaillocationnumberpercentphonetext (default)url Custom Data Typeについて Custom Data Typeを使用するには、LightningDatatableを拡張したコンポーネントを作成する必要があります。今回は、サンプルである一定の条件を満たした際にボタンを表示/非表示を切り替えるCustom Typeを定義してみました。 サンプル 取引先のデータテーブルでカスタムデータタイプで表示条件をつけたボタンを作ってみました。一番右の列のRelated listは取引先に関連するケースが存在する場合にのみ表示されるようにしています。 https://github.com/yhayashi30/lwc-custom-data-type-sample Custom

Continue reading