Understanding Component in Visualforce

The <apex:column> component is used within data tables to define columns. It works alongside the <apex:dataTable> component to display rows and columns dynamically from a data source like a list of objects.


Syntax

xmlCopyEdit<apex:dataTable value="{!yourList}" var="item">
    <apex:column value="{!item.Name}" />
</apex:dataTable>

Key Attributes

AttributeDescription
valueThe value to display in the column.
headerValueOptional. A label for the column header.
widthOptional. Width of the column.
styleOptional. CSS styles for the column.
styleClassOptional. CSS class for styling.

Example 1: Display a Simple Table

xmlCopyEdit<apex:page controller="AccountController">
    <apex:dataTable value="{!accounts}" var="acc">
        <apex:column value="{!acc.Name}" headerValue="Account Name" />
        <apex:column value="{!acc.Industry}" headerValue="Industry" />
    </apex:dataTable>
</apex:page>
  • This example shows a table of Account records with Name and Industry columns.

Example 2: Using Custom Components in Column

xmlCopyEdit<apex:dataTable value="{!accounts}" var="acc">
    <apex:column headerValue="Account Name">
        <apex:outputLink value="/{!acc.Id}">{!acc.Name}</apex:outputLink>
    </apex:column>
</apex:dataTable>
  • You can embed other components (like links) inside <apex:column> to customize each cell.

When to Use <apex:column>

  • When you want to define each column individually in a table.
  • Ideal for showing specific fields and adding custom logic inside cells.

Best Practices

  • Always set headerValue for clarity.
  • Use custom content inside <apex:column> for more control over cell display.
  • Combine with <apex:dataTable> for structured, readable output.