Saturday, May 15, 2021

Sample Lightning Component HTML Table using tr and td

 <div class="slds-background-clr slds-text-heading_small">

            Incidents

        </div>

        <div class="slds-p-right_x-large">

            <table class="slds-table slds-table--bordered slds-table_fixed-layout">

                <thead>

                    <tr class="slds-text-title--caps">

                        <th scope="col">

                            <div class="slds-truncate" title="Incident Number">Incident Number</div>

                        </th>

                        <th scope="col">

                            <div class="slds-truncate" title="Incident category">Incident Category</div>

                        </th>

                        <th scope="col">

                            <div class="slds-truncate" title="Incident Sub Category">Incident Sub Category</div>

                        </th>

                        <th scope="col">

                            <div class="slds-truncate" title="Incident Created Date">Incident Created Date</div>

                        </th>

                    </tr>

                </thead>

                <tbody>

                    <aura:iteration items="{!v.ObjInc}" var="inc">

                        <tr>

                            <td data-label="Incident Number">

                                <div class="slds-truncate">{!inc.Alleged_Person_s_Responsible__r.Name}</div>

                            </td>

                            <td data-label="Incident category">

                                <div class="slds-truncate">{!inc.Alleged_Person_s_Responsible__r.Incident_Type__c}</div>

                            </td>

                            <td data-label="Incident Sub Category">

                                <div class="slds-truncate">{!inc.Alleged_Person_s_Responsible__r.Incident_Sub_Type__c}</div>

                            </td>

                            <td data-label="Incident Created Date">

                                <div class="slds-truncate">{!inc.Alleged_Person_s_Responsible__r.CreatedDate}</div>

                            </td>

                        </tr>

                        

                    </aura:iteration>

                </tbody>

            </table>

        </div>

        <br/>

        <div class="slds-background-clr slds-text-heading_small">

            Violators (Associates)

        </div>

        <div class="slds-p-right_x-large">

            <table class="slds-table slds-table--bordered slds-table_fixed-layout">

                <thead>

                    <tr class="slds-text-title--caps">

                        <th scope="col">

                            <div class="slds-truncate" title="First Name">First Name</div>

                        </th>

                        <th scope="col">

                            <div class="slds-truncate" title="Last Name">Last Name</div>

                        </th>

                        <th scope="col">

                            <div class="slds-truncate" title="Relationship to Individual">Relationship to Individual</div>

                        </th>

                        <th scope="col">

                            <div class="slds-truncate" title="Provider Name">Provider Name</div>

                        </th>

                        <th scope="col">

                            <div class="slds-truncate" title="Priovider #">Priovider #</div>

                        </th>

                    </tr>

                </thead>



                <tbody>

                    <aura:iteration items="{!v.ObjInc}" var="violator">

                        <tr>

                            <td data-label="First Name">

                                <div class="slds-truncate">{!violator.First_Name__c}</div>

                            </td>

                            <td data-label="Last Name">

                                <div class="slds-truncate">{!violator.Last_Name__c}</div>

                            </td>

                            <td data-label="Relationship to Individual">

                                <div class="slds-truncate">{!violator.Relationship_to_Individual__c}</div>

                            </td>

                            <td data-label="Provider Name">

                                <div class="slds-truncate">{!violator.Provider_Agency__c}</div>

                            </td>

                            <td data-label="Priovider #">

                                <div class="slds-truncate">{!violator.Name}</div>

                            </td>

                        </tr>

                        

                    </aura:iteration>

                </tbody>

            </table>

        </div>

        <br/>

No comments:

Post a Comment

CSS Styling

Styling: 1. Inline Styling: < div style = "font-size: 2rem;font-weight: 400;" > Good Evening </ div > 2. Usi...