store column order in local storage, refactor a bit

frontend/src/components/db-table-view/columns-dropdown.tsx

@@ -73,7 +73,7 @@ export function ColumnsDropdown<T>({
     if (active.id !== over?.id) {
       setColumnOrder((items) => {
         const oldIndex = items.findIndex((id) => id === active.id);
-        const newIndex = items.findIndex((id) => id === over.id);
+        const newIndex = items.findIndex((id) => id === over?.id);
 
         return arrayMove(items, oldIndex, newIndex);
       });
@@ -81,7 +81,7 @@ export function ColumnsDropdown<T>({
   }
 }
 
-const SortableItem = ({ column }: { column: Column<any> }) => {
+const SortableItem = <T,>({ column }: { column: Column<T> }) => {
   const {
     attributes,
     listeners,

frontend/src/components/db-table-view/columns.tsx

@@ -4,7 +4,7 @@ import { useSettingsStore } from "@/state";
 import type { ColumnDef } from "@tanstack/react-table";
 import { useMemo } from "react";
 
-const buildColumns = ({
+const buildColumns = <T,>({
   columns,
   formatDates,
   showImagesPreview,
@@ -13,8 +13,8 @@ const buildColumns = ({
 
   formatDates: boolean;
   showImagesPreview: boolean;
-}): ColumnDef<any>[] => {
+}): ColumnDef<T>[] => {
-  if (!columns) return [] as ColumnDef<any>[];
+  if (!columns) return [] as ColumnDef<T>[];
 
   return columns.map(({ column_name, udt_name, data_type }) => ({
     accessorKey: column_name,
@@ -67,6 +67,9 @@ const buildColumns = ({
           </a>
         );
       }
+      if (typeof finalValue === "boolean") {
+        finalValue = finalValue ? "true" : "false";
+      }
       return (
         <div
           className={cn(
@@ -79,7 +82,7 @@ const buildColumns = ({
         </div>
       );
     },
-  })) as ColumnDef<any>[];
+  })) as ColumnDef<T>[];
 };
 
 export const useColumns = ({

frontend/src/components/db-table-view/data-table.tsx

@@ -1,124 +0,0 @@
-import {
-  TableScrollContainer,
-  TableView,
-} from "@/components/db-table-view/table";
-import { DataTablePagination } from "@/components/ui";
-import { useTableDataQuery } from "@/services/db";
-import {
-  type OnChangeFn,
-  type PaginationState,
-  type SortingState,
-  type VisibilityState,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { Rows3 } from "lucide-react";
-import { useCallback, useState } from "react";
-import { useColumns } from "./columns";
-import { ColumnsDropdown } from "./columns-dropdown";
-import {
-  WhereClauseForm,
-  type WhereClauseFormValues,
-} from "./where-clause-form";
-
-export const DataTable = ({
-  tableName,
-  dbName,
-  pageIndex,
-  pageSize,
-  onPageSizeChange,
-  onPageIndexChange,
-}: {
-  tableName: string;
-  pageIndex: number;
-  dbName: string;
-  pageSize: number;
-  onPageIndexChange: (pageIndex: number) => void;
-  onPageSizeChange: (pageSize: number) => void;
-}) => {
-  const columns = useColumns({ dbName, tableName });
-  const [whereQuery, setWhereQuery] = useState("");
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-
-  const { data, refetch } = useTableDataQuery({
-    whereQuery,
-    tableName,
-    dbName,
-    perPage: pageSize,
-    page: pageIndex,
-    sortDesc: sorting[0]?.desc,
-    sortField: sorting[0]?.id,
-  });
-
-  const handleWhereClauseFormSubmit = useCallback(
-    ({ whereClause }: WhereClauseFormValues) => {
-      if (whereClause === whereQuery) {
-        void refetch();
-        return;
-      }
-      setWhereQuery(whereClause);
-    },
-    [whereQuery, refetch],
-  );
-
-  const paginationUpdater: OnChangeFn<PaginationState> = (args) => {
-    if (typeof args === "function") {
-      const newArgs = args({
-        pageIndex,
-        pageSize,
-      });
-      if (newArgs.pageSize !== pageSize) {
-        onPageSizeChange(newArgs.pageSize);
-      } else if (newArgs.pageIndex !== pageIndex) {
-        onPageIndexChange(newArgs.pageIndex);
-      }
-    } else {
-      onPageSizeChange(args.pageSize);
-      onPageIndexChange(args.pageIndex);
-    }
-  };
-
-  const table = useReactTable({
-    data: data?.data ?? [],
-    columns,
-    columnResizeMode: "onChange",
-    getCoreRowModel: getCoreRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    rowCount: data?.count ?? 0,
-    manualSorting: true,
-    onSortingChange: setSorting,
-    state: {
-      sorting,
-      columnVisibility,
-      pagination: {
-        pageIndex,
-        pageSize,
-      },
-    },
-    onPaginationChange: paginationUpdater,
-    manualPagination: true,
-  });
-
-  return (
-    <div className={"flex flex-col gap-4 flex-1 max-h-full pb-3"}>
-      <div className={"flex gap-4 items-center justify-between"}>
-        <h1 className="text-2xl font-bold flex items-center gap-2">
-          <Rows3 /> {tableName}
-          <WhereClauseForm onSubmit={handleWhereClauseFormSubmit} />
-        </h1>
-        <ColumnsDropdown table={table} />
-        <p>
-          Rows: <strong>{data?.count}</strong>
-        </p>
-      </div>
-
-      <div className="rounded-md border min-h-0 h-full w-full min-w-0 flex flex-col">
-        <TableScrollContainer>
-          <TableView table={table} columnLength={columns.length} />
-        </TableScrollContainer>
-      </div>
-      <DataTablePagination table={table} />
-    </div>
-  );
-};

frontend/src/components/db-table-view/reset-state-dropdown.tsx

@@ -0,0 +1,35 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+} from "@/components/ui";
+import type { Table } from "@tanstack/react-table";
+import { RotateCcw } from "lucide-react";
+
+export const ResetStateDropdown = <T,>({ table }: { table: Table<T> }) => {
+  return (
+    <DropdownMenu>
+      <Tooltip content={"Reset state"}>
+        <DropdownMenuTrigger asChild>
+          <Button variant={"outline"} size={"icon"}>
+            <RotateCcw className={"size-[1.2rem]"} />
+          </Button>
+        </DropdownMenuTrigger>
+      </Tooltip>
+      <DropdownMenuContent align={"end"}>
+        <DropdownMenuItem onSelect={() => table.resetColumnOrder()}>
+          Reset Column Order
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => table.resetColumnSizing()}>
+          Reset Column Sizing
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => table.resetColumnVisibility()}>
+          Reset Column Visibility
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

frontend/src/components/sidebar/sidebar.tsx

@@ -94,7 +94,6 @@ function SidebarContent() {
                 aria-label={"Explore Data"}
                 to={"/db/$dbName/tables/$tableName/data"}
                 params={{ tableName: table.table_name, dbName: dbName }}
-                search={{ pageIndex: 0, pageSize: 10 }}
               >
                 <Rows3 className={"size-4 shrink-0"} />
               </Link>

frontend/src/routes/auth/login.tsx

@@ -21,7 +21,12 @@ import { useSessionStore } from "@/state/db-session-store";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
-import { type Control, useForm } from "react-hook-form";
+import {
+  type Control,
+  type FieldPath,
+  type FieldValues,
+  useForm,
+} from "react-hook-form";
 import { z } from "zod";
 
 export const Route = createFileRoute("/auth/login")({
@@ -56,7 +61,7 @@ function ConnectionStringForm({
       onSubmit={handleSubmit(onSubmit)}
       id={"login-form"}
     >
-      <DatabaseTypeSelector control={control} />
+      <DatabaseTypeSelector control={control} name={"type"} />
       <FormInput
         label={"Connection string"}
         name={"connectionString"}
@@ -104,7 +109,7 @@ function ConnectionFieldsForm({
       onSubmit={handleSubmit(onSubmit)}
       id={"login-form"}
     >
-      <DatabaseTypeSelector control={control} />
+      <DatabaseTypeSelector control={control} name={"type"} />
       <FormInput
         name={"host"}
         control={control}
@@ -193,15 +198,17 @@ function LoginForm() {
   );
 }
 
-function DatabaseTypeSelector({
+function DatabaseTypeSelector<T extends FieldValues>({
   control,
+  name,
 }: {
-  control: Control<any>;
+  control: Control<T>;
+  name: FieldPath<T>;
 }) {
   return (
     <div className="grid gap-2">
       <Label htmlFor="dbType">Database type</Label>
-      <FormSelect control={control} name={"type"}>
+      <FormSelect control={control} name={name}>
         <SelectTrigger className="w-full" id={"dbType"}>
           <SelectValue />
         </SelectTrigger>

frontend/src/routes/db/$dbName/tables/$tableName/data.tsx

@@ -1,5 +1,6 @@
 import { useColumns } from "@/components/db-table-view/columns";
 import { ColumnsDropdown } from "@/components/db-table-view/columns-dropdown";
+import { ResetStateDropdown } from "@/components/db-table-view/reset-state-dropdown";
 import {
   TableScrollContainer,
   TableView,
@@ -29,8 +30,8 @@ import { useLocalStorage } from "usehooks-ts";
 import { z } from "zod";
 
 const tableSearchSchema = z.object({
-  pageSize: z.number().catch(10),
+  pageSize: z.number().optional(),
-  pageIndex: z.number().catch(0),
+  pageIndex: z.number().optional(),
   sortField: z.string().optional(),
   sortDesc: z.boolean().optional(),
 });
@@ -42,6 +43,7 @@ export const Route = createFileRoute("/db/$dbName/tables/$tableName/data")({
 
 function Component() {
   const { tableName, dbName } = Route.useParams();
+  const columns = useColumns({ dbName, tableName });
 
   const { filters, setFilters } = useFilters(Route.fullPath);
   const [whereQuery, setWhereQuery] = useState("");
@@ -54,6 +56,15 @@ function Component() {
       `columnVisibility-${dbName}-${tableName}`,
       {},
     );
+  const [columnOrder, setColumnOrder] = useLocalStorage<string[]>(
+    `columnOrder-${dbName}-${tableName}`,
+    () => columns.map((c) => c.id ?? ""),
+  );
+
+  useEffect(() => {
+    if (columnOrder.length === columns.length) return;
+    setColumnOrder(columns.map((c) => c.id ?? ""));
+  }, [columns, columnOrder.length, setColumnOrder]);
 
   const paginationState = useMemo(
     () => ({
@@ -64,20 +75,13 @@ function Component() {
   );
 
   const sortingState = useMemo(() => sortByToState(filters), [filters]);
-  const columns = useColumns({ dbName, tableName });
+
-  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
-    columns.map((c) => c.id ?? ""),
-  );
-  useEffect(() => {
-    if (columnOrder.length !== 0) return;
-    setColumnOrder(columns.map((c) => c.id ?? ""));
-  }, [columns, columnOrder.length]);
   const { data, refetch } = useTableDataQuery({
     whereQuery,
     tableName,
     dbName,
-    perPage: filters.pageSize,
+    perPage: filters.pageSize ?? DEFAULT_PAGE_SIZE,
-    page: filters.pageIndex,
+    page: filters.pageIndex ?? DEFAULT_PAGE_INDEX,
     sortField: filters.sortField,
     sortDesc: filters.sortDesc,
   });
@@ -150,6 +154,7 @@ function Component() {
             columnOrder={columnOrder}
             setColumnOrder={setColumnOrder}
           />
+          <ResetStateDropdown table={table} />
           <p>
             Rows: <strong>{data?.count}</strong>
           </p>

frontend/src/routes/db/$dbName/tables/$tableName/index.tsx

@@ -97,10 +97,6 @@ function TableDetailsTable() {
           <Link
             from={Route.fullPath}
             to={"./data"}
-            search={{
-              pageIndex: 0,
-              pageSize: 10,
-            }}
             className={cn("flex gap-2 items-center", "hover:underline")}
           >
             Explore data <ArrowRight className={"size-4"} />