Basically typeAttributes are the one of the major building blocks of <lightning-datatable>(in LWC) or <lightning:datatable> (in Aura).This will help us to format the data types /output display and attaching some of actions to your data displayed in table at each cell level ,row level or at the columns level.
Sample Column Code With typeAttributes:
Please watch this space more useful stuff.
Please follow,bookmark,subscribe this site to receive daily updates.
Facebook - https://www.facebook.com/ILoveCodingYou/?ref=bookmarks
The typeAttributes are attached to each columns data type when your specifying the columns for your data table in your java script file.
Each typeAttributes is having pre-defined set of attributes/properties basis on the data type of your column (your defining at the time of columns for table).
Usually each column definition will have below properties.
{
label: 'Issue Type', //Column Header Shown in Table fieldName: 'Issue_type__c', //Api name of filed type:"text", // tells text,date,url,email etc.. initialWidth: 90 //column width }
After attaching the typeAttributes the sample code looks like below.The sample code will create a column with name Case Number and Looks like a button ,on click of it you can fire rowAction automatically.
{ label: 'Case Number', type: 'button', initialWidth: 90, typeAttributes: { iconName: 'action:preview', title: 'Preview', variant: 'border-filled', alternativeText: 'View', disabled: false, label: { fieldName: 'CaseNumber' }, // to assign the value dynamically name: { fieldName: 'Case_Age__c' }, // to assign the value dynamically } }, //other colums
At any time if you want to set any of the typeAttribute object attribute dynamically please use below syntax
As I have mentioned on the top each typeAttributes will have some set of properties based on the data type of your column.
attributeName: { fieldName: 'api name of column/any other variable' }
As I have mentioned on the top each typeAttributes will have some set of properties based on the data type of your column.
If you want to know what are the available attributes for each datatype please refer below.
Sample Column Code With typeAttributes:
const datatableColums =[ //Column 1 of type Url { label: 'Customer Name', fieldName: 'nameUrl', type: 'url', typeAttributes: { label: { fieldName: 'Name' }, target: '_top' } }, //Column 2 of type button { label: 'PNR', type: 'button', initialWidth: 90, typeAttributes: { iconName: 'action:preview', title: 'Preview', variant: 'border-filled', alternativeText: 'View', disabled: false, label: { fieldName: 'Pnr__c' }, name: { fieldName: 'Pnr__c' }, } }, //Column 3 of type date { label: "Closed Date", fieldName: "ClosedDate", type: "date", typeAttributes:{ weekday: "long", year: "numeric", month: "long", day: "2-digit" } } ]
Please watch this space more useful stuff.
Please follow,bookmark,subscribe this site to receive daily updates.
Facebook - https://www.facebook.com/ILoveCodingYou/?ref=bookmarks
Hope this helps you..Enjoy..!
Thank you for the article. Really helpful
ReplyDelete