diff --git a/source/frontend/src/components/Table/PageSizeSelector.tsx b/source/frontend/src/components/Table/PageSizeSelector.tsx index 0a17dd5ce5..6850bfa477 100644 --- a/source/frontend/src/components/Table/PageSizeSelector.tsx +++ b/source/frontend/src/components/Table/PageSizeSelector.tsx @@ -40,7 +40,6 @@ export const TablePageSizeSelector: React.FC> =
Show - {/*the selector appears to capture the click event which prevents the page change from being registered*/} { }); expect(onPageSizeChange).toHaveBeenCalledWith(5); }); + + it('page size displays a second page as expected', async () => { + const { getByLabelText, container } = setup({ + props: { + pageSize: 5, + manualPagination: false, + }, + }); + + await act(async () => { + userEvent.click(getByLabelText('Page 2')); + }); + await waitFor(async () => { + const tableRows = container.querySelectorAll('.table .tbody .tr-wrapper'); + expect(tableRows).toHaveLength(1); + }); + }); }); it('can select only one row at a time when single select prop set', async () => { diff --git a/source/frontend/src/components/Table/Table.tsx b/source/frontend/src/components/Table/Table.tsx index e529694123..27ec01251c 100644 --- a/source/frontend/src/components/Table/Table.tsx +++ b/source/frontend/src/components/Table/Table.tsx @@ -260,7 +260,9 @@ export const Table = ( const filterFormRef = useRef>(); const [expandedRows, setExpandedRows] = React.useState([]); - const [internalPageSize, setInternalPageSize] = React.useState(DEFAULT_PAGE_SIZE); + const [internalPageSize, setInternalPageSize] = React.useState( + props.pageSize ?? DEFAULT_PAGE_SIZE, + ); const defaultColumn = React.useMemo( () => ({ // When using the useFlexLayout: @@ -292,7 +294,7 @@ export const Table = ( } = props; const manualSortBy = !!externalSort || props.manualSortBy; const totalItems = externalTotalItems ?? data?.length; - const pageCount = externalPageCount ?? Math.ceil(totalItems / (pageSizeProp ?? internalPageSize)); + const pageCount = externalPageCount ?? Math.ceil(totalItems / internalPageSize); const selectedRowsRef = React.useRef(externalSelectedRows ?? []); // used as a global var for providing up to date list of selected rows to code within the table (that is arrow function scoped). // manually update the contents of the global ref of selected rows if the list of external selected rows changes. diff --git a/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx b/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx index f49e116450..3f6a499cd1 100644 --- a/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx +++ b/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx @@ -33,7 +33,6 @@ export const DocumentResults: React.FunctionComponent< externalSort={{ sort, setSort }} data={results ?? []} noRowsMessage="No matching Documents found" - pageSize={10} manualPagination={false} {...rest} >