Pagination with usePaging

Set up paging for dynamic data objects with usePaging

Use usePaging from @olenbetong/appframe-react to wire a pagination component to a dynamic DataObject.

Configure the DataObject

The data object must enable dynamic loading and define a maxRecords page size:

export const dsLocations = af.data.generateApiDataObject<LocationsRecord>({
    resource: "aviw_Fleet_Locations",
    id: "dsLocations",
    allowUpdate: false,
    allowInsert: false,
    allowDelete: true,
    dynamicLoading: true,
    fields: [/* ... */],
    parameters: {
        maxRecords: 50,
        sortOrder: [{ LocationID: af.data.SortOrder.Asc }],
    },
});

Hook up paging in a component

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

export default function DataObjectPagination({
    dataObject,
    ...props
}: PaginationProps & { dataObject: DataObject<any> }) {
    let { page, pageCount, changePage } = usePaging(dataObject);

    function handleChangePage(_evt, newPage) {
        changePage(newPage - 1);
    }

    return (
        <Pagination
            count={pageCount}
            page={page + 1}
            onChange={handleChangePage}
            variant="outlined"
            color="secondary"
            {...props}
        />
    );
}

Total counts and page changes

usePaging returns the current page and page count. Use changePage to move between pages:

changePage(nextPage);

To show the total number of records across all pages, read the totalCount parameter:

import { useParameter } from "@olenbetong/appframe-react";

let total = useParameter(dataObject, "totalCount");

Combine this with useDataLength to display how many rows are on the current page.