diff --git a/src/frontend/src/hooks/UseTable.tsx b/src/frontend/src/hooks/UseTable.tsx index 4ce0800f28..c44cc11d9e 100644 --- a/src/frontend/src/hooks/UseTable.tsx +++ b/src/frontend/src/hooks/UseTable.tsx @@ -36,6 +36,8 @@ export type TableState = { setRecordCount: (count: number) => void; page: number; setPage: (page: number) => void; + pageSize: number; + setPageSize: (pageSize: number) => void; records: any[]; setRecords: (records: any[]) => void; updateRecord: (record: any) => void; @@ -99,6 +101,7 @@ export function useTable(tableName: string): TableState { // Pagination data const [page, setPage] = useState(1); + const [pageSize, setPageSize] = useState(25); // A list of hidden columns, saved to local storage const [hiddenColumns, setHiddenColumns] = useLocalStorage({ @@ -158,6 +161,8 @@ export function useTable(tableName: string): TableState { setRecordCount, page, setPage, + pageSize, + setPageSize, records, setRecords, updateRecord, diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx index 7585a7670e..fa74a5f468 100644 --- a/src/frontend/src/tables/InvenTreeTable.tsx +++ b/src/frontend/src/tables/InvenTreeTable.tsx @@ -55,6 +55,7 @@ import { RowAction, RowActions } from './RowActions'; import { TableSearchInput } from './Search'; const defaultPageSize: number = 25; +const PAGE_SIZES = [10, 15, 20, 25, 50, 100, 500]; /** * Set of optional properties which can be passed to an InvenTreeTable component @@ -74,7 +75,6 @@ const defaultPageSize: number = 25; * @param enableRefresh : boolean - Enable refresh actions * @param enableColumnSwitching : boolean - Enable column switching * @param enableColumnCaching : boolean - Enable caching of column names via API - * @param pageSize : number - Number of records per page * @param barcodeActions : any[] - List of barcode actions * @param tableFilters : TableFilter[] - List of custom filters * @param tableActions : any[] - List of custom action groups @@ -100,7 +100,6 @@ export type InvenTreeTableProps = { enableLabels?: boolean; enableReports?: boolean; afterBulkDelete?: () => void; - pageSize?: number; barcodeActions?: React.ReactNode[]; tableFilters?: TableFilter[]; tableActions?: React.ReactNode[]; @@ -129,7 +128,6 @@ const defaultInvenTreeTableProps: InvenTreeTableProps = { enableRefresh: true, enableSearch: true, enableSelection: false, - pageSize: defaultPageSize, defaultSortColumn: '', barcodeActions: [], tableFilters: [], @@ -360,7 +358,8 @@ export function InvenTreeTable({ // Pagination if (tableProps.enablePagination && paginate) { - let pageSize = tableProps.pageSize ?? defaultPageSize; + let pageSize = tableState.pageSize ?? defaultPageSize; + if (pageSize != tableState.pageSize) tableState.setPageSize(pageSize); queryParams.limit = pageSize; queryParams.offset = (tableState.page - 1) * pageSize; } @@ -588,6 +587,12 @@ export function InvenTreeTable({ [props.onRowClick, props.onCellClick] ); + // pagination refresth table if pageSize changes + function updatePageSize(newData: number) { + tableState.setPageSize(newData); + tableState.refreshTable(); + } + return ( <> {deleteRecords.modal} @@ -705,7 +710,7 @@ export function InvenTreeTable({ idAccessor={tableProps.idAccessor} minHeight={300} totalRecords={tableState.recordCount} - recordsPerPage={tableProps.pageSize ?? defaultPageSize} + recordsPerPage={tableState.pageSize} page={tableState.page} onPageChange={tableState.setPage} sortStatus={sortStatus} @@ -733,6 +738,8 @@ export function InvenTreeTable({ overflow: 'hidden' }) }} + recordsPerPageOptions={PAGE_SIZES} + onRecordsPerPageChange={updatePageSize} />