How to display data in table in lightning component

  • I'm creating lightning component to display data in nice format in a table. But data is not coming in table format.

    Below is my code:

    Component:

    <aura:component controller="ContactsController">
        <ltng:require styles="{!$Resource.SLDS090}"/>
        <head>
            <title>This will display contacts whose's birthday is today.</title>
        </head>
        <aura:attribute name="contacts" type="List" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
        <!-- <div class="container">-->
        <div class="slds"> 
    
        <table class="slds-table slds-table--bordered slds-table--striped">
            <thead>
                <tr>
                    <th scope="col"><span class="slds-truncate">Date</span></th>
                    <th scope="col"><span class="slds-truncate">Contact Name</span></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.contacts}" var="contact">
                    <tr>
                        <td>{!contact.Birthdate}</td>
                        <td>{!contact.Name}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
            </div>
    </aura:component>
    

    Below is my result:

    enter image description here

    When you say "data is not coming in table format" what do you mean? Can you post the HTML markup generated by your above code?

    Hi D.S. I have added the generated data format

  • I was able to reproduce the problem. Try including the stylesheets as mentioned below

     <ltng:require styles="{! $Resource.SLDS090 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM