diff --git a/source/frontend/src/components/Table/PageSizeSelector.tsx b/source/frontend/src/components/Table/PageSizeSelector.tsx index 3f099b8df8..6850bfa477 100644 --- a/source/frontend/src/components/Table/PageSizeSelector.tsx +++ b/source/frontend/src/components/Table/PageSizeSelector.tsx @@ -45,6 +45,7 @@ export const TablePageSizeSelector: React.FC> = value={`${selected}`} type="number" style={{ width: 50, marginLeft: 10, marginRight: 10, backgroundColor: 'white' }} + disabled /> Entries diff --git a/source/frontend/src/components/Table/Table.test.tsx b/source/frontend/src/components/Table/Table.test.tsx index c14985b20b..c11630f2b7 100644 --- a/source/frontend/src/components/Table/Table.test.tsx +++ b/source/frontend/src/components/Table/Table.test.tsx @@ -1,4 +1,4 @@ -import { act, render, RenderOptions, userEvent } from '@/utils/test-utils'; +import { act, render, RenderOptions, userEvent, waitFor } from '@/utils/test-utils'; import { ColumnWithProps, Table, TableProps } from '.'; import { IIdentifiedObject } from './Table'; @@ -172,6 +172,23 @@ describe('Generic table component', () => { }); 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 b677122ebe..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: @@ -289,13 +291,10 @@ export const Table = ( externalSort, isSingleSelect, disableSelection, - lockPageSize, } = props; const manualSortBy = !!externalSort || props.manualSortBy; const totalItems = externalTotalItems ?? data?.length; - const pageCount = - externalPageCount ?? - Math.ceil(totalItems / (!!lockPageSize ? pageSizeProp ?? internalPageSize : 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. @@ -333,7 +332,7 @@ export const Table = ( ? { sortBy, pageIndex: pageIndexProp ?? 0, - pageSize: lockPageSize ? pageSizeProp : internalPageSize, + pageSize: pageSizeProp ?? internalPageSize, } : { sortBy, pageIndex: pageIndexProp ?? 0 }, manualPagination: (props.hideToolbar || manualPagination) ?? true, // Tell the usePagination hook