<aura:component controller="fetchContactDetails" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

<aura:attribute   name="Tasklist" type="Task[]" />
<aura:attribute name="mycolumns" type="List"/>

<aura:attribute name="sortedBy" type="String" default="Name"/>
<aura:attribute name="sortedDirection" type="String" default="asc"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="force:refreshView" action="{!c.doInit}" />
<aura:handler event="force:refreshView" action="{!c.isRefreshed}" />


<aura:attribute name="isSending" type="boolean" />

<!-- Attribute Declration For Pagination -->
<aura:attribute name="PaginationList" type="Contact"/>
<aura:attribute name="startPage" type="Integer" />
<aura:attribute name="endPage" type="Integer"/>
<aura:attribute name="totalRecords" type="Integer"/>
<aura:attribute name="pageSize" type="Integer" default="10"/>
<!-- Attribute Declration For Pagination End-->




<div class="slds-scrollable_y" style="height: 30rem; width: 55rem;">
    <lightning:datatable
                         data="{! v.PaginationList }"
                         class="slds-m-top_medium"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"
                         onsort="{!c.updateColumnSorting}"
                         sortedBy="{!v.sortedBy}"
                         sortedDirection="{!v.sortedDirection}"
                         onrowaction="{!c.EditRecord}"
                         onrowselection="{! c.getSelectedName }"/>
</div>
<div class="slds-m-top_medium" >
    <lightning:buttonGroup >
        <lightning:button label="Previous" disabled="{!v.startPage == 0}"
                          onclick="{!c.previous}" variant="brand"
                          iconName='utility:back'/>
        &nbsp; &nbsp; &nbsp;
        <lightning:button label="Next" disabled="{!v.endPage >= v.totalRecords}"
                          onclick="{!c.next}" variant="brand"
                          iconName='utility:forward' iconPosition='right'/>
    </lightning:buttonGroup>
</div>

