implemented column ordering in bin cable estimator

src/cableEstimator/cableEstimator.tsx

@@ -61,6 +61,8 @@ export default function CableEstimator() {
   const [tablePage, setTablePage] = useState(0)
   const [pageSize, setPageSize] = useState(10)
   const [rowCount, setRowCount] = useState(0)
+  const [orderBy, setOrderBy] = useState<string>("")
+  const [order, setOrder] = useState<"asc" | "desc">("asc")
   const [selectedBin, setSelectedBin] = useState<jsonBin | undefined>();
   const [quoteOpen, setQuoteOpen] = useState(false);
   const [useCustomBin, setUseCustomBin] = useState(false);
@@ -106,47 +108,57 @@ export default function CableEstimator() {
   const [loading, setLoading] = useState(false)
 
   const columns: Column<jsonBin>[] = [
-      {
+    {
-        title: "Manufacturer",
+      title: "Manufacturer",
-        render: (row: jsonBin) => <Box padding={2}>{row.Manufacturer}</Box>
+      sortKey: "Manufacturer",
-      },
+      render: (row: jsonBin) => <Box padding={2}>{row.Manufacturer}</Box>
-      {
+    },
-        title: "Model",
+    {
-        render: (row: jsonBin) => <Box padding={2}>{row.Model}</Box>
+      title: "Model",
-      },
+      sortKey: "Model",
-      {
+      render: (row: jsonBin) => <Box padding={2}>{row.Model}</Box>
-        title: "Capacity",
+    },
-        render: (row: jsonBin) => <Box padding={2}>{row.Capacity}</Box>
+    {
-      },
+      title: "Capacity",
-      {
+      sortKey: "Capacity",
-        title: "Hopper Angle",
+      render: (row: jsonBin) => <Box padding={2}>{row.Capacity}</Box>
-        render: (row: jsonBin) => <Box padding={2}>{row.HopperAngle}</Box>
+    },
-      },
+    {
-      {
+      title: "Hopper Angle",
-        title: "Diameter " + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
+      sortKey: "HopperAngle",
-        render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Diameter).toFixed(2)}</Box>
+      render: (row: jsonBin) => <Box padding={2}>{row.HopperAngle}</Box>
-      },
+    },
-      {
+    {
-        title: "Sidewall" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
+      title: "Diameter " + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
-        render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Sidewall).toFixed(2)}</Box>
+      sortKey: "Diameter",
-      },
+      render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Diameter).toFixed(2)}</Box>
-      {
+    },
-        title: "Peak Height" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
+    {
-        render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Peak).toFixed(2)}</Box>
+      title: "Sidewall" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
-      },
+      sortKey: "Sidewall",
-      {
+      render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Sidewall).toFixed(2)}</Box>
-        title: "Eave To Peak" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
+    },
-        render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.EaveToPeak).toFixed(2)}</Box>
+    {
-      },
+      title: "Peak Height" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
-      {
+      sortKey: "PeakHeight",
-        title: "Roof Angle",
+      render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Peak).toFixed(2)}</Box>
-        render: (row: jsonBin) => <Box padding={2}>{row.RoofAngle}</Box>
+    },
-      },
+    {
-      {
+      title: "Eave To Peak" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
-        title: "Rings",
+      sortKey: "EaveToPeak",
-        render: (row: jsonBin) => <Box padding={2}>{row.Rings}</Box>
+      render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.EaveToPeak).toFixed(2)}</Box>
-      }
+    },
-    ]
+    {
+      title: "Roof Angle",
+      sortKey: "RoofAngle",
+      render: (row: jsonBin) => <Box padding={2}>{row.RoofAngle}</Box>
+    },
+    {
+      title: "Rings",
+      sortKey: "Rings",
+      render: (row: jsonBin) => <Box padding={2}>{row.Rings}</Box>
+    }
+  ]
 
   useEffect(()=>{
     setLoading(true)
@@ -154,6 +166,21 @@ export default function CableEstimator() {
     let clone: jsonBin[] = cloneDeep(binOptions)
     //having the search filter in here is quite inefficient as it will filter each time you change pages as well 
     //TODO: re-work the filter so it only filters when the search is changed
+    
+    // 
+    clone.sort((a, b) => {
+      if (Object.keys(a).includes(orderBy)) {
+        let by = orderBy as keyof jsonBin
+        if (typeof(a[by]) === "string") {
+          // return a.localeCompare(b)
+          return (a[by].localeCompare(b[by] as string))
+        }
+        return ((b[by] as any) - (a[by] as any))
+      }
+      return 0
+    })
+    if (order === "desc") clone.reverse()
+
     if(tableSearch !== ""){
       //filter the data in the cloned list
       clone = clone.filter(bin => {
@@ -175,7 +202,7 @@ export default function CableEstimator() {
     let rows = clone.splice(tablePage * pageSize, pageSize)
     setDisplayedRows(rows)
     setLoading(false)
-  },[binOptions, tablePage, pageSize, tableSearch])
+  },[binOptions, tablePage, pageSize, tableSearch, orderBy, order])
 
   const binOpTable = () => {
     return (
@@ -193,6 +220,10 @@ export default function CableEstimator() {
         handleRowsPerPageChange={(e) => {setPageSize(e.target.value)}}
         rows={displayedRows}
         total={rowCount}
+        order={order}
+        setOrder={setOrder}
+        orderBy={orderBy}
+        setOrderBy={setOrderBy}
       />
     );
   };

src/common/ResponsiveTable.tsx

@@ -385,20 +385,20 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   }
 
   const columnClick = (column: Column<T>) => {
-    const sortKey = column.sortKey ? column.sortKey : column.title
+    const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
-    console.log(column.sortKey)
+    // console.log(column.sortKey)
     if (setOrderBy) setOrderBy(sortKey)
     if (setOrder && order) setOrder(order === "asc" ? "desc" : "asc")
   }
 
   const showOrderIcon = (column: Column<T>) => {
     if (!orderBy) return
-    const sortKey = column.sortKey ? column.sortKey : column.title
+    const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
     if (sortKey === orderBy) {
       if (order === "asc") {
-        return <ArrowDownward/>
+        return <ArrowDownward fontSize="small"/>
       } else {
-        return <ArrowUpward/>
+        return <ArrowUpward fontSize="small"/>
       }
     }
     return null;

src/pages/Devices.tsx

@@ -301,7 +301,7 @@ export default function Devices() {
     let columns: Column<Device>[] = [
       {
         title: "State",
-        sortKey: "state",
+        // sortKey: "state",
         render: (device: Device) => {
           const status = device.status ?? pond.DeviceStatus.create()
           const deviceStateHelper = getDeviceStateHelper(status.state);
@@ -370,8 +370,8 @@ export default function Devices() {
     if (hasPlenums) {
       columns.push({
         title: "Plenum",
-        sortKey: "hi",
+        // sortKey: "hi",
-        disableSort: true,
+        // disableSort: true,
         render: (device: Device) => {
           if (device.status.plenum?.temperature) {
             return (
@@ -390,8 +390,8 @@ export default function Devices() {
     if (hasSen5x) {
       columns.push({
         title: "Sen5X",
-        sortKey: "hi",
+        // sortKey: "hi",
-        disableSort: true,
+        // disableSort: true,
         render: (device: Device) => {
           if (device.status.sen5x?.temperature) {
             return (