The <apex: facet> is another important VF page component that acts as a placeholder for the content rendered in a specific part of the parent component. The header and footer of the <apex: dataTable> component are examples for which we can use the <apex: facet> component.
We use the <apex: facet> component for getting the user input for a controller property or method that doesn't correspond to a field on a Salesforce object.
The existence of the <apex: facet> component in the body of the parent component is possible only when the parent supports facets.
The facet component's name should match one of the pre-defined facet names on the parent component.
The name determines the place where the content of the facet component is rendered.
The appearance of the parent component doesn't depend on the order of the facet within the parent component body.
The <apex: facet> component has only one attribute, which is given below:
1. name
The name is a string-type attribute that specifies the facet's name to be rendered.
Syntax:
<apex:facet name="header">Email</apex:facet>
Let's take an example to understand how we can use the <apex: facet> component on the VF page:
ApexFacetExample.vfp
<!--apex page with Account standard controller-->
<apex: page standardController="Account">
<!-- user page block for showing contact information-->
<apex:pageBlock title="Contact Information">
<!--apex dataTable to show information in tabular format-->
<apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4" border="1">
<!-- apex column with apex facet-->
<apex: column >
<apex:facet name="header">First Name</apex:facet>
{!contact.FirstName}
</apex: column>
<apex: column >
<apex:facet name="header">Last Name</apex:facet>
{!contact.LastName}
</apex: column>
<apex: column >
<apex:facet name="header">Email</apex:facet>
{!contact.Email}
</apex: column>
<apex: column >
<apex:facet name="header">Phone</apex:facet>
{!contact.Phone}
</apex: column>
</apex:dataTable>
</apex:pageBlock>
</apex: page>
