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

    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="recordId" type="String"/>

    <aura:attribute name="pageNumber" type="Integer" default="1"/>
    <aura:attribute name="pageSize" type="Integer" default="20"/>
    <aura:attribute name="isLastPage" type="Boolean" default="false"/>
    <aura:attribute name="resultSize" type="Integer" default="0"/>
    <!-- attribute to hold selected all rows -->
    <aura:attribute name="selection" type="List" />
    <!-- attribute to check if the page has changed or not -->
    <aura:attribute name="hasPageChanged" type="Boolean" />

    <!-- This attribute will hold the update records from data table-->
    <aura:attribute name="updatedRecord" type="Object[]" />

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


    <!-- You must define keyField as 'Id' to save the record back in Salesforce
 'onsave' attribute will executed when user clicks on save button -->

    <lightning:card title="Datatable With Pagination">
        <lightning:layout multipleRows="true" horizontalAlign="center">
            <lightning:layoutItem padding="around-small" size="12">
                <lightning:button label="Make Selection"  onclick="{!c.makeSelection}"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" size="12">
                <!-- onrowselection fires when a new is selected or unselected, or page has changed with new rows in it -->
                <lightning:datatable
                                     aura:id="accountDataTable"
                                     columns="{! v.columns }"
                                     data="{! v.data }"
                                     keyField="Id"
                                     hideCheckboxColumn="false"
                                     selectedRows = "{!v.selection}"
                                     onrowaction="{! c.handleRowAction }"
                                     onrowselection ="{!c.onRowSelection}"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" flexibility="auto">
                <lightning:button label="Prev" iconName="utility:chevronleft" iconPosition="left"
                                  onclick="{!c.onPrev}" disabled="{! v.pageNumber == 1}"/>
                <span class="slds-p-horizontal_small">
                    Page {!v.pageNumber} | Showing records from {! ((v.pageNumber-1)*v.pageSize)+' to '+((v.pageNumber-1)*v.pageSize+v.resultSize)}
                </span>
                <lightning:button label="Next" iconName="utility:chevronright" iconPosition="right"
                                  disabled="{! v.isLastPage}" onclick="{!c.onNext}"/>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>

</aura:component>