(LWC) - Lightning Datatable: Custom Data Types
Yes, absolutely. You can create your own custom component with any tags/content you want and render it in a table cell for that column.
Step 1 : create custom component
Step 2 : Create a new component which extends datatable
Step 3 : We can use the component (that extended datatable) where-ever we want
Full details here: How to use custom LWC lightning component in lightning-datatable
Below I described step by step how you can do it.
For more details and code you can check the following post:
Custom Types in LWC Lightning Datatable
Create a Custom Data Type component
customTypeA/customTypeA.html
<template>
<a href='#' onclick={fireCustomTypeA}>
CustomTypeA
</a>
</template>
customTypeA/customTypeA.js
import { LightningElement, api } from 'lwc';
export default class CustomTypeA extends LightningElement {
@api recordId;
@api recordName;
@api createdDate;
fireCustomTypeA() {
const event = new CustomEvent('customtypea', {
composed: true,
bubbles: true,
cancelable: true,
detail: {
recordId: this.recordId,
recordName: this.recordName
},
});
this.dispatchEvent(event);
}
}
Creating a Template
customLightningDatatable/customTypeA.html
<template>
<c-custom-type-a
record-id={value}
record-name={typeAttributes.recordName}
record-created-date={typeAttributes.createdDate}
></c-custom-type-a>
</template>
Create Custom Lightning Datatable
customLightningDatatable/customLightningDatatable.js
import LightningDatatable from 'lightning/datatable';
import customTypeA from './customTypeA';
import customTypeB from './customTypeB';
export default class CustomLightningDatatable extends LightningDatatable {
static customTypes = {
customTypeA: {
template: customTypeA,
typeAttributes: ['recordId', 'recordName']
},
customTypeB: {
template: customTypeB,
typeAttributes: ['recordId', 'recordName']
}
}
}
Use Custom Lightning Datatable
<template>
<c-custom-lightning-datatable key-field="id"
data={data}
columns={columns}
hide-checkbox-column
oncustomtypea={handleCustomTypeA}
oncustomtypeb={handleCustomTypeB}>
</c-custom-lightning-datatable>
</template>
import { LightningElement } from 'lwc';
export default class MyDataTable extends LightningElement {
columns = [
{ label: 'Record Name', fieldName: 'name', type: 'text'},
{ label: 'Custom Type A', fieldName: 'id', type: 'customTypeA', typeAttributes: {
recordName: { fieldName: 'name' },
createdDate: { fieldName: 'createdDate' }
}
},
{ label: 'Custom Type B', fieldName: 'id', type: 'customTypeB', typeAttributes: {
recordName: { fieldName: 'name' },
createdDate: { fieldName: 'createdDate' }
}
}
];
data = [
{ id: 1, name: 'Example 1', createdDate: '08-05-2020 '},
{ id: 2, name: 'Example 2', createdDate: '08-05-2020 '},
{ id: 3, name: 'Example 3', createdDate: '08-05-2020 '},
{ id: 4, name: 'Example 4', createdDate: '08-05-2020 '},
{ id: 5, name: 'Example 5', createdDate: '08-05-2020 '},
{ id: 6, name: 'Example 6', createdDate: '08-05-2020 '},
{ id: 7, name: 'Example 7', createdDate: '08-05-2020 '},
{ id: 8, name: 'Example 8', createdDate: '08-05-2020 '}
];
handleCustomTypeA(event) {
const { recordId, recordName } = event.detail;
console.log('CUSTOM TYPE A' + recordId);
}
handleCustomTypeB(event) {
const { recordId, recordName } = event.detail;
console.log('CUSTOM TYPE B' + recordId);
}
}