measurement table in component page works now but is not fully formatted

src/pages/DeviceComponent.tsx

@@ -1,7 +1,7 @@
 import { Box, Grid2 as Grid, Skeleton, Theme, Tooltip } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { NextMeasurementChip } from "common/NextMeasurementChip";
-import ResponsiveTable from "common/ResponsiveTable";
+import ResponsiveTable, { Column } from "common/ResponsiveTable";
 // import { getTableIcons } from "common/ResponsiveTable";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import StatusChip from "common/StatusChip";
@@ -9,6 +9,7 @@ import { GetDefaultDateRange } from "common/time/DateRange";
 import ComponentActions from "component/ComponentActions";
 import ComponentChart from "component/ComponentChart";
 import ComponentTypeChip from "component/ComponentTypeChip";
+import UnitMeasurementSummary from "component/UnitMeasurementSummary";
 // import MeasurementSummary from "component/MeasurementSummary";
 // import UnitMeasurementSummary from "component/UnitMeasurementSummary";
 import {
@@ -141,18 +142,6 @@ export default function DeviceComponent() {
     pond.DeviceComponentPreferences
   >();
 
-  console.log("device component")
-
-  /*const getContextKeys = useCallback(() => {
-    if (groupID === undefined || groupID < 1) return undefined;
-    return [groupID.toString(), deviceID.toString()];
-  }, [groupID, deviceID]);
-
-  const getContextTypes = useCallback(() => {
-    if (groupID === undefined || groupID < 1) return undefined;
-    return ["group", "device"];
-  }, [groupID]);*/
-
   const setDefaultState = () => {
     setDevice(Device.create());
     setGroup(undefined);
@@ -468,6 +457,38 @@ export default function DeviceComponent() {
     });
   }
 
+  useEffect(() => {
+    load()
+  }, [])
+
+  const columns = (): Column<convertedUnitMeasurement>[] => {
+    return [
+      {
+        title: "Timestamp",
+        render: row => {
+          return (
+            <Tooltip title={moment(row.timestamp).calendar()}>
+              <span>{moment(row.timestamp).fromNow()}</span>
+            </Tooltip>
+          )
+        }
+      },
+      {
+        title: "Measurement",
+        render: row => {
+          return (
+            <UnitMeasurementSummary
+              component={component}
+              reading={row}
+              tableCell={true}
+              excludedNodes={deviceComponentPrefs?.excludedNodes}
+            />
+          )
+        }
+      }
+    ]
+  }
+
   // const unitMeasurementsTable = () => {
   //   interface Row {
   //     timestamp: string;
@@ -580,6 +601,7 @@ export default function DeviceComponent() {
       <Grid size={{ xs: 12 }} className={classes.verticalSpacing}>
         <ResponsiveTable
           rows={rows}
+          columns={columns()}
           total={total}
           page={page}
           pageSize={pageSize}