usePaging

Returns the page number, page count and a method to set the current page for data objects that use dynamic loading.

Usage

This is an example of how you can bind the MUI Pagination component to a data objects paging:

import { Pagination as MuiPagination, PaginationProps } from "@mui/material";
import { DataObject } from "@olenbetong/appframe-data";
import { usePaging } from "@olenbetong/appframe-react";

export function Pagination({
  dataObject,
  ...props
}: PaginationProps & { dataObject: DataObject<any> }) {
  let { changePage, page, pageCount } = usePaging(dataObject);
  return (
    <MuiPagination
      count={pageCount}
      page={page + 1}
      onChange={(evt, newPage) => changePage(newPage - 1)}
      {...props}
    />
  );
}

API

import { DataObject } from "@olenbetong/appframe-data";

/**
 * Returns the necessary data to control the paging of the data object.
 *
 * @param dataObject Data object to control the paging of
 * @returns The current page, number of pages and a method to change the page
 */
export declare function usePaging(dataObject: DataObject<any>): {
  page: number;
  pageCount: number;
  changePage: (pPage: number) => Promise<false | undefined>;
};