fix: use server side sorting for config summary

Author: mainawycliffe

src/components/Configs/ConfigSummary/ConfigSummaryList.tsx

@@ -6,6 +6,7 @@ import {
 import { Badge } from "@flanksource-ui/ui/Badge/Badge";
 import { CountBadge } from "@flanksource-ui/ui/Badge/CountBadge";
 import { DataTable } from "@flanksource-ui/ui/DataTable";
+import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import { CellContext, ColumnDef, Row } from "@tanstack/react-table";
 import { useCallback, useMemo } from "react";
 import { BiLabel } from "react-icons/bi";
@@ -318,6 +319,8 @@ export default function ConfigSummaryList({
     return [...newColumns, ...configSummaryColumns];
   }, [groupBy, groupByTags]);
 
+  const [sortState, updateSortState] = useReactTableSortState();
+
   return (
     <DataTable
       stickyHead
@@ -330,6 +333,9 @@ export default function ConfigSummaryList({
       hiddenColumns={
         groupBy.length > 1 ? groupBy.slice(0, groupBy.length - 1) : undefined
       }
+      enableServerSideSorting
+      onTableSortByChanged={updateSortState}
+      tableSortByState={sortState}
       handleRowClick={handleRowClick}
       tableStyle={{ borderSpacing: "0" }}
       isLoading={isLoading}

src/ui/DataTable/Hooks/useReactTableSortState.tsx

@@ -0,0 +1,51 @@
+import { SortingState, Updater } from "@tanstack/react-table";
+import { useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+
+/**
+ *
+ * useReactTableSortState is a custom hook that manages the sorting state of a
+ * react-table instance. It uses the URL search params to store the sorting
+ * state. It returns the sorting state and a function to update the sorting state.
+ *
+ */
+export default function useReactTableSortState(
+  sortByKey = "sortBy",
+  sortOrderKey = "sortOrder"
+): [SortingState, (newSortBy: Updater<SortingState>) => void] {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const sortBy = searchParams.get(sortByKey) || undefined;
+  const sortOrder = searchParams.get(sortOrderKey) || undefined;
+
+  const tableSortByState = useMemo(() => {
+    if (!sortBy || !sortOrder) {
+      return [];
+    }
+    return [
+      {
+        id: sortBy,
+        desc: sortOrder === "desc"
+      }
+    ] satisfies SortingState;
+  }, [sortBy, sortOrder]);
+
+  console.log(tableSortByState);
+
+  const updateSortByFn = useCallback(
+    (newSortBy: Updater<SortingState>) => {
+      const sort = typeof newSortBy === "function" ? newSortBy([]) : newSortBy;
+      if (sort.length === 0) {
+        searchParams.delete(sortByKey);
+        searchParams.delete(sortOrderKey);
+      } else {
+        searchParams.set(sortByKey, sort[0]?.id);
+        searchParams.set(sortOrderKey, sort[0].desc ? "desc" : "asc");
+      }
+      setSearchParams(searchParams);
+    },
+    [searchParams, setSearchParams, sortByKey, sortOrderKey]
+  );
+
+  return [tableSortByState, updateSortByFn];
+}