@dianamics/pcf-utils/src/Hooks/Dataset/usePaging.ts

This npm package is designed for Power Apps Component Framework (PCF). It provides utilities for working with PCF, most of them are React Hooks, which needs to be used in function components.

import * as React from 'react';
type DataSet = ComponentFramework.PropertyTypes.DataSet;


export const usePaging = (dataset: DataSet) => {    
      
    const [firstItemNumber, setFirstItemNumber] = React.useState<number>(0);
    const [lastItemNumber, setLastItemNumber] = React.useState<number>();
    const [totalRecords, setTotalRecords] = React.useState<number>();
    const [currentPage, setCurrentPage] = React.useState<number>(0);
    const [pageSize, setPageSize] = React.useState<number>(0);    
               

    React.useEffect(() => {
        if(!dataset.paging.hasPreviousPage){ //first page
            setPageSize(dataset.sortedRecordIds.length);
            setCurrentPage(1);
            setTotalRecords(dataset.paging.totalResultCount);      
        }               
        setFirstItemNumber((currentPage-1) * pageSize + 1);
        setLastItemNumber((currentPage-1) * pageSize + dataset.sortedRecordIds.length )       
    }, [dataset]);

  

    function moveToFirst(){        
        setCurrentPage(1);
        (dataset.paging as any).loadExactPage(1);
    }

    function movePrevious(){        
        const newPage = currentPage-1;
        setCurrentPage(newPage);
        (dataset.paging as any).loadExactPage(newPage);        
       
    }

    function moveNext(){        
        const newPage = currentPage+1;
        setCurrentPage(newPage);
        (dataset.paging as any).loadExactPage(newPage);                
    }   

    return {       
        
        currentPage,
        firstItemNumber, 
        lastItemNumber, 
        totalRecords, 
        moveToFirst, 
        movePrevious,
        moveNext,       

    }
}