added dynamic pagination for asr integration - products table

Author: ydahal1

Diff for: Tombolo/client-reactjs/src/components/admin/Integrations/asr/ProductsTab.jsx

@@ -5,10 +5,13 @@ import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 
 // Local imports
 import { getProducts, deleteProduct } from './asr-integration-util';
+import useWindowSize from '../../../../hooks/useWindowSize';
 
 const ProductsTab = ({ products, setSelectedProduct, setProductModalOpen, setProducts }) => {
   // Local State
   const [productData, setProductData] = useState([]);
+  const [pageSize, setPageSize] = useState(null);
+  const { inner } = useWindowSize();
 
   // Effect
   useEffect(() => {
@@ -49,6 +52,11 @@ const ProductsTab = ({ products, setSelectedProduct, setProductModalOpen, setPro
     }
   }, [products]);
 
+  // Effect
+  useEffect(() => {
+    setPageSize(Math.abs(Math.round(inner.height / 62)));
+  }, [inner]);
+
   // Product table columns
   const columns = [
     {
@@ -127,7 +135,13 @@ const ProductsTab = ({ products, setSelectedProduct, setProductModalOpen, setPro
   // JSX
   return (
     <>
-      <Table columns={columns} dataSource={productData} size="small" rowKey={(record) => record.id} />
+      <Table
+        columns={columns}
+        dataSource={productData}
+        size="small"
+        rowKey={(record) => record.id}
+        pagination={{ pageSize }}
+      />
     </>
   );
 };