diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx index 86ac8c0a..11515939 100644 --- a/src/components/Pagination/Pagination.test.tsx +++ b/src/components/Pagination/Pagination.test.tsx @@ -159,4 +159,22 @@ describe("Pagination", () => { }); expect(onChange).not.toHaveBeenCalled(); }); + + it("should not show `All rows` in the page sizes if it's disabled", async () => { + const onPageSizeChange = vi.fn(); + const { getByText, queryByText } = renderPagination({ + currentPage: 1, + onChange, + onPageSizeChange, + maxRowsPerPageList: [250, 500], + allowAllRows: false, + }); + expect(queryByText("All rows")).not.toBeInTheDocument(); + + await vi.waitFor(() => { + fireEvent.click(getByText("250 rows")); + fireEvent.click(getByText("500 rows")); + expect(onPageSizeChange).toBeCalledTimes(1); + }); + }); }); diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 787c669c..413e6613 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -30,6 +30,7 @@ export interface PaginationProps onPageNumberFocus?: FocusEventHandler; onPageNumberBlur?: FocusEventHandler; disableNextButton?: boolean; + allowAllRows?: boolean; } const CustomSelect = styled.div` width: 150px; @@ -51,6 +52,7 @@ export const Pagination = ({ onPageNumberFocus, onPageNumberBlur, disableNextButton, + allowAllRows = true, ...props }: PaginationProps): ReactElement => { const hasRowCount = ["number", "string"].includes(typeof rowCount); @@ -129,6 +131,11 @@ export const Pagination = ({ [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled] ); + // if `allowAllRows` is false we need to switch to the first option in the list + if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) { + pageSize = maxRowsPerPageList[0]; + } + return ( - All rows + {allowAllRows && All rows} {maxRowsPerPageList.map(option => (