wrapping some agent components.

src/components/wrappers/table/table-pagination-size.tsx

@@ -1,3 +1,4 @@
+import {useEffect} from "react";
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
 import {cn} from "@/lib/utils";
 
@@ -12,8 +13,12 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
 
     const {className, table, pageSizeOptions = [10, 20, 30, 40, 50]} = props
 
+    useEffect(() => {
+        table.setPageSize(Number(pageSizeOptions[0]))
+    }, []);
+
     return (
-        <div className={cn("flex items-center space-x-2", className)}>
+        <div className={cn("flex items-center justify-center space-x-2", className)}>
             <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
             <Select
                 value={`${table.getState().pagination.pageSize}`}