diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
index f33819347b8c61a8e28cf9dd843e1830fc1ac1e1..2030c9e795287f377dd3869bfc89281e5f75d07f 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
@@ -11,7 +11,8 @@ import { Calendar } from 'primereact/calendar';
 import {Paginator} from 'primereact/paginator';
 import {TriStateCheckbox} from 'primereact/tristatecheckbox';
 import { Slider } from 'primereact/slider';
-
+import { Button } from "react-bootstrap";
+import { InputNumber } from "primereact/inputnumber";
 
 let tbldata =[];
 let isunittest = false;
@@ -494,8 +495,19 @@ function Table({ columns, data, defaultheader, optionalheader, tablename, defaul
                </table>
                </div>
                <div className="pagination" >
+               <div className="total_records_bottom_label" ><label >Total records ({data.length})</label></div>
+               <div>
         <Paginator rowsPerPageOptions={[10,25,50,100]} first={currentpage} rows={currentrows} totalRecords={rows.length} onPageChange={onPagination}></Paginator>
+        </div>
+        <div>
+            <InputNumber id="custompage" value={custompagevalue} onChange ={onChangeCustompagevalue}
+              min={0} style={{width:'100px'}} />
+              <label >Records/Page</label>
+            <Button onClick={onCustomPage}> Show </Button>
+            <Button onClick={onShowAllPage} style={{marginLeft: "1em"}}> Show All </Button>
+          </div>  
       </div>
+      
     </>
   )
 }