UI -
<aura:component controller="DataTableServerContrl">
    <aura:attribute name="isPaginationEnabled" type="Boolean" default="true"/>
	<aura:attribute name="opportunities" type="Sobject[]"/>
	<aura:attribute name="fieldApiNames" type="String[]"/>
	<aura:attribute name="fieldLabels" type="String[]"/>
	<aura:attribute name="limitSize" type="String" description="Records limit per page."/>
	<aura:attribute name="offsetSize" type="String" description="Records needs to be skipped." default="0"/>
	<aura:attribute name="totalSize" type="String" description="Total records in the object." default="0"/>
	<aura:attribute name="hasPrevious" type="Boolean" description="To disable First and Previous buttons." default="false"/>
	<aura:attribute name="hasNext" type="Boolean" description="To disable First and Previous buttons." default="true"/>
	<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:handler name="oppCloseEvnt" event="c:OppPopupCloseEvent" action="{!c.closePopup}"/>
    <aura:handler name="popEvent" event="c:PopupAppEvent" action="{!c.createOppPopup}"/>
	<div class="demo-only demo--inverse" id="loadingStat" style="display:block;">
	  <!--<div class="slds-spinner_container slds-is-fixed">
	    <div role="status" class="slds-spinner slds-spinner_medium">
	      <span class="slds-assistive-text">Loading</span>
	      <div class="slds-spinner__dot-a"></div>
	      <div class="slds-spinner__dot-b"></div>
	    </div>
	  </div>-->
	</div>
    <div class="slds-grid slds-m-top--xx-small">
        <div class="slds-form--inline slds-col"/>
        <div class="slds-form--inline slds-col">
            <div class="slds-form-element__control">
                <div class="slds-form-element__control">
                    <div class="slds-form-element">
                        <ui:spinner aura:id="dataTableSpinner" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slds-grid">
        <div class="slds-col slds-scrollable--x slds-m-top--x-small" aura:id="dataTableId">
            <table class="slds-table slds-table_bordered slds-table_cell-buffer">
              <thead class="slds-theme--shade">
                <tr class="slds-text-title_caps">
                  <aura:iteration items="{!v.fieldLabels}" var="theLabel">
                      <th scope="col" class="">
                        <div class="slds-truncate" title="{!theLabel}">{!theLabel}</div>
                      </th>
                  </aura:iteration>
                </tr>
              </thead>
              <tbody>
              <aura:iteration items="{!v.opportunities}" var="opp">
                    <tr>
                      <aura:iteration items="{!v.fieldApiNames}" var="theFieldApi">
                          <td>
                            <div class="slds-truncate" title="Cloudhub"><c:RecordComp record="{!opp}" fldApiName="{!theFieldApi}"/></div>
                          </td>
                      </aura:iteration>
                    </tr>
              </aura:iteration>
              </tbody>
            </table>
        </div>
    </div>
    <aura:if isTrue="{!v.totalSize > 0}">
        <div class="slds-grid slds-m-top--x-small slds-scrollable--x">
            <div class="slds-button-group slds-align_absolute-center" role="group">
              <button type="button" class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasPrevious)}" onclick="{!c.onFirst}">First</button>
              <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasPrevious)}" onclick="{!c.onPrevious}">Previous</button>
              <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasNext)}" onclick="{!c.onNext}">Next</button>
              <button class="slds-button slds-button_neutral" disabled="{!!(v.isPaginationEnabled && v.hasNext)}" onclick="{!c.onLast}">Last</button>
            </div>
        </div>
	</aura:if>
    <div id="oppDialog">
    	{!v.body}
    </div>
</aura:component>

Controller JS -
({
	onInit : function(component, event, helper) {
		helper.doInit(component, event);
	},
	onFirst : function(component, event, helper) {
		helper.handleOnFirst(component, event);
	},
	onPrevious : function(component, event, helper) {
		helper.handleOnPrevious(component, event);
	},
	onNext : function(component, event, helper) {
		helper.handleOnNext(component, event);
	},
	onLast : function(component, event, helper) {
		helper.handleOnLast(component, event);
	},
    showSpinner : function (component, event, helper) {
        helper.handleShowSpinner(component, event);
    },
    hideSpinner : function (component, event, helper) {
        helper.handleHideSpinner(component, event);
    },
    createOppPopup : function (component, event, helper) {
        helper.handleCreateOppPopup(component, event);
    },
	closePopup : function(cmp, event, helper) {
		helper.handleClosePopup(cmp, event);
	}
})

