Your Page Title
🔍

    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.