added load more function to the responsive table for mobile view

src/pages/DeviceComponent.tsx

@@ -23,6 +23,7 @@ import {
 } from "hooks";
 import InteractionChip from "interactions/InteractionChip";
 import InteractionSettings from "interactions/InteractionSettings";
+import { cloneDeep } from "lodash";
 // import MaterialTable from "material-table";
 import { Component, Device, deviceScope, Group, Interaction } from "models";
 import { convertedUnitMeasurement, MeasurementsFor, UnitMeasurement } from "models/UnitMeasurement";
@@ -450,7 +451,6 @@ export default function DeviceComponent() {
       // });
     })
     .catch((err: any) => {
-      
       // resolve({
       //   data: [],
       //   page: 0,
@@ -613,6 +613,32 @@ export default function DeviceComponent() {
           pageSize={pageSize}
           setPage={setPage}
           handleRowsPerPageChange={handleRowsPerPageChange}
+          loadMore={() => {
+            let currentRows = cloneDeep(rows)
+            let newOffset = rows.length
+            componentAPI.listUnitMeasurements(      
+              deviceID,
+              componentID,
+              startDate,
+              endDate,
+              pageSize,
+              newOffset,
+              order,
+              undefined,
+              getContextKeys(),
+              getContextTypes(),
+              showErrors,
+              as)
+              .then(resp => {
+                  let newRows = UnitMeasurement.convertMeasurements(
+                  resp.data.measurements.map(um => UnitMeasurement.any(um, user))
+                )
+                setRows(currentRows.concat(newRows))
+              }).catch(err => {
+                
+              })
+            
+          }}
         />
       </Grid>
     );