diff --git a/packages/react-core/src/components/Pagination/Pagination.tsx b/packages/react-core/src/components/Pagination/Pagination.tsx index 13171adb983..dffd2052c0e 100644 --- a/packages/react-core/src/components/Pagination/Pagination.tsx +++ b/packages/react-core/src/components/Pagination/Pagination.tsx @@ -246,7 +246,9 @@ export const Pagination: React.FunctionComponent = ({ let page = pageProp; if (offset !== null) { - page = Math.max(Math.ceil(offset / perPage), 1); + itemsStart = offset + 1; + page = Math.max(Math.ceil(itemsStart / perPage), 1); + itemsEnd = offset + perPage; } const lastPage = getLastPage(); diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md index 31396eb852c..15b54d83f02 100644 --- a/packages/react-core/src/components/Pagination/examples/Pagination.md +++ b/packages/react-core/src/components/Pagination/examples/Pagination.md @@ -45,6 +45,11 @@ By not passing `itemCount` and passing `toggleTemplate` you can customize the to ```ts file="./PaginationCompact.tsx" ``` +### Offset + +```ts file="./PaginationOffset.tsx" +``` + ### Sticky ```ts isFullscreen file="./PaginationSticky.tsx" diff --git a/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx b/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx new file mode 100644 index 00000000000..da4e669a8b3 --- /dev/null +++ b/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { Pagination } from '@patternfly/react-core'; + +export const PaginationOffset: React.FunctionComponent = () => { + const [offset, setOffset] = React.useState(7); + const [perPage, setPerPage] = React.useState(20); + + const onSetPage = ( + _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + newPage: number, + _perPage: number | undefined, + startIdx: number | undefined + ) => { + setOffset(startIdx || 0); + }; + const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number) => { + setPerPage(newPerPage); + setOffset(0); + }; + + return ( + + ); +};