th-159: * table fixed page size (#160)

Co-authored-by: Stanislav Malyshevskyi <[email protected]>

Author: AlexVlaso

frontend/src/libs/components/table/table.tsx

@@ -2,6 +2,7 @@ import {
   flexRender,
   getCoreRowModel,
   getPaginationRowModel,
+  useCallback,
   useReactTable,
 } from '~/libs/hooks/hooks.js';
 import { type ColumnDef } from '~/libs/types/types.js';
@@ -41,6 +42,15 @@ const Table = <T,>({
     },
   });
 
+  const handleChangePageSize = useCallback(
+    (value: number) => {
+      changePageIndex(0);
+      changePageSize(value);
+      table.setPageSize(value);
+    },
+    [changePageSize, table, changePageIndex],
+  );
+
   const createThead = (): JSX.Element => (
     <thead className={styles.thead}>
       {table.getHeaderGroups().map((headerGroup) => (
@@ -83,7 +93,7 @@ const Table = <T,>({
       <Pagination
         pageCount={pagesRange}
         onClick={changePageIndex}
-        onChangePageSize={changePageSize}
+        onChangePageSize={handleChangePageSize}
         pageIndex={pageIndex}
         pageSize={pageSize}
       />

frontend/src/libs/hooks/use-app-table/use-app-table.ts

@@ -10,8 +10,8 @@ type Properties<T> = {
     pageSize: number;
     pageIndex: number;
   }) => AppThunk<EntityPagination<T>>;
-  initialPageSize: number;
-  initialPageIndex: number;
+  initialPageSize?: number;
+  initialPageIndex?: number;
 };
 
 type ReturnValue = {