chore: add sorting to provider's table

components/providers/table/ColumnsProvider.tsx

@@ -18,6 +18,7 @@ import { CheckConnectionProvider } from "../CheckConnectionProvider";
 import { DateWithTime } from "../DateWithTime";
 import { DeleteProvider } from "../DeleteProvider";
 import { ProviderInfo } from "../ProviderInfo";
+import { DataTableColumnHeader } from "./DataTableColumnHeader";
 
 const getProviderData = (row: { original: ProviderProps }) => {
   return row.original;
@@ -30,7 +31,9 @@ export const ColumnsProvider: ColumnDef<ProviderProps>[] = [
   },
   {
     accessorKey: "account",
-    header: "Account",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={"Account"} param="alias" />
+    ),
     cell: ({ row }) => {
       const {
         attributes: { connection, provider, alias, provider_id },
@@ -55,7 +58,13 @@ export const ColumnsProvider: ColumnDef<ProviderProps>[] = [
   },
   {
     accessorKey: "lastScan",
-    header: "Last Scan",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Last Scan"}
+        param="updated_at"
+      />
+    ),
     cell: ({ row }) => {
       const {
         attributes: { updated_at },
@@ -86,7 +95,13 @@ export const ColumnsProvider: ColumnDef<ProviderProps>[] = [
   },
   {
     accessorKey: "added",
-    header: "Added",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={"Added"}
+        param="inserted_at"
+      />
+    ),
     cell: ({ row }) => {
       const {
         attributes: { inserted_at },

components/providers/table/DataTableColumnHeader.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@nextui-org/react";
 import { Column } from "@tanstack/react-table";
 import {
@@ -5,25 +7,61 @@ import {
   ArrowUpIcon,
   ChevronsLeftRightIcon,
 } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { HTMLAttributes } from "react";
 
 interface DataTableColumnHeaderProps<TData, TValue>
   extends HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   title: string;
+  param?: string;
 }
 
 export const DataTableColumnHeader = <TData, TValue>({
   column,
   title,
-  className,
+  param,
 }: DataTableColumnHeaderProps<TData, TValue>) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const getToggleSortingHandler = () => {
+    const currentSortParam = searchParams.get("sort");
+    let newSortParam = "";
+
+    if (
+      !currentSortParam ||
+      currentSortParam === "" ||
+      currentSortParam !== param
+    ) {
+      // Sort ascending for the first time or switch to a different column
+      newSortParam = `${param}`;
+    } else if (currentSortParam === param) {
+      // If already sorting ascending, switch to descending
+      newSortParam = `-${param}`;
+    } else if (currentSortParam === `-${param}`) {
+      // If already sorting descending, remove sorting
+      newSortParam = "";
+    }
+
+    // Construct the new URL with the sorting parameter
+    const newUrl = newSortParam ? `${pathname}?sort=${newSortParam}` : pathname;
+
+    router.push(newUrl, {
+      scroll: false,
+    });
+  };
   const renderSortIcon = () => {
-    const sort = column.getIsSorted();
-    if (!sort) {
+    const currentSortParam = searchParams.get("sort");
+    if (
+      !currentSortParam ||
+      currentSortParam === "" ||
+      (currentSortParam !== param && currentSortParam !== `-${param}`)
+    ) {
       return <ChevronsLeftRightIcon className="ml-2 h-4 w-4 rotate-90" />;
     }
-    return sort === "desc" ? (
+    return currentSortParam === `-${param}` ? (
       <ArrowDownIcon className="ml-2 h-4 w-4" />
     ) : (
       <ArrowUpIcon className="ml-2 h-4 w-4" />
@@ -31,19 +69,18 @@ export const DataTableColumnHeader = <TData, TValue>({
   };
 
   if (!column.getCanSort()) {
-    return <div className={className}>{title}</div>;
+    return <div>{title}</div>;
   }
+
   return (
-    <div className={className}>
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-8"
-        onClick={column.getToggleSortingHandler()}
-      >
-        <span>{title}</span>
-        {renderSortIcon()}
-      </Button>
-    </div>
+    <Button
+      variant="light"
+      size="md"
+      className="h-8"
+      onClick={getToggleSortingHandler}
+    >
+      <span>{title}</span>
+      {renderSortIcon()}
+    </Button>
   );
 };