feat: add sort by col array prop

packages/main/plugins/Cardinality/Configurator.tsx

@@ -183,7 +183,7 @@ const Configurator: React.FC<ConfiguratorProps> = ({
                     <div className={cx(StyledTabsCont(theme))}>
                         <StyledTabs value={activeTab} onChange={onTabChange}>
                             <StyledTab label="Series" />
-                            <StyledTab label="In Process" />
+                            <StyledTab label="Maintainance" />
                         </StyledTabs>
                     </div>
                 </div>

packages/main/plugins/Cardinality/TotalsPanel/CardinalityTotals.tsx

@@ -2,20 +2,51 @@
  * Cardinality totals
  * A view for the delete actions on the cardinality main view
  */
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { totalsMock } from "../api/mock";
 import { cx } from "@emotion/css";
 import { PROCESS_HEADERS } from "./consts";
 import { TotalRowStyle } from "./style";
 import useTheme from "@ui/theme/useTheme";
 import { TotalsRow } from "./TotalsRow";
 
+import "./array_helper.mjs";
+
 export default function CardinalityTotals({ isLoading }) {
     const theme = useTheme();
-    const [totals] = useState(totalsMock);
+    const [totals, setTotals] = useState(totalsMock);
+    const [sort, setSort] = useState("asc");
+
+    const sortByProperty = useCallback(
+        (column: string) => {
+            const numberCols = [];
+
+            setTotals((prev) => {
+                let prevCols = [...prev];
+                if (numberCols.includes(column)) {
+                    return prevCols.sortColByNumber(column, sort);
+                }
+                return prevCols.sortColByString(column, sort);
+            });
 
+            setSort((prev) => (prev === "asc" ? "desc" : "asc"));
+        },
+        [totals]
+    );
     return (
         <div className={cx(TotalRowStyle(theme))}>
+            <div
+                style={{
+                    textAlign: "center",
+                    padding: "10px 0px",
+                    margin: "0px 4px",
+                    fontSize: "12px",
+                    borderRadius: "3px",
+                    background: theme.shadow,
+                }}
+            >
+                Deleted fingerprints in Maintainance mode
+            </div>
             <div className="table">
                 <div className="table-header">
                     {PROCESS_HEADERS?.map((header) => (

packages/main/plugins/Cardinality/TotalsPanel/array_helper.mts

@@ -0,0 +1,58 @@
+export {};
+
+declare global {
+    interface Array<T> {
+        sortColByNumber(col: string, sort: string): Array<T>;
+        sortColByString(col: string, sort: string): Array<T>;
+    }
+}
+
+if (!Array.prototype.sortColByNumber) {
+    Array.prototype.sortColByNumber = function <T>(
+        col: string,
+        sort: string
+    ): T[] {
+        // desc
+        if (sort === "asc") {
+            return this.sort((a, b) => a[col] - b[col]);
+        }
+        return this.sort((a, b) => b[col] - a[col]);
+    };
+}
+
+if (!Array.prototype.sortColByString) {
+    Array.prototype.sortColByString = function <T>(
+        col: string,
+        sort: string
+    ): T[] {
+        if (sort === "asc") {
+            return this.sort((a, b) => {
+                const colA = a[col].toUpperCase(); // ignore upper and lowercase
+                const colB = b[col].toUpperCase(); // ignore upper and lowercase
+                if (colA < colB) {
+                    return -1;
+                }
+                if (colA > colB) {
+                    return 1;
+                }
+
+                // names must be equal
+                return 0;
+            });
+        }
+
+        return this.sort((a, b) => {
+            const colA = a[col].toUpperCase(); // ignore upper and lowercase
+            const colB = b[col].toUpperCase(); // ignore upper and lowercase
+            if (colB < colA) {
+                return -1;
+            }
+            if (colB > colA) {
+                return 1;
+            }
+
+            // names must be equal
+            return 0;
+        });
+    };
+}

packages/main/plugins/Cardinality/TotalsPanel/style.tsx

@@ -14,9 +14,15 @@ export const TotalRowStyle = (theme: QrynTheme) => css`
         display: table-header-group;
         font-size: 10px;
         text-transform: uppercase;
+
         .cell {
             font-size: 10px;
             letter-spacing: 1px;
+            cursor: pointer;
+            margin: 1px;
+            &:hover {
+                background: ${theme.deep};
+            }
         }
     }
     .table-row {