Helper JS -
({
	doInit : function(cmp, event) {
		this.handleFetchOpps(cmp);
	},
	handleFetchOpps : function(cmp) {
		var action = cmp.get("c.fetchOpportunities");
		action.setParams({ limitSize : cmp.get("v.limitSize"), offsetSize :  cmp.get("v.offsetSize")});
		action.setCallback(this, function(response) {
			var state = response.getState();
			console.log('***state: '+state);
            if (state === "SUCCESS") {
                // Alert the user with the value returned
                // from the server
                console.log("From server: " + JSON.stringify(response.getReturnValue()));
                var res = response.getReturnValue();
                console.log(res.records);
                //alert(JSON.stringify(res.records));
                cmp.set("v.opportunities",JSON.parse(JSON.stringify(res.records)));
                //alert(cmp.get("v.opportunities").length);
                console.log(JSON.stringify(res.fieldApiAndDataTypes));
                cmp.set("v.fieldApiNames",res.fieldApiAndDataTypes);
                console.log(res.fieldLabels);
                cmp.set("v.fieldLabels",res.fieldLabels);
                console.log('totalSize: '+res.totalSize);
                cmp.set("v.totalSize",res.totalSize);
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
		});
		$A.enqueueAction(action);
	},
	handleOnFirst : function(cmp, event) {
		cmp.set("v.offsetSize","0")
		this.disableEnableButtons(cmp);
		this.handleFetchOpps(cmp);
	},
	handleOnPrevious : function(cmp, event) {
		var offsetSize = cmp.get("v.offsetSize");
		var limitSize = cmp.get("v.limitSize");
		var newOffsetSize = Number(offsetSize) - Number(limitSize);
		cmp.set("v.offsetSize",newOffsetSize.toString());
		console.log(cmp.get("v.offsetSize"));
		this.disableEnableButtons(cmp);
		this.handleFetchOpps(cmp);
	},
	handleOnNext : function(cmp, event) {
		var offsetSize = cmp.get("v.offsetSize");
		var limitSize = cmp.get("v.limitSize");
		var newOffsetSize = Number(offsetSize) + Number(limitSize);
		cmp.set("v.offsetSize",newOffsetSize.toString())
		console.log(cmp.get("v.offsetSize"));
		this.disableEnableButtons(cmp);
		this.handleFetchOpps(cmp);
	},
	handleOnLast : function(cmp, event) {
		var offsetSize = cmp.get("v.offsetSize");
		var limitSize = cmp.get("v.limitSize");
		var totalSize = cmp.get("v.totalSize");
		var reminder = Number(totalSize) % Number(limitSize);
		if(Number(reminder) == 0) {
			var newOffsetSize = Number(totalSize) - Number(limitSize);
			cmp.set("v.offsetSize",newOffsetSize.toString());
		}
		else {
			var newOffsetSize = Number(totalSize) - Number(reminder);
			cmp.set("v.offsetSize",newOffsetSize.toString());
		}
		this.disableEnableButtons(cmp);
		this.handleFetchOpps(cmp);
	},
	disableEnableButtons : function(cmp) {
		var offsetSize = cmp.get("v.offsetSize");
		var limitSize = cmp.get("v.limitSize");
		var totalSize = cmp.get("v.totalSize");
		var reminder = Number(totalSize) % Number(limitSize)
		console.log('offsetSize: '+offsetSize);
		console.log('limitSize: '+limitSize);
		console.log('totalSize: '+totalSize);
		console.log('reminder: '+reminder);
		if(Number(offsetSize) > 0) {
			cmp.set("v.hasPrevious",true);
		}
		if(Number(offsetSize) + Number(limitSize) >= Number(totalSize)) {
			cmp.set("v.hasNext",false);
		}
		if(Number(offsetSize) == 0) {
			cmp.set("v.hasPrevious",false);
		}
		if(Number(offsetSize) + Number(limitSize) < Number(totalSize)) {
			cmp.set("v.hasNext",true);
		}
	},
    handleShowSpinner : function (component, event) {
        var spinner = component.find('dataTableSpinner');
        var evt = spinner.get("e.toggle");
        evt.setParams({ isVisible : true });
        evt.fire();
        $A.util.toggleClass(component.find('dataTableId'), "waitingDatatable");
        component.set("v.isPaginationEnabled",false);
        document.getElementById("loadingStat").style.display = "block";
    },
    handleHideSpinner : function (component, event) {
        var spinner = component.find('dataTableSpinner');
        var evt = spinner.get("e.toggle");
        evt.setParams({ isVisible : false });
        evt.fire();
        $A.util.toggleClass(component.find('dataTableId'), "waitingDatatable");
        component.set("v.isPaginationEnabled",true);
        document.getElementById("loadingStat").style.display = "none";
    },
    handleCreateOppPopup : function (cmp, event) {
        console.log(event.getParam("oppId"));
        $A.createComponent(
            "c:OpportunityForm",
            {
                "oppId": event.getParam("oppId")
            },
            function(res){
                if (cmp.isValid()) {
                    cmp.set("v.body", res);
                }
            }
        );
    },
    handleClosePopup : function(cmp, event) {
		cmp.set("v.body", null);
		this.handleFetchOpps(cmp);
	}
})

CSS -
.THIS {
}
.THIS .waitingDatatable {
    opacity: t(dataTableOpacity);
}