controller.js:
       ({
doInit : function(component, event, helper) {

    component.set("v.mycolumns",[
        {type: "button"  , typeAttributes: {
            label: 'Edit',
            name: 'Edit',
            title: 'Edit',
            disabled: false,
            value: 'edit',
            iconPosition: 'left'
        }},

        {label: 'Priority', fieldName: 'Priority', type: 'list',sortable: true },
        {label: 'Status', fieldName: 'Status', type: 'list',sortable: true },
        {label: 'Subject', fieldName: 'Subject', type: 'string',sortable: true,
         cellAttributes: { class: { fieldName: 'Priority' } }},
        {label: 'Createddate', fieldName: 'CreatedDate', type: 'Date',sortable: true},
        {label: 'Owner Name', fieldName: 'OwnerName', type: 'String',sortable: true},
    ] );

        var action = component.get("c.fetchTasklist");

        /* It should be outside the callback and before the enqueue method call, and no need to do this if there is no parameter to pass.*/
        action.setParams({});

        action.setCallback(this, function(response){
        var pageSize = component.get("v.pageSize");
        console.log('action called');
        var state = response.getState();
        if (state === "SUCCESS") {
        var taskList = response.getReturnValue();
        console.log('taskList -- > '+taskList);

        taskList.forEach(function(task){


        console.log('for each -- > ');
        try{
        for(var propName in task) {
        var propValue = task[propName];
                  console.log(propName,propValue);

}
console.log('owner -- > '+task['Owner']['Name']);

task['OwnerName'] = task['Owner']['Name'];
console.log('Phone -- > '+task['Who']['Phone']);
 }catch(e){}
 });
component.set("v.Tasklist", taskList);

component.set("v.totalRecords", component.get("v.Tasklist").length);
// set star as 0
component.set("v.startPage",0);

component.set("v.endPage",pageSize-1);
var PaginationList = [];
for(var i=0; i< pageSize; i++){
if(component.get("v.Tasklist").length> i)
    PaginationList.push(response.getReturnValue()[i]);
}
component.set('v.PaginationList', PaginationList);
component.set('v.isSending',false);


helper.sortData(component, component.get("v.sortedBy"),
   component.get("v.sortedDirection"));

}



});
 $A.enqueueAction(action);

},
updateColumnSorting: function (cmp, event, helper) {
    var fieldName = event.getParam('fieldName');
    var sortDirection = event.getParam('sortDirection');
    cmp.set("v.sortedBy", fieldName);
    cmp.set("v.sortedDirection", sortDirection);
    helper.sortData(cmp, fieldName, sortDirection);
},

    navigateUrl : function (component, event, helper) {
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
            "url": "/lightning/page/home"
        });
        urlEvent.fire();
    },
        EditRecord : function(component, event, helper) {

            var recId = event.getParam('row').Id;
            var actionName = event.getParam('action').name;
            if ( actionName == 'Edit' ) {
                var editRecordEvent = $A.get("e.force:editRecord");
                editRecordEvent.setParams({
                    "recordId": recId
                });
                console.log("recid",recId);
                editRecordEvent.fire();
            }
            recId=   window.location.href = '/';
        },



            save : function(component, event) {
                var action = component.get("c.fetchTasklist");
                action.setCallback(this, function(action) {
                    $A.get('e.force:refreshView').fire();
                });
                $A.enqueueAction(action);
            },

                getSelectedName: function (component, event) {
                    var selectedRows = event.getParam('selectedRows');
                    // Display that fieldName of the selected rows
                    for (var i = 0; i < selectedRows.length; i++){
                        //alert("You selected: " + selectedRows[i].Name);
                    }
                },
                    next: function (component, event, helper) {
                        helper.next(component, event);
                    },
                        previous: function (component, event, helper) {
                            helper.previous(component, event);
                        },
                            isRefreshed: function(component, event, helper) {
                                location.reload();
                            }

 })

   helper.js:
  ({
  sortData: function (cmp, fieldName, sortDirection) {
    var data = cmp.get("v.Tasklist");
    var reverse = sortDirection !== 'asc';
    data.sort(this.sortBy(fieldName, reverse))
    cmp.set("v.Tasklist", data);
    },
    sortBy: function (field, reverse, primer) {
    var key = primer ?
        function(x) {return primer(x[field])} :
    function(x) {return x[field]};
    reverse = !reverse ? 1 : -1;
    return function (a, b) {
        return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
    }
},


next : function(component, event){
    var sObjectList = component.get("v.Tasklist");
    var end = component.get("v.endPage");
    var start = component.get("v.startPage");
    var pageSize = component.get("v.pageSize");
    var Paginationlist = [];
    var counter = 0;
    for(var i=end+1; i<end+pageSize+1; i++){
        if(sObjectList.length > i){
            Paginationlist.push(sObjectList[i]);
        }
        counter ++ ;
    }
    start = start + counter;
    end = end + counter;
    component.set("v.startPage",start);
    component.set("v.endPage",end);
    component.set('v.PaginationList', Paginationlist);
},

previous : function(component, event){
    var sObjectList = component.get("v.Tasklist");
    var end = component.get("v.endPage");
    var start = component.get("v.startPage");
    var pageSize = component.get("v.pageSize");
    var Paginationlist = [];
    var counter = 0;
    for(var i= start-pageSize; i < start ; i++){
        if(i > -1){
            Paginationlist.push(sObjectList[i]);
            counter ++;
        }else{
            start++;
        }
    }
    start = start - counter;
    end = end - counter;
    component.set("v.startPage",start);
    component.set("v.endPage",end);
    component.set('v.PaginationList', Paginationlist);
},
})

[![enter image description here][1]][1]@AuraEnabled

Public static List<Task> fetchTasklist(){

    List<Task> Tasklist =[select Subject,Who.Email,Who.Phone,CreatedBy.Name,OwnerId, Priority,Owner.Name,Status,Createddate from Task   ];
    return Tasklist;
}