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",
-        render: (row: jsonBin) => <Box padding={2}>{row.Manufacturer}</Box>
-      },
-      {
-        title: "Model",
-        render: (row: jsonBin) => <Box padding={2}>{row.Model}</Box>
-      },
-      {
-        title: "Capacity",
-        render: (row: jsonBin) => <Box padding={2}>{row.Capacity}</Box>
-      },
-      {
-        title: "Hopper Angle",
-        render: (row: jsonBin) => <Box padding={2}>{row.HopperAngle}</Box>
-      },
-      {
-        title: "Diameter " + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
-        render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Diameter).toFixed(2)}</Box>
-      },
-      {
-        title: "Sidewall" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
-        render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Sidewall).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: "Eave To Peak" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
-        render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.EaveToPeak).toFixed(2)}</Box>
-      },
-      {
-        title: "Roof Angle",
-        render: (row: jsonBin) => <Box padding={2}>{row.RoofAngle}</Box>
-      },
-      {
-        title: "Rings",
-        render: (row: jsonBin) => <Box padding={2}>{row.Rings}</Box>
-      }
-    ]
+    {
+      title: "Manufacturer",
+      sortKey: "Manufacturer",
+      render: (row: jsonBin) => <Box padding={2}>{row.Manufacturer}</Box>
+    },
+    {
+      title: "Model",
+      sortKey: "Model",
+      render: (row: jsonBin) => <Box padding={2}>{row.Model}</Box>
+    },
+    {
+      title: "Capacity",
+      sortKey: "Capacity",
+      render: (row: jsonBin) => <Box padding={2}>{row.Capacity}</Box>
+    },
+    {
+      title: "Hopper Angle",
+      sortKey: "HopperAngle",
+      render: (row: jsonBin) => <Box padding={2}>{row.HopperAngle}</Box>
+    },
+    {
+      title: "Diameter " + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
+      sortKey: "Diameter",
+      render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Diameter).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: "Peak Height" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
+      sortKey: "PeakHeight",
+      render: (row: jsonBin) => <Box padding={2}>{distanceConversion(row.Peak).toFixed(2)}</Box>
+    },
+    {
+      title: "Eave To Peak" + (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "(ft)" : "(m)"),
+      sortKey: "EaveToPeak",
+      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}
       />
     );
   };