Add pagination (#7958)

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<number>(1);
+  const [pageSize, setPageSize] = useState<number>(25);
 
   // A list of hidden columns, saved to local storage
   const [hiddenColumns, setHiddenColumns] = useLocalStorage<string[]>({
@@ -158,6 +161,8 @@ export function useTable(tableName: string): TableState {
     setRecordCount,
     page,
     setPage,
+    pageSize,
+    setPageSize,
     records,
     setRecords,
     updateRecord,

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<T = any> = {
   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<T = any>({
 
     // 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<T = any>({
     [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<T = any>({
               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<T = any>({
                   overflow: 'hidden'
                 })
               }}
+              recordsPerPageOptions={PAGE_SIZES}
+              onRecordsPerPageChange={updatePageSize}
             />
           </Box>
         </Stack>