# Best Practices for Using Component Facets

A facet consists of content in an area of a Visualforce component that provides contextual information about the data that is presented in the component. For example, `<apex:dataTable>` supports facets for the header, footer, and caption of a table, while `<apex:column>` only supports facets for the header and footer of the column. The `<apex:facet>` component allows you to override the default facet on a Visualforce component with your own content. Facets only allow a single child within the start and close tags.

:::note
Not all components support facets. Those that do are listed in the [Standard Visualforce Component Reference](/docs/platform/salesforce-pages-developers-guide/guide/pages-compref.md).
:::

When defining an `<apex:facet>`, it is always used as the child of another Visualforce component. The `name` attribute on the facet determines which area of the parent component is overridden.

## Example: Using Facets with `<apex:dataTable>`

The following markup shows how the `<apex:dataTable>` component can be modified with `<apex:facet>`:

```markupex1
<apex:page standardController="Account">
    <apex:pageBlock>
        <apex:dataTable value="{!account}" var="a">
            <apex:facet name="caption"><h1>This is 
              {!account.name}</h1></apex:facet>
            <apex:facet name="footer"><p>Information 
              Accurate as of {!NOW()}</p></apex:facet>
            <apex:column>
                <apex:facet name="header">Name</apex:facet>
                <apex:outputText value="{!a.name}"/>
            </apex:column>
            
            <apex:column>
                <apex:facet 
              name="header">Owner</apex:facet>
                <apex:outputText value="{!a.owner.name}"/>
            </apex:column>
        </apex:dataTable>
    </apex:pageBlock>        
</apex:page>

```

:::note
For this page to display account data, the ID of a valid account record must be specified as a query parameter in the URL for the page. For example:

```nolang
https://MyDomain_login_URL/apex/facet?id=001D000000IRosz
```
:::

The page displays as follows:

![An example of a facet](https://a.sfdcstatic.com/developer-website/sfdocs/platform/media/salesforce-pages-developers-guide/pages_facet_sample.jpg "Extending \<apex\:dataTable> with a Facet")

## Using Facets with `<apex:actionStatus>`

Another component that can use a facet is `<apex:actionStatus>`. The `<apex:actionStatus>` component can be extended to display an indicator whenever a page is being refreshed. For example, you can define a progress wheel with the following markup:

```markupex2
<apex:page controller="exampleCon">
    <apex:form >
        <apex:outputText value="Watch this counter: {!count}" id="counter"/>
        <apex:actionStatus id="counterStatus">
            <apex:facet name="start">
                 <img src="{!$Resource.spin}"/> <!-- A previously defined image -->
            </apex:facet>
        </apex:actionStatus>    
        <apex:actionPoller action="{!incrementCounter}" rerender="counter"
            status="counterStatus" interval="7"/>
    </apex:form>
</apex:page>
```

The associated controller updates the counter:

```controllerex2
public class exampleCon {
    Integer count = 0;
                        
    public PageReference incrementCounter() {
            count++;
            return null;
    }
                        
    public Integer getCount() {
        return count;
    }
}
```

The page displays as follows:

![A refresh counter stating, "Watch this counter: 1"](https://a.sfdcstatic.com/developer-website/sfdocs/platform/media/salesforce-pages-developers-guide/pages_facet_ajax_capture.png "Extending \<apex\:actionStatus> with a Facet")

**See Also**

- [Using Static Resources](/docs/platform/salesforce-pages-developers-guide/guide/pages-resources.md)