Added Paginatioon

src/Pages/SupplierProductMapping/SuplierProductMappingForm.jsx

@@ -13,6 +13,7 @@ import {
     getSupplaierIdBasedProducts
 } from '../../Features/SupplierProductMapping/SupplierProductMapping.js';
 import { getsupplierBasedOnCmpId, getsupplierBasedOnCmpIdBrId } from '../../Features/SupplierMaster/SupplierMaster.js';
+import "../../Pages/SupplierProductMapping/SupplierProductMapping.scss"
 
 const SupplierProductMappingForm = ({
     isModalOpen = false,
@@ -36,6 +37,8 @@ const SupplierProductMappingForm = ({
     const [modalSelectedProduct, setModalSelectedProduct] = useState(null);
     const [tabledata, setTabledata] = useState([]);
     const [filteredTableData, setFilteredTableData] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(8);
     const details = {
         name: "tamil",
         address: {
@@ -199,7 +202,9 @@ const SupplierProductMappingForm = ({
             key: "ProdId",
             align: "center",
             width: "80px",
-            render: (text, object, index) => <span>{index + 1}</span>,
+            render: (text, object, index) => (
+                <span>{(currentPage - 1) * pageSize + index + 1}</span>
+            ),
         },
         {
             title: "Product Name",
@@ -274,7 +279,7 @@ const SupplierProductMappingForm = ({
                                 isOnchanges={false}
                                 alphabetfilter="Yes"
                             />
-                            <button style={{ padding: '10px 10px', margin: '0px 15px', borderRadius: '6px',fontFamily:'poppins', background: '#901D77', color: 'white', border: 'none', cursor: 'pointer' }}
+                            <button style={{ padding: '10px 10px', margin: '0px 15px', borderRadius: '6px', fontFamily: 'poppins', background: '#901D77', color: 'white', border: 'none', cursor: 'pointer' }}
                                 onClick={allProductMap}>Add All</button>
 
                             <div style={{ position: "absolute", left: "16rem", top: "1px" }}>
@@ -293,12 +298,22 @@ const SupplierProductMappingForm = ({
                     )}
                 </div>
 
-                <div className="modal-table" style={{ marginTop: "1rem" }}>
+                <div className="ProductMappingTable" style={{ marginTop: "1rem" }}>
                     <Tables
                         columns={tableColumns}
                         data={modelTableData}
                         dataSource={modelTableData}
-                        pagination={false}
+                        pagination={{
+                            current: currentPage,
+                            pageSize: pageSize,
+                            total: modelTableData.length,
+                            showSizeChanger: false,
+                            onChange: (page, size) => {
+                                setCurrentPage(page);
+                                setPageSize(size);
+                            },
+                        }}
+                        ownPagination={true}
                         rowKey="ProdId"
                     />
                 </div>