Creating Lightning Data Table with Custom Data Types
Hi all,
In this blog, we are going to explore defining custom types in lightning datatable.
Before you define custom type, please check if your data type is going to be one the below listed type as lightning-datatable component support these standard data types.
action- boolean
- button
- button-icon
- currency
- date
- date-local
- email
- location
- number
- percent
- phone
text (default)- url
You can define custom data types by using two approaches.
- Extending LightningDatatable class. Use this approach, if your use case is simple and It doesn't require use of dynamic custom types.
- Use a slot. Use this approach, if you want to use dynamic custom type or require custom styling. Pass the custom types into the lightning-datatable component in a slot.
In this example, we are gonna use first approach, Extending the LightningDatatable class. You can extend from LightningDatatable only to create custom data types.
We are going to define three custom data type - opportunity name in badge format, formatted opp amount and image.
Create a Lightning web component (myCustomDataTypes) and define your custom types in an HTML template in the component folder.
The template can contain complete UI for a simple data type that doesn't require JavaScript.
The template can also embed another lwc component that requires JavaScript logic to display something on UI.
myCustomDataTypes component structure looks like this -
myCustomDataTypes
├──customOppName.html
├──customOppAmount.html
├──customOppContactImage.html
├──myCustomTypeDatatable.js
└──myCustomTypeDatatable.js-meta.xml
/* myCustomDataType.js */
import LightningDatatable from 'lightning/datatable';
import customAmountTemplate from './customOppAmount.html';
import customNameTemplate from './customOppName.html';
import customOppContactPictureTemplate from './customOppContactImage.html';
export default class CustomDataTypes extends LightningDataTable {
static customTypes = {
customOppName : {
template : customNameTemplate,
standardCellLayout : true,
typeAttributes : ["oppName"]
},
customOppAmount : {
template : customAmountTemplate,
standardCellLayout : true,
typeAttributes : ["oppAmount"]
},
customOppContactImage : {
template : customOppContactPictureTemplate,
standardCellLayout : true,
typeAttributes : ["contactpicture"]
}
}
}
Create three files in myCustomDataType lwc component folder for defining UI in the way we want to show data.
Access your data using the typeAttributes.attributename syntax.
/* customOppName.html */
<template>
<lightning-badge label={typeAttributes.oppName}></lightning-badge>
</template>
/* customOppContactImage.html */
<template>
<img src={typeAttributes.contactpicture} width="50" height="40"
class="slds-avatar slds-avatar_circle slds-avatar_large"
alt="Contact photo"/>
</template>
/* customOppAmount.html */
for formatted amount type, we have embedded another lwc component (fancyAmount) that uses JS logic to display amount.
<template>
<c-fancy-amount value={typeAttributes.oppAmount}></c-fancy-amount>
</template>
/* fancyAmount.html */
<template>
<div class={amountColorClass}>
<lightning-formatted-number value={value}
format-style="currency"
currency-code="USD"
currency-display-as="symbol">
</lightning-formatted-number>
<lightning-icon icon-name={iconName}
class="slds-p-horizontal_xx-small"
size="xx-small"
variant={iconVariant}>
</lightning-icon>
({amountRange})
</div>
</template>
/* fancyAmount.js */
import { LightningElement,api } from 'lwc';
export default class FancyAmount extends LightningElement {
@api value;
get amountColorClass() {
return this.value >= 5000 ? 'slds-text-color_success' : 'slds-text-color_error';
}
get iconName() {
return this.value >= 5000 ? 'utility:arrowup' : 'utility:arrowdown';
}
get iconVariant() {
return this.value >= 5000 ? 'success' : 'error';
}
get amountRange() {
return this.value >= 5000 ? 'High' : 'Low';
}
}
Now create a wrapper component to contain your extended datatable component that defines
custom types.
/* DataTableWithCustomDataTypes.html */
<template>
<c-custom-data-types
columns={columns}
data={data}
key-field="id">
</c-custom-data-types>
</template>
/* DataTableWithCustomDataTypes.js*/
import { LightningElement } from 'lwc';
export default class DataTableWithCustomDataTypes extends LightningElement {
columns = [
{label : 'Name', type : 'customOppName', editable : true,
typeAttributes : {
oppName : {fieldName : 'name'}
}
},
{label : 'Stage', fieldName : 'stage', type : 'text'},
{label : 'Amount', type : 'customOppAmount',
typeAttributes : {
oppAmount : {fieldName : 'amount'}
}
},
{label : 'Due Date', fieldName : 'date', type : 'date'},
{label : 'Contact Name', fieldName : 'contactname', type : 'text'},
{label : 'Contact Photo', type : 'customOppContactImage',
typeAttributes : {
contactpicture : {fieldName : 'contactImageUrl'}
},
cellAttributes : { alignment : 'center'}
},
];
data = [
{name: 'Acme Corp.', amount: '200.00', status: 'action:user', contactname : 'Kash Patel', contactImageUrl : 'https://media.istockphoto.com/id/627909282/photo/trust-in-our-business.jpg?s=612x612&w=0&k=20&c=q-hm6in8qxi4wcJoicAlmusSlut7CIjKuOkn2F0BFh0=',
stage:'Value Proposition', date: '2022-02-10'},
{name: 'Norwood Inc.', amount: '500000.00', status: 'action:user', contactname : 'Domnic Roberto', contactImageUrl : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRFL81ekcFmjB5ffX55KyTx-CnSY4zVSZy6Q&s',
stage:'Closed Won', date: '2022-01-20'},
{name: 'Edge Communications', amount: '800000.00', status: 'action:user', contactname : 'Jon kane', contactImageUrl : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGkhrnK-IlLs-5mgYZRYzqBcCkfuqBpQvG4Q&s',
stage:'Closed Won', date: '2022-02-18T00:00:00Z'},
{name: 'Pyramid Construction Inc.', amount: '50000.00', status: 'action:user', contactname : 'Amy Weaver', contactImageUrl : 'https://media.istockphoto.com/id/627909282/photo/trust-in-our-business.jpg?s=612x612&w=0&k=20&c=q-hm6in8qxi4wcJoicAlmusSlut7CIjKuOkn2F0BFh0=',
stage:'Closed ', date: '2022-03-10T00:00:00Z'},
{name: 'GenePoint', amount: '3000', status: 'action:user', contactname : 'Kash Patel', contactImageUrl : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRRFL81ekcFmjB5ffX55KyTx-CnSY4zVSZy6Q&s',
stage:'Negotiation/Review ', date: '2022-05-28T00:00:00Z'},
{name: 'Dickenson plc', amount: '1550000.00', status: 'action:user', contactname : 'Vikas Patel', contactImageUrl : 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGkhrnK-IlLs-5mgYZRYzqBcCkfuqBpQvG4Q&s',
stage:'Closed Won', date: '2022-03-16T00:00:00Z'}
];
}
As you can see while defining columns, we have specified type attribute with our defined custom type
for column Name, Amount and Contact Photo.
- customOppName for Name column
- customOppAmount for Amount column
- customOppContactImage for Contact Photo
Here is the output.
More resources on creating datatable with custom types.
Comments
Post a Comment