1

I am trying to create a datatable using the SLDS but when I use Apex DataTable I cannot get the column names which are <apex:facets> to get in the correct style slds-text-title_caps

Here's my code:

<apex:dataTable value="{!apps}" var="a" id="APM_AppsTable" styleClass="slds-table slds-table_bordered slds-table_cell-buffer">
       <apex:column>
          <div class="slds-text-title_caps">
             <apex:facet name="header">Name</apex:facet>    
          </div>                
          <apex:outputField value="{!a.name}"/>
       </apex:column>

Here's what the SLDS has

    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
      <thead>
        <tr class="slds-text-title_caps">
          <th scope="col">
            <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Account Name">Account Name</div>
          </th>

https://www.lightningdesignsystem.com/components/data-tables

Even if I were to not use an control, how could I iterate through a list of records in visualforce?

1 Answer 1

3

The most reliable way to get all of the data into a data table is to manually build the table yourself. Here is a self-contained example that does this. Doing anything less is marginally unpredictable because of the extra elements that Visualforce throws in.

<apex:page lightningStylesheets="true" standardController="Contact" recordSetVar="recordList">
    <apex:slds />
    <div class="slds-scope">
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate" title="Name">Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Email">Email</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!recordList}" var="record" rows="10">
                    <tr>
                        <th scope="row" data-label="Name">
                            <div class="slds-truncate" title="{!HTMLENCODE(record.Name)}">{!record.Name}</div>
                        </th>
                        <td data-label="Email">
                            <div class="slds-truncate" title="{!HTMLENCODE(record.Email)}">{!record.Email}</div>
                        </td>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </div>
</apex:page>
1
  • this worked perfect!
    – tjcinnamon
    Nov 7, 2017 at 14:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .