drag resize is working

src/common/ResponsiveTable.tsx

@@ -148,6 +148,14 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const [handler, setHandler] = useState<NodeJS.Timeout | undefined>(undefined);
   const [columnAnchor, setColumnAnchor] = useState<any>(null)
 
+  const [columnSizes, setColumnSizes] = useState<Map<string, number>>(new Map())
+  const [tempWidth, setTempWidth] = useState<number | undefined>(undefined)
+  const [tempWidth2, setTempWidth2] = useState<number | undefined>(undefined)
+  const [dragX, setDragX] = useState<number>(0)
+  const [dragStart, setDragStart] = useState<number | undefined>(undefined)
+  const [rowWidths, setRowWidths] = useState<number[]>([])
+  const [dragIndex, setDragIndex] = useState<number | undefined>(undefined)
+
   const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
 
   const [filterList, setFilterList] = useState<string[]>(() => {
@@ -298,8 +306,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     }
     return (
       Object.keys(row).map((key, index) => {
-        let value = row[key as keyof typeof row]
+        const value = row[key as keyof typeof row]
-        
         return (
           <Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
             <Grid2 size={{ xs: 4 }} alignContent={"center"} >
@@ -345,7 +352,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                   padding: gutterPadding
                 }} 
                 onClick={(event) => handleCollapse(index, event)} 
-                // style={{pre}}
               >
                 <IconButton 
                   sx={{
@@ -430,6 +436,76 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     return null;
   }
 
+  const resizeClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => {
+    console.log("click!")
+    // console.log(event.currentTarget.clientWidth)
+    // console.log(event.currentTarget.offsetWidth)
+    // console.log(event.currentTarget.scrollWidth)
+    // console.log(event.currentTarget.parentElement?.clientWidth)
+    // console.log(event.currentTarget.parentElement?.offsetWidth)
+    // console.log(event.currentTarget.parentElement?.scrollWidth)
+    // console.log(event.currentTarget.parentElement?.childNodes.keys)
+    let newWidths: number[] = []
+    event.currentTarget.parentElement?.parentElement?.parentElement?.childNodes.forEach(node => {
+      // console.log(node.textContent)
+      // console.log(node)
+      if (node instanceof HTMLElement) {
+        // console.log(node.clientWidth);
+        newWidths.push(node.clientWidth)
+      }
+    })
+    // console.log(event.clientX)
+    setRowWidths(newWidths)
+    setTempWidth(event.currentTarget.parentElement?.clientWidth)
+    setDragStart(event.clientX)
+    setDragIndex(index)
+
+    window.addEventListener('mousemove', resizeDrag);
+    window.addEventListener('mouseup', resizeUnclick);
+    // return (
+
+    // )
+  }
+
+  // useEffect(() => {
+  //   console.log(tempWidth)
+  //   console.log(tempWidth)
+  // }, [tempWidth])
+
+  const resizeUnclick = () => {
+    console.log("unclick!")
+    // setDragStart(undefined)
+    window.removeEventListener('mousemove', resizeDrag);
+    window.removeEventListener('mouseup', resizeUnclick);
+  }
+
+  const resizeDrag = (e: any) => {
+    if (!dragIndex) return
+    if (!rowWidths[dragIndex]) return
+    if (!rowWidths[dragIndex+1]) return
+    if (!dragStart) return
+
+    console.log((dragStart - e.clientX))
+
+    let newWidths: number[] = [...rowWidths]
+    newWidths[dragIndex] = newWidths[dragIndex] - (dragStart - e.clientX)
+    newWidths[dragIndex+1] = newWidths[dragIndex+1] + (dragStart - e.clientX)
+    setRowWidths(newWidths)
+    // if (!dragStart) return
+    // console.log(dragStart)
+    // console.log(e.clientX)
+    // if (dragStart) console.log(dragStart - e.clientX)
+    // console.log("drag!")
+    // if (dragStart && tempWidth) setTempWidth(tempWidth - (dragStart - e.clientX))
+    // return (
+
+    // )
+  }
+
+  useEffect(() => {
+    console.log(rowWidths)
+  }, [rowWidths])
+
   return (
     <TableContainer className={classes.tableContainer} component={Paper}>
       <Table>
@@ -501,6 +577,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                       </Grid2>
                       <Grid2
                         sx={{ cursor: "col-resize" }}
+                        onMouseDown={event => resizeClick(event, index)}
                       >
                         |
                       </Grid2>
@@ -559,15 +636,41 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                     }
                     {columns ? 
                       columns.map((column, j) => {
+                        // console.log(j)
                         if (filterList.includes(column.title) || column.hidden) return null
                         if (column.render) return (
-                          <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
+                          // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
+                          <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0, width: rowWidths[j] ? rowWidths[j] : undefined}}>
                             {column.render(row)}
                           </TableCell>
                         )
+                        // if (column.render && j!==undefined && j === 1) return (
+                        //   // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
+                        //   <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0}}>
+                        //     {column.render(row)}
+                        //   </TableCell>
+                        // )
+                        // if (column.render && j!==undefined && j === 2) return (
+                        //   // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
+                        //   <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0, width: tempWidth ? tempWidth : undefined}}>
+                        //     {column.render(row)}
+                        //   </TableCell>
+                        // )
+                        // if (column.render && j!==undefined && j === 3) return (
+                        //   // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
+                        //   <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0, width: tempWidth2 ? tempWidth2 : undefined}}>
+                        //     {column.render(row)}
+                        //   </TableCell>
+                        // )
+                        // if (column.render) return (
+                        //   // <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
+                        //   <TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0}}>
+                        //     {column.render(row)}
+                        //   </TableCell>
+                        // )
                         return (
                           <TableCell key={"row-"+index+"cell-"+j}>
-                            {Object.values(row)[j].toString()}
+                            {Object.values(row)[j] && Object.values(row)[j].toString()}
                           </TableCell>
                         )
                       })

src/pages/Devices.tsx

@@ -27,7 +27,6 @@ import StatusSen5x from "common/StatusSen5x";
 import StatusDust from "common/StatusDust";
 import StatusGas from "common/StatusGas";
 import { cloneDeep } from "lodash";
-import { or } from "utils";
 import LoadingScreen from "app/LoadingScreen";
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -388,12 +387,14 @@ export default function Devices() {
     let columns: Column<Device>[] = [
       {
         title: "State",
+        // cellStyle: {width: 100000},
         // sortKey: "state",
         render: (device: Device) => {
           const status = device.status ?? pond.DeviceStatus.create()
           const deviceStateHelper = getDeviceStateHelper(status.state);
           return (
-            <Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
+            // <Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
+            <Box >
               <Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>
             </Box>
           )
@@ -408,10 +409,12 @@ export default function Devices() {
       },
       {
         title: "Device",
+        cellStyle: { width: 160 },
         sortKey: "name",
         render: (device: Device) => {
           return (
-            <Box className={classes.cellContainer}>
+            // <Box className={classes.cellContainer}>
+            <Box >
               <Chip 
                 variant="outlined"
                 label={device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId} 
@@ -423,11 +426,12 @@ export default function Devices() {
       },
       {
         title: "Description",
+        cellStyle: { width: 400 },
         render: (device: Device) => {
           const description = device.settings?.description ?? ""
           let size = (hasCo2 && !groupGas) ? 26 : 36
           return (
-            <Box className={classes.descriptionCellContainer} width={size*6}>
+            <Box >
               <Tooltip title={description}>
                 <span>
                   {description.length > size
@@ -697,9 +701,7 @@ export default function Devices() {
             dense
           >
             <ListItemIcon>
-              <Checkbox 
+              <Checkbox checked={!separateDust} />
-                checked={!separateDust}
-              />
             </ListItemIcon>
             <ListItemText primary={"Group Dust"} />
           </MenuItem>
@@ -709,10 +711,7 @@ export default function Devices() {
             dense
           >
             <ListItemIcon>
-              <Checkbox 
+              <Checkbox checked={groupGas} />
-                checked={groupGas}
-
-              />
             </ListItemIcon>
             <ListItemText primary={"Group Gas"} />
           </MenuItem>