chore: improve sorting

app/(prowler)/providers/page.tsx

@@ -16,9 +16,13 @@ export default async function Providers({
 }: {
   searchParams?: {
     query?: string;
-    page: string;
+    page?: string;
+    sort?: string;
+    filter?: string;
   };
 }) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
+
   return (
     <>
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
@@ -28,7 +32,7 @@ export default async function Providers({
           <AddProviderModal />
         </div>
         <Spacer y={6} />
-        <Suspense key={searchParams?.page} fallback={<SkeletonTableProvider />}>
+        <Suspense key={searchParamsKey} fallback={<SkeletonTableProvider />}>
           <SSRDataTable searchParams={searchParams} />
         </Suspense>
       </div>

components/providers/table/DataTableColumnHeader.tsx

@@ -30,19 +30,15 @@ export const DataTableColumnHeader = <TData, TValue>({
     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 (currentSortParam === `${param}`) {
       // If already sorting ascending, switch to descending
       newSortParam = `-${param}`;
     } else if (currentSortParam === `-${param}`) {
       // If already sorting descending, remove sorting
       newSortParam = "";
+    } else {
+      // Sort ascending for the first time or switch to a different column
+      newSortParam = `${param}`;
     }
 
     // Construct the new URL with the sorting parameter
@@ -76,7 +72,7 @@ export const DataTableColumnHeader = <TData, TValue>({
     <Button
       variant="light"
       size="md"
-      className="h-8"
+      className="text-slate-500 dark:text-slate-400 h-8"
       onClick={getToggleSortingHandler}
     >
       <span>{title}</span>