Lightning data table with pagination

Paginator Child Component:

HTML:

<template>
    <lightning-layout>
        <lightning-layout-item>
            <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}></lightning-button>
        </lightning-layout-item>
        <lightning-layout-item flexibility="grow"></lightning-layout-item>
        <lightning-layout-item>
            <lightning-button label="Next" icon-name="utility:chevronright" onclick={nextHandler}></lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

JS:

import { LightningElement } from 'lwc';

export default class AccountPaginator extends LightningElement {
    previousHandler(){
        this.dispatchEvent(new CustomEvent('previous'));
    }
    nextHandler()
    {
        this.dispatchEvent(new CustomEvent('next'));
    }
}

Account paginator component:

HTML

<template>
    <lightning-card title="List Of Accounts" icon-name="custom:custom9">
        <div class="slds-m-around_medium">
            <div style="height: 180px;">
                <lightning-datatable 
                    key-field="id"
                    data={data}
                    columns={columns}>
                </lightning-datatable>  
            </div>
        </div>

        <div class="slds-m-around_medium">
            <p class="slds-m-vertical_medium content">
                Displaying {startingRecord} to {endingRecord} of {totalCount}. <br>
                Page {page} of {totalPage}
            </p>
            <c-account-paginator onprevious={previousHandler} onnext={nextHandler}></c-account-paginator>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement , track , wire} from 'lwc';
import getAccounts from '@salesforce/apex/AccountHelper.getAccounts';
const columns = [

    { label: 'Name', fieldName: 'RecordLink', type:'url', 
    typeAttributes: { label: { fieldName: "Name" }, tooltip:"Name", target: "_blank" }
    },
    { label: 'Type', fieldName: 'Type' },
    { label: 'BillingCountry', fieldName: 'BillingCountry' },       
];
let i = 0;
export default class DisplayPaginatedRecords extends LightningElement 
{
    @track page = 1; //initialize the first page
    @track items =[]; //it will contain all records;
    @track data; // data to be displayed in the datatable
    @track columns;
    @track startingRecord =1 ; //start record position per page 
    @track endingRecord = 0 ;//end record position per page
    @track pageSize = 5 ; //default page size set to 5
    @track totalRecordCount = 0 ; //total record count recieved from all records 
    @track totalPage = 0;

    @wire(getAccounts)
    allAccounts({error , data})
    {
        if(data)
        {
            var tempaccList=[];
            for(let i=0;i<data.length;i++)
            {
                let tempRecord = Object.assign({},data[i]);
                tempRecord.RecordLink = '/'+tempRecord.Id;
                tempaccList.push(tempRecord);
            }
            this.items = tempaccList;
            this.totalRecordCount = data.length;
            console.log(this.totalRecordCount);
            this.totalPage = Math.ceil(this.totalRecordCount/this.pageSize);
            //initial data to be displayed ----------->
            //slice will take 0th element and ends with 5, but it doesn't include 5th element
            //so 0 to 4th rows will be displayed in the table
            this.data = this.items.slice(0,this.pageSize);
            this.endingRecord = this.pageSize;
            this.columns = columns;
            this.error= undefined;
        }
        else if(error)
        {
            this.error = error;
            this.data = undefined;
        }
    }

    //previous handler
    previousHandler(){
        if(this.page>1)
        {
            this.page-=1;
            this.displayRecordsPerPage(this.page);
        }
    }
    // next handler
    nextHandler()
    {
        if((this.page<this.totalPage) && this.page!=this.totalPage)
        {
            this.page+=1;
            this.displayRecordsPerPage(this.page);
        }
    }

    displayRecordsPerPage(page)
    {
         /*let's say for 2nd page, it will be => "Displaying 6 to 10 of 23 records. Page 2 of 5"
        page = 2; pageSize = 5; startingRecord = 5, endingRecord = 10
        so, slice(5,10) will give 5th to 9th records.
        */
       this.startingRecord = ((page-1)*this.pageSize);
       this.endingRecord = (this.pageSize * page);
       this.endingRecord = (this.endingRecord > this.totalRecordCount ? this.totalRecordCount : this.endingRecord );
       this.data = this.items.slice(this.startingRecord,this.endingRecord);
       this.startingRecord+=1;
    }
}

Account Helper Class:

public with sharing class AccountHelper {
    @AuraEnabled(cacheable = true)
    public static List<Account> getAccounts(){
        try {
            return [select id , name , Type , BillingCountry from Account order by createddate desc];
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}