Understanding apex:facet Component in Visualforce

The <apex:facet> component is used to customize specific sections (facets) of other Visualforce components, such as tables, panels, and charts. It allows developers to override or enhance default content in components.


Why Use <apex:facet>?

  • Provides a way to inject custom content (like headers, footers, or captions) into complex components.
  • Useful when customizing visual elements like table headers, chart labels, or panel titles.
  • Enhances UI by letting you control specific named parts of a component.

Basic Syntax

xmlCopyEdit<apex:dataTable value="{!accounts}" var="acc">
    <apex:facet name="header">Account List</apex:facet>
    <apex:column value="{!acc.Name}"/>
</apex:dataTable>

In this example, "Account List" is shown as the header above the data table.


Common Facet Names by Component

ComponentFacet Names You Can Use
apex:dataTableheader, footer
apex:panelGridheader, footer
apex:chartcaption, legend, xAxis, etc.

Example: Custom Column Header in a Table

xmlCopyEdit<apex:dataTable value="{!contacts}" var="c">
    <apex:column>
        <apex:facet name="header">Name</apex:facet>
        {!c.Name}
    </apex:column>
    <apex:column>
        <apex:facet name="header">Email</apex:facet>
        {!c.Email}
    </apex:column>
</apex:dataTable>

Use Cases

  • Custom Table Headers/Footers: Add labels or summaries to your data tables.
  • PanelGrid Titles: Define styled headers or footers for grid layouts.
  • Charts: Customize captions, legends, and axes for better data visualization.