+ Start a Discussion
Christos KolonisChristos Kolonis 

How can i render a field conditionally in LWC

Hello,

I have a LWC which includes in it's columns several fields which get their previewed data by an apex. Can i render those fields based on criteria? Now i am populating 2 fields (each one is populated based on criteria in apex) based on apex criteria. But can i hide the one that is left blank?
My js columns are these:
 
const columns = [
 { label: invoiceNum, fieldName: 'InvoiceNumber' , type:'text'},
{ label: invoicePer, fieldName: 'InvoicePeriod', type: 'text' },
{ label: invoiceType, fieldName: 'InvoiceType', type: 'text' },
{ label: invoiceTA, fieldName: 'InvoiceTotalAmount', type: 'number' },
{ label: relatedSrv, fieldName: 'RelatedServices', type: 'text' },
{ label: invoiceDt, fieldName: 'InvoiceDate', type: 'date' },
{ label: invoiceDDt, fieldName: 'InvoiceDueDate', type: 'date' },
.....

For example, can i hide the invoiceDDt if it's not populated?

Thank you!
VinayVinay (Salesforce Developers) 
Hi Christos,

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content. template if:true|false directive is used to display conditional data.

Check below examples for conditional rendering in LWC.
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_conditional
https://rajvakati.com/2019/01/27/lightning-web-component-conditional-rendering/
https://salesforce.stackexchange.com/questions/274776/lwc-conditional-rendering-alternative-for-fetching-the-initial-database-value
https://www.sfdcpoint.com/salesforce/template-iftrue-conditional-rendering-lwc/#:~:text=To%20render%20HTML%20conditionally%2C%20add,used%20to%20display%20conditional%20data.

Thanks,
Christos KolonisChristos Kolonis
Hello Vinay,

As far as i can understand this is used to render or not a whole datatable, but i need to render conditionally two certain elements of the table. Am i understanding it wrong? I can use the approach you mentioned and achieve the functionally i'm mentioning?

Thank you.