Salesforce Lightning ListView Component With Horizontal and Vertical Scrollbar

ListView Allows you to see a filtered list of records such as Accounts, Contacts or Custom Objects.
Here is the Custom Lightning Component that displays a list of records with specified fields.
We can also add scrollbar by using Lightning Design System-Scrollable(make a containing box scrollable when scrolling is available).

Apex Controller:
public class CustomListViewController {
    @AuraEnabled
        public static List<Account> accountListView(){
         List<Account> accountList= [Select Name,AccountNumber,Site,AccountSource,Active__c,AnnualRevenue,CleanStatus,common1__c,common2__c,Concatinate__c from Account];
        return accountList;
        }
}

Lightning Component:
<aura:component Controller="CustomListViewController" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute name="account" Type="Account" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds">
        <div class="slds-scrollable" style="height: 10rem; width: 84rem">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal"><!--Table must be responsive-->
                <thead>
                    <tr class="slds-text-title--caps slds-align-bottom">
                        <th colspan="10">
                            <article class="slds-card">
                                <div class="slds-card__header slds-grid">
                                    <header class="slds-media slds-media--center slds-has-flexi-truncate">
                                        <div class="slds-media__figure">
                                            <span class="slds-icon_container slds-icon-standard-contact" title="My Call List">
                                                <lightning:icon iconName="Standerd:account" size="small" alternativeText="Indicates approval"/>
                                            </span>
                                        </div>
                                        <div class="slds-media__body">
                                            <h2>
                                                <span class="slds-text-heading--small slds-card__header-link">Account ({!v.account.length})</span>
                                            </h2>
                                        </div>
                                    </header>
                                </div>                         
                            </article>
                        </th>
                    </tr>
                    <tr class="slds-text-heading--label ">                 
                        <th class="slds-is-sortable" scope="col"  > <div class="slds-truncate" title="Account Name">Account Name</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Account Number">Account Number</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Site">Site</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Account Source">Account Source</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Active">Active</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Annual Revenue">Annual Revenue</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Clean Status">Clean Status</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="common1">common1</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="common2">common2</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Concatinate">Concatinate</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="DunsNumber">DunsNumber</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Jigsaw">Jigsaw</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Description">Description</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="Industry">Industry</div></th>
                        <th class="slds-is-sortable" scope="col" ><div class="slds-truncate" title="mydate">mydate</div></th>
                </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.account}" var="account">
                        <tr class="slds-hint-parent">                     
                            <th scope="row"  class="slds-cell-edit" data-label="Account Name">
                                <div class="slds-truncate" title="{!account.Name}">
                                    <a href="javascript:void(0);" role="menuitem" tabindex="-1" data-record="{!account.Id}" onclick="{!c.doView}">
                                        <span class="slds-truncate">{!account.Name}</span>
                                    </a>
                                </div>
                            </th>
                            <td data-label="Account Number">
                                <div class="slds-truncate" title="Account Number">{!account.AccountNumber}                                 </div>
                            </td>
                            <td data-label="Site">
                                <div class="slds-truncate" title="Site">{!account.Site}</div>
                            </td>
                            <td data-label="Account Source">
                                <div class="slds-truncate" title="Account Source">{!account.AccountSource}                                     </div>
                            </td>
                            <td data-label="Active">
                                <div class="slds-truncate" title="Active">{!account.Active__c}</div>
                            </td>
                            <td data-label="Annual Revenue">
                                <div class="slds-truncate" title="Annual Revenue">{!account.AnnualRevenue}                                   </div>
                            </td>
                            <td data-label="Clean Status">
                                <div class="slds-truncate" title="Clean Status">{!account.CleanStatus}</div>
                            </td>
                            <td data-label="common1">
                                <div class="slds-truncate" title="common1">{!account.common1__c}</div>
                            </td>
                           <td data-label="common2">
                                <div class="slds-truncate" title="common2">{!account.common2__c}</div>
                            </td>
                            <td data-label="Concatinate">
                                <div class="slds-truncate" title="Concatinate">{!account.Concatinate__c}</div>
                            </td>
                            <td data-label="common1">
                                <div class="slds-truncate" title="Duns Number">{!account.DunsNumber}</div>
                            </td>
                           <td data-label="common2">
                                <div class="slds-truncate" title="Jigsaw">{!account.Jigsaw}</div>
                            </td>
                            <td data-label="Concatinate">
                                <div class="slds-truncate" title="Concatinate">{!account.Description}</div>
                            </td>
                             <td data-label="common1">
                                <div class="slds-truncate" title="Number Of Employees">                                                                        {!account.NumberOfEmployees}</div>
                            </td>
                           <td data-label="common2">
                                <div class="slds-truncate" title="Industry">{!account.Industry}</div>
                            </td>
                            <td data-label="Concatinate">
                                <div class="slds-truncate" title="mydate__c">{!account.mydate__c}</div>
                            </td>
                            </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </div>
</aura:component>
JavaScript Controller:
({
doInit : function(component, event, helper) {
        var action = component.get("c.accountListView");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                //alert("From server: " + response.getReturnValue());
                component.set("v.account",response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    doView: function(component, event, helper) {
        //console.log(event.currentTarget.dataset.record);
        var editRecordEvent = $A.get("e.force:navigateToSObject");
        editRecordEvent.setParams({
            "recordId": event.currentTarget.dataset.record
        });
        editRecordEvent.fire();
    }
  })

OutCome: