Merge branch 'master' of https://git.sentientgeeks.us/Amit/mui-demo-project

src/components/table/TanStackTable.tsx

@@ -14,13 +14,30 @@ const TanStackTable = ({ data }: any) => {
   const [tableData, setTableData] = useState([]);
   const [open, setOpen] = useState(false);
   const [reviewModalData, setReviewModalData] = useState([]);
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc" | null>(null);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
+  const handleSort = (key: string) => {
+    let sortedData;
+    if (sortOrder === "asc") {
+      sortedData = [...tableData].sort((a, b) => (a[key] > b[key] ? -1 : 1));
+      setSortOrder("desc");
+    } else {
+      sortedData = [...tableData].sort((a, b) => (a[key] > b[key] ? 1 : -1));
+      setSortOrder("asc");
+    }
+    setTableData(sortedData);
+  };
+
   /** Set Title and api data object key for the Table title and data */
   const columns: any = [
     {
-      header: "ID",
+      header: (
+        <div onClick={() => handleSort("id")}>
+          ID {sortOrder === "asc" ? "↑" : sortOrder === "desc" ? "↓" : ""}
+        </div>
+      ),
       accessorKey: "id",
     },
     {