+ Start a Discussion

Need Help in Building Tables in lightning design system

I wanted to build following kind of table in salesforce lightning.
Terms and ConditionsOther 1Other 2

Could anyone suggest how to proceed and help me out with any sample code.
Arun pattnaik 17Arun pattnaik 17
Use a html table with iteration as below.
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <tr class="slds-line-height_reset">
                <aura:iteration items="{!v.headerLIst}" var="item" indexVar="key">
                    <th class="slds-text-title_caps" scope="col">
                        'define your headers'
           <aura:iteration items="{!v.rowList}" var="item" indexVar="rowKey">
                <tr class="slds-hint-parent" data-label="{!item.name}" onclick="{!v.onRowClick}">
                    <th data-label="Opportunity Name" scope="row">
                        <div class="slds-truncate" title=""  >{!item.name}</div>
                    <aura:iteration items="{!item.columns}" var="item1" indexVar="key">
                        'List your columns'

Define a json accordingly to support your structure sompething similar to this- 

   var allValues = response.getReturnValue();
            var opt=[];
                for (var i = 0; i < allValues.length; i++) {
                        id: rec[1],
                        name: rec[0],
                        columns:helper.getColumns(component, event, helper,rec[0]) //list out the json structure for the columns you want to show.
                component.set("v.rowList", opt);