You need to sign in to do that
Don't have an account?
prathibha kr
scrollable table in lightning
Hi,
how to make a fixed header scrollable table in lightning
how to make a fixed header scrollable table in lightning
function readOnly(count){ }
You need to sign in to do that
Don't have an account?
The tweak is to use standard hidden classes like slds-table–header-fixed_container to create the table.
The second important class is slds-cell-fixed which is applied to div inside the element. These classes are the part of Lightning Design System.
Please create the lightning component and try this code.
<aura:component >
<div class="slds-table--header-fixed_container" style="height:450px;">
<div class="slds-scrollable_y" style="height:100%;">
<table class="slds-table slds-table_bordered slds-table--header-fixed">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate slds-cell-fixed" title="Opportunity Name">Opportunity Name</div>
</th>
<th scope="col">
<div class="slds-truncate slds-cell-fixed" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate slds-cell-fixed" title="Close Date">Close Date</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">Cloudhub</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015">4/14/2015</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</aura:component>
Refer this URL:
https://www.lightningdesignsystem.com/components/data-tables/
https://salesforce.stackexchange.com/questions/183660/slds-table-with-fixed-header
Please let me know if you have any query.
Please mark it as best Answer if you find it helpful.
Thank You
Ajay Dubedi