+ Start a Discussion
Christos KolonisChristos Kolonis 

How can i render a field conditionally in LWC


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.

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.