The SLDS table header row can be fixed using standard classes. There are two classes that are important slds-table–header-fixed_container and slds-cell-fixed and i created a working example on github please refer this link for sample code Github link
The detailed explanation is on link SLDS framework data-table with fixed header without javascript
Edited to provide code and explanation:
The slds-table--header-fixed_container class is not documented in SLDS framework, it provides some padding to the table container and relative position. The slds-cell-fixed class is used inside th element it provides absolute position to table header and also responsible for giving top:0 within that container.
The sample code is
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
<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>
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</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>
Hope this will help @glls
lightning:dataTable
with the real datatable like functionality will be up by Winter '18 as I just saw in a roadmap somewhere. As of now, if you want fixed header, then you probably would have to split the table into two separate table and implement the fixed header functionality. (In the mean time I would suggest you to go with datatable as it's Locker Service compatible, you have afixedHeader
property in-built in it.)lightning:tabset
which would be coming in Winter '18 release as per their roadmap.[Hopefully, there would be native SF functionalities like sorting, fixed header and all..] For time being you may use :jQuery datatable which is Locker Service compatible. (There's an in-built fixedHeader feature for jQuery datatable)