support server side table for admin users table

server/routers/user/adminListUsers.ts

@@ -1,31 +1,98 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
-import { db } from "@server/db";
+import { db, idp, users } from "@server/db";
 import response from "@server/lib/response";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
-import { sql, eq } from "drizzle-orm";
+import { and, asc, desc, eq, like, or, sql } from "drizzle-orm";
 import logger from "@server/logger";
-import { idp, users } from "@server/db";
 import { fromZodError } from "zod-validation-error";
+import { OpenAPITags, registry } from "@server/openApi";
+import type { PaginatedResponse } from "@server/types/Pagination";
+import { UserType } from "@server/types/UserTypes";
 
 const listUsersSchema = z.strictObject({
-    limit: z
+    pageSize: z.coerce
-        .string()
+        .number<string>()
+        .int()
+        .positive()
         .optional()
-        .default("1000")
+        .catch(20)
-        .transform(Number)
+        .default(20)
-        .pipe(z.int().nonnegative()),
+        .openapi({
-    offset: z
+            type: "integer",
-        .string()
+            default: 20,
+            description: "Number of items per page"
+        }),
+    page: z.coerce
+        .number<string>()
+        .int()
+        .min(0)
         .optional()
-        .default("0")
+        .catch(1)
-        .transform(Number)
+        .default(1)
-        .pipe(z.int().nonnegative())
+        .openapi({
+            type: "integer",
+            default: 1,
+            description: "Page number to retrieve"
+        }),
+    query: z.string().optional(),
+    sort_by: z
+        .enum(["username", "email", "name"])
+        .optional()
+        .catch(undefined)
+        .openapi({
+            type: "string",
+            enum: ["username", "email", "name"],
+            description: "Field to sort by"
+        }),
+    order: z
+        .enum(["asc", "desc"])
+        .optional()
+        .default("asc")
+        .catch("asc")
+        .openapi({
+            type: "string",
+            enum: ["asc", "desc"],
+            default: "asc",
+            description: "Sort order"
+        }),
+    idp_id: z
+        .preprocess(
+            (val) => {
+                if (val === undefined || val === null || val === "") {
+                    return undefined;
+                }
+                if (val === "internal") {
+                    return "internal";
+                }
+                if (typeof val === "string" && /^\d+$/.test(val)) {
+                    return parseInt(val, 10);
+                }
+                return undefined;
+            },
+            z
+                .union([z.literal("internal"), z.number().int().positive()])
+                .optional()
+        )
+        .openapi({
+            description:
+                'Filter by identity provider id, or "internal" for internal users'
+        }),
+    two_factor: z
+        .enum(["true", "false"])
+        .transform((v) => v === "true")
+        .optional()
+        .catch(undefined)
+        .openapi({
+            type: "boolean",
+            description:
+                "Filter by 2FA state matching: enabled if twoFactorEnabled or twoFactorSetupRequested"
+        })
 });
 
-async function queryUsers(limit: number, offset: number) {
+function queryUsersBase() {
-    return await db
+    return db
         .select({
             id: users.userId,
             email: users.email,
@@ -40,17 +107,39 @@ async function queryUsers(limit: number, offset: number) {
             twoFactorSetupRequested: users.twoFactorSetupRequested
         })
         .from(users)
-        .leftJoin(idp, eq(users.idpId, idp.idpId))
+        .leftJoin(idp, eq(users.idpId, idp.idpId));
-        .where(eq(users.serverAdmin, false))
-        .limit(limit)
-        .offset(offset);
 }
 
-export type AdminListUsersResponse = {
+/** Row shape returned by `queryUsersBase()` (matches selected columns + join). */
-    users: NonNullable<Awaited<ReturnType<typeof queryUsers>>>;
+export type AdminListUserRow = {
-    pagination: { total: number; limit: number; offset: number };
+    id: string;
+    email: string | null;
+    username: string;
+    name: string | null;
+    dateCreated: string;
+    serverAdmin: boolean;
+    type: string;
+    idpName: string | null;
+    idpId: number | null;
+    twoFactorEnabled: boolean;
+    twoFactorSetupRequested: boolean | null;
 };
 
+export type AdminListUsersResponse = PaginatedResponse<{
+    users: AdminListUserRow[];
+}>;
+
+registry.registerPath({
+    method: "get",
+    path: "/users",
+    description: "List non–server-admin users (server admin).",
+    tags: [OpenAPITags.User],
+    request: {
+        query: listUsersSchema
+    },
+    responses: {}
+});
+
 export async function adminListUsers(
     req: Request,
     res: Response,
@@ -66,21 +155,96 @@ export async function adminListUsers(
                 )
             );
         }
-        const { limit, offset } = parsedQuery.data;
+        const {
+            page,
+            pageSize,
+            query,
+            sort_by,
+            order,
+            idp_id,
+            two_factor: twoFactorFilter
+        } = parsedQuery.data;
 
-        const allUsers = await queryUsers(limit, offset);
+        if (typeof idp_id === "number") {
+            const idpOk = await db
+                .select({ one: sql`1` })
+                .from(idp)
+                .where(eq(idp.idpId, idp_id))
+                .limit(1);
+            if (idpOk.length === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.BAD_REQUEST,
+                        "idp_id does not exist"
+                    )
+                );
+            }
+        }
 
-        const [{ count }] = await db
+        const conditions = [eq(users.serverAdmin, false)];
-            .select({ count: sql<number>`count(*)` })
+
-            .from(users);
+        if (query) {
+            const q = "%" + query.toLowerCase() + "%";
+            conditions.push(
+                or(
+                    like(sql`LOWER(${users.username})`, q),
+                    like(sql`LOWER(${users.email})`, q),
+                    like(sql`LOWER(${users.name})`, q)
+                )!
+            );
+        }
+
+        if (idp_id === "internal") {
+            conditions.push(eq(users.type, UserType.Internal));
+        } else if (typeof idp_id === "number") {
+            conditions.push(eq(users.idpId, idp_id));
+        }
+
+        if (typeof twoFactorFilter === "boolean") {
+            if (twoFactorFilter) {
+                conditions.push(
+                    or(
+                        eq(users.twoFactorEnabled, true),
+                        eq(users.twoFactorSetupRequested, true)
+                    )!
+                );
+            } else {
+                conditions.push(
+                    and(
+                        eq(users.twoFactorEnabled, false),
+                        eq(users.twoFactorSetupRequested, false)
+                    )!
+                );
+            }
+        }
+
+        const whereClause = and(...conditions);
+
+        const countQuery = db.$count(
+            queryUsersBase().where(whereClause).as("filtered_admin_users")
+        );
+
+        const userListQuery = queryUsersBase()
+            .where(whereClause)
+            .limit(pageSize)
+            .offset(pageSize * (page - 1))
+            .orderBy(
+                sort_by
+                    ? order === "asc"
+                        ? asc(users[sort_by])
+                        : desc(users[sort_by])
+                    : asc(users.username)
+            );
+
+        const [total, rows] = await Promise.all([countQuery, userListQuery]);
 
         return response<AdminListUsersResponse>(res, {
             data: {
-                users: allUsers,
+                users: rows,
                 pagination: {
-                    total: count,
+                    total,
-                    limit,
+                    page,
-                    offset
+                    pageSize
                 }
             },
             success: true,

src/app/admin/users/AdminUsersTable.tsx

@@ -1,264 +0,0 @@
-"use client";
-
-import { UsersDataTable } from "@app/components/AdminUsersDataTable";
-import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { toast } from "@app/hooks/useToast";
-import { formatAxiosError } from "@app/lib/api";
-import { createApiClient } from "@app/lib/api";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useTranslations } from "next-intl";
-import {
-    DropdownMenu,
-    DropdownMenuItem,
-    DropdownMenuContent,
-    DropdownMenuTrigger
-} from "@app/components/ui/dropdown-menu";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
-
-export type GlobalUserRow = {
-    id: string;
-    name: string | null;
-    username: string;
-    email: string | null;
-    type: string;
-    idpId: number | null;
-    idpName: string;
-    dateCreated: string;
-    twoFactorEnabled: boolean | null;
-    twoFactorSetupRequested: boolean | null;
-};
-
-type Props = {
-    users: GlobalUserRow[];
-};
-
-export default function UsersTable({ users }: Props) {
-    const router = useRouter();
-    const t = useTranslations();
-
-    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-    const [selected, setSelected] = useState<GlobalUserRow | null>(null);
-    const [rows, setRows] = useState<GlobalUserRow[]>(users);
-
-    const api = createApiClient(useEnvContext());
-
-    const deleteUser = (id: string) => {
-        api.delete(`/user/${id}`)
-            .catch((e) => {
-                console.error(t("userErrorDelete"), e);
-                toast({
-                    variant: "destructive",
-                    title: t("userErrorDelete"),
-                    description: formatAxiosError(e, t("userErrorDelete"))
-                });
-            })
-            .then(() => {
-                router.refresh();
-                setIsDeleteModalOpen(false);
-
-                const newRows = rows.filter((row) => row.id !== id);
-
-                setRows(newRows);
-            });
-    };
-
-    const columns: ExtendedColumnDef<GlobalUserRow>[] = [
-        {
-            accessorKey: "id",
-            friendlyName: "ID",
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        ID
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "username",
-            friendlyName: t("username"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("username")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "email",
-            friendlyName: t("email"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("email")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "name",
-            friendlyName: t("name"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("name")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "idpName",
-            friendlyName: t("identityProvider"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("identityProvider")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "twoFactorEnabled",
-            friendlyName: t("twoFactor"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("twoFactor")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            },
-            cell: ({ row }) => {
-                const userRow = row.original;
-
-                return (
-                    <div className="flex flex-row items-center gap-2">
-                        <span>
-                            {userRow.twoFactorEnabled ||
-                            userRow.twoFactorSetupRequested ? (
-                                <span className="text-green-500">
-                                    {t("enabled")}
-                                </span>
-                            ) : (
-                                <span>{t("disabled")}</span>
-                            )}
-                        </span>
-                    </div>
-                );
-            }
-        },
-        {
-            id: "actions",
-            header: () => <span className="p-3">{t("actions")}</span>,
-            cell: ({ row }) => {
-                const r = row.original;
-                return (
-                    <>
-                        <div className="flex items-center gap-2">
-                            <Button
-                                variant={"outline"}
-                                onClick={() => {
-                                    router.push(`/admin/users/${r.id}`);
-                                }}
-                            >
-                                {t("edit")}
-                                <ArrowRight className="ml-2 w-4 h-4" />
-                            </Button>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button
-                                        variant="ghost"
-                                        className="h-8 w-8 p-0"
-                                    >
-                                        <span className="sr-only">
-                                            Open menu
-                                        </span>
-                                        <MoreHorizontal className="h-4 w-4" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                    <DropdownMenuItem
-                                        onClick={() => {
-                                            setSelected(r);
-                                            setIsDeleteModalOpen(true);
-                                        }}
-                                    >
-                                        {t("delete")}
-                                    </DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
-                    </>
-                );
-            }
-        }
-    ];
-
-    return (
-        <>
-            {selected && (
-                <ConfirmDeleteDialog
-                    open={isDeleteModalOpen}
-                    setOpen={(val) => {
-                        setIsDeleteModalOpen(val);
-                        setSelected(null);
-                    }}
-                    dialog={
-                        <div className="space-y-2">
-                            <p>{t("userQuestionRemove")}</p>
-
-                            <p>{t("userMessageRemove")}</p>
-                        </div>
-                    }
-                    buttonText={t("userDeleteConfirm")}
-                    onConfirm={async () => deleteUser(selected!.id)}
-                    string={
-                        selected.email || selected.name || selected.username
-                    }
-                    title={t("userDeleteServer")}
-                />
-            )}
-
-            <UsersDataTable columns={columns} data={rows} />
-        </>
-    );
-}

src/app/admin/users/page.tsx

@@ -1,33 +1,70 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { AdminListUsersResponse } from "@server/routers/user/adminListUsers";
+import type { AdminListUsersResponse } from "@server/routers/user/adminListUsers";
+import type { ListIdpsResponse } from "@server/routers/idp/listIdps";
 import UsersTable, { GlobalUserRow } from "@app/components/AdminUsersTable";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon } from "lucide-react";
 import { getTranslations } from "next-intl/server";
 
-type PageProps = {
+/** API JSON body shape for `response<T>()` handlers (see `server/lib/response.ts`). */
-    params: Promise<{ orgId: string }>;
+type ApiPayload<T> = {
+    data: T;
+    success: boolean;
+    error: boolean;
+    message: string;
+    status: number;
+};
+
+type AdminUsersPageProps = {
+    searchParams: Promise<Record<string, string>>;
 };
 
 export const dynamic = "force-dynamic";
 
-export default async function UsersPage(props: PageProps) {
+export default async function UsersPage(props: AdminUsersPageProps) {
+    const searchParams = new URLSearchParams(await props.searchParams);
+    const cookieHeader = await authCookieHeader();
+
     let rows: AdminListUsersResponse["users"] = [];
-    try {
+    let pagination: AdminListUsersResponse["pagination"] = {
-        const res = await internal.get<AxiosResponse<AdminListUsersResponse>>(
+        total: 0,
-            `/users`,
+        page: 1,
-            await authCookieHeader()
+        pageSize: 20
-        );
+    };
-        rows = res.data.data.users;
+
-    } catch (e) {
+    const [usersRes, idpsRes] = await Promise.all([
-        console.error(e);
+        internal
+            .get<
+                ApiPayload<AdminListUsersResponse>
+            >(`/users?${searchParams.toString()}`, cookieHeader)
+            .catch(() => {}),
+        internal
+            .get<
+                ApiPayload<ListIdpsResponse>
+            >(`/idp?limit=500&offset=0`, cookieHeader)
+            .catch(() => {})
+    ]);
+
+    if (usersRes && usersRes.status === 200) {
+        const list = usersRes.data.data;
+        rows = list.users;
+        pagination = list.pagination;
     }
 
     const t = await getTranslations();
 
+    const globalIdps =
+        idpsRes && idpsRes.status === 200 ? (idpsRes.data.data.idps ?? []) : [];
+    const idpFilterOptions = [
+        { value: "internal", label: t("idpNameInternal") },
+        ...globalIdps.map((i: ListIdpsResponse["idps"][number]) => ({
+            value: String(i.idpId),
+            label: i.name
+        }))
+    ];
+
     const userRows: GlobalUserRow[] = rows.map((row) => {
         return {
             id: row.id,
@@ -59,7 +96,15 @@ export default async function UsersPage(props: PageProps) {
                     {t("userAbountDescription")}
                 </AlertDescription>
             </Alert>
-            <UsersTable users={userRows} />
+            <UsersTable
+                users={userRows}
+                rowCount={pagination.total}
+                pagination={{
+                    pageIndex: pagination.page - 1,
+                    pageSize: pagination.pageSize
+                }}
+                idpFilterOptions={idpFilterOptions}
+            />
         </>
     );
 }

src/components/AdminUsersDataTable.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { DataTable } from "@app/components/ui/data-table";
-import { useTranslations } from "next-intl";
-
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    onRefresh?: () => void;
-    isRefreshing?: boolean;
-}
-
-export function UsersDataTable<TData, TValue>({
-    columns,
-    data,
-    onRefresh,
-    isRefreshing
-}: DataTableProps<TData, TValue>) {
-    const t = useTranslations();
-
-    return (
-        <DataTable
-            columns={columns}
-            data={data}
-            persistPageSize="userServer-table"
-            title={t("userServer")}
-            searchPlaceholder={t("userSearch")}
-            searchColumn="email"
-            onRefresh={onRefresh}
-            isRefreshing={isRefreshing}
-            enableColumnVisibility={true}
-            stickyLeftColumn="username"
-            stickyRightColumn="actions"
-        />
-    );
-}

src/components/AdminUsersTable.tsx

@@ -1,19 +1,31 @@
 "use client";
 
-import { ColumnDef } from "@tanstack/react-table";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
-import { UsersDataTable } from "@app/components/AdminUsersDataTable";
-import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { toast } from "@app/hooks/useToast";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
-import { formatAxiosError } from "@app/lib/api";
+import { Button } from "@app/components/ui/button";
-import { createApiClient } from "@app/lib/api";
+import {
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+    ControlledDataTable,
+    type ExtendedColumnDef
+} from "@app/components/ui/controlled-data-table";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
+import { type PaginationState } from "@tanstack/react-table";
+import {
+    ArrowDown01Icon,
+    ArrowRight,
+    ArrowUp10Icon,
+    ChevronsUpDownIcon,
+    MoreHorizontal
+} from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import z from "zod";
 import {
     DropdownMenu,
     DropdownMenuItem,
@@ -31,7 +43,6 @@ import {
     CredenzaClose
 } from "@app/components/Credenza";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { AxiosResponse } from "axios";
 
 export type GlobalUserRow = {
     id: string;
@@ -44,10 +55,16 @@ export type GlobalUserRow = {
     dateCreated: string;
     twoFactorEnabled: boolean | null;
     twoFactorSetupRequested: boolean | null;
+    serverAdmin?: boolean;
 };
 
+type FilterOption = { value: string; label: string };
+
 type Props = {
     users: GlobalUserRow[];
+    pagination: PaginationState;
+    rowCount: number;
+    idpFilterOptions: FilterOption[];
 };
 
 type AdminGeneratePasswordResetCodeResponse = {
@@ -56,74 +73,103 @@ type AdminGeneratePasswordResetCodeResponse = {
     url: string;
 };
 
-export default function UsersTable({ users }: Props) {
+export default function UsersTable({
+    users,
+    pagination,
+    rowCount,
+    idpFilterOptions
+}: Props) {
     const router = useRouter();
     const t = useTranslations();
+    const api = createApiClient(useEnvContext());
 
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selected, setSelected] = useState<GlobalUserRow | null>(null);
-    const [rows, setRows] = useState<GlobalUserRow[]>(users);
-
-    const api = createApiClient(useEnvContext());
-
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isPasswordResetCodeDialogOpen, setIsPasswordResetCodeDialogOpen] =
         useState(false);
     const [passwordResetCodeData, setPasswordResetCodeData] =
         useState<AdminGeneratePasswordResetCodeResponse | null>(null);
     const [isGeneratingCode, setIsGeneratingCode] = useState(false);
 
-    // Update local state when props change (e.g., after refresh)
+    const [isRefreshing, startTransition] = useTransition();
-    useEffect(() => {
+    const {
-        setRows(users);
+        navigate: filter,
-    }, [users]);
+        isNavigating: isFiltering,
+        searchParams,
+        pathname
+    } = useNavigationContext();
+
+    const idpIdParamSchema = z
+        .union([z.literal("internal"), z.string().regex(/^\d+$/)])
+        .optional()
+        .catch(undefined);
+
+    const twoFactorFilterSchema = z
+        .enum(["true", "false"])
+        .optional()
+        .catch(undefined);
+
+    function handleFilterChange(
+        column: string,
+        value: string | undefined | null
+    ) {
+        const sp = new URLSearchParams(searchParams);
+        sp.delete(column);
+        sp.delete("page");
+
+        if (value) {
+            sp.set(column, value);
+        }
+        startTransition(() => router.push(`${pathname}?${sp.toString()}`));
+    }
 
     const refreshData = async () => {
-        console.log("Data refreshed");
+        startTransition(async () => {
-        setIsRefreshing(true);
+            try {
-        try {
+                await new Promise((resolve) => setTimeout(resolve, 200));
-            await new Promise((resolve) => setTimeout(resolve, 200));
+                router.refresh();
-            router.refresh();
+            } catch (error) {
-        } catch (error) {
+                toast({
-            toast({
+                    title: t("error"),
-                title: t("error"),
+                    description: t("refreshError"),
-                description: t("refreshError"),
+                    variant: "destructive"
-                variant: "destructive"
+                });
-            });
+            }
-        } finally {
+        });
-            setIsRefreshing(false);
-        }
     };
 
     const deleteUser = (id: string) => {
-        api.delete(`/user/${id}`)
+        startTransition(() => {
-            .catch((e) => {
+            void api
-                console.error(t("userErrorDelete"), e);
+                .delete(`/user/${id}`)
-                toast({
+                .catch((e) => {
-                    variant: "destructive",
+                    console.error(t("userErrorDelete"), e);
-                    title: t("userErrorDelete"),
+                    toast({
-                    description: formatAxiosError(e, t("userErrorDelete"))
+                        variant: "destructive",
+                        title: t("userErrorDelete"),
+                        description: formatAxiosError(e, t("userErrorDelete"))
+                    });
+                })
+                .then(() => {
+                    router.refresh();
+                    setIsDeleteModalOpen(false);
+                    setSelected(null);
                 });
-            })
+        });
-            .then(() => {
-                router.refresh();
-                setIsDeleteModalOpen(false);
-
-                const newRows = rows.filter((row) => row.id !== id);
-
-                setRows(newRows);
-            });
     };
 
     const generatePasswordResetCode = async (userId: string) => {
         setIsGeneratingCode(true);
         try {
-            const res = await api.post<
+            const res = await api.post(
-                AxiosResponse<AdminGeneratePasswordResetCodeResponse>
+                `/user/${userId}/generate-password-reset-code`
-            >(`/user/${userId}/generate-password-reset-code`);
+            );
 
-            if (res.data?.data) {
+            const envelope = res.data as {
-                setPasswordResetCodeData(res.data.data);
+                data?: AdminGeneratePasswordResetCodeResponse;
+            };
+            if (envelope?.data) {
+                setPasswordResetCodeData(envelope.data);
                 setIsPasswordResetCodeDialogOpen(true);
             }
         } catch (e) {
@@ -138,37 +184,55 @@ export default function UsersTable({ users }: Props) {
         }
     };
 
+    function toggleSort(column: string) {
+        const newSearch = getNextSortOrder(column, searchParams);
+        filter({
+            searchParams: newSearch
+        });
+    }
+
+    const handlePaginationChange = (newPage: PaginationState) => {
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
+        filter({
+            searchParams
+        });
+    };
+
+    const handleSearchChange = useDebouncedCallback((query: string) => {
+        searchParams.set("query", query);
+        searchParams.delete("page");
+        filter({
+            searchParams
+        });
+    }, 300);
+
     const columns: ExtendedColumnDef<GlobalUserRow>[] = [
         {
             accessorKey: "id",
             friendlyName: "ID",
-            header: ({ column }) => {
+            header: () => <span className="p-3">ID</span>
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        ID
-                    </Button>
-                );
-            }
         },
         {
             accessorKey: "username",
             enableHiding: false,
             friendlyName: t("username"),
-            header: ({ column }) => {
+            header: () => {
+                const sortOrder = getSortDirection("username", searchParams);
+                const Icon =
+                    sortOrder === "asc"
+                        ? ArrowDown01Icon
+                        : sortOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() =>
+                        className="p-3"
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onClick={() => toggleSort("username")}
-                        }
                     >
                         {t("username")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -176,16 +240,22 @@ export default function UsersTable({ users }: Props) {
         {
             accessorKey: "email",
             friendlyName: t("email"),
-            header: ({ column }) => {
+            header: () => {
+                const sortOrder = getSortDirection("email", searchParams);
+                const Icon =
+                    sortOrder === "asc"
+                        ? ArrowDown01Icon
+                        : sortOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() =>
+                        className="p-3"
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onClick={() => toggleSort("email")}
-                        }
                     >
                         {t("email")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -193,16 +263,22 @@ export default function UsersTable({ users }: Props) {
         {
             accessorKey: "name",
             friendlyName: t("name"),
-            header: ({ column }) => {
+            header: () => {
+                const sortOrder = getSortDirection("name", searchParams);
+                const Icon =
+                    sortOrder === "asc"
+                        ? ArrowDown01Icon
+                        : sortOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() =>
+                        className="p-3"
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onClick={() => toggleSort("name")}
-                        }
                     >
                         {t("name")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -210,39 +286,45 @@ export default function UsersTable({ users }: Props) {
         {
             accessorKey: "idpName",
             friendlyName: t("identityProvider"),
-            header: ({ column }) => {
+            header: () => (
-                return (
+                <ColumnFilterButton
-                    <Button
+                    options={idpFilterOptions}
-                        variant="ghost"
+                    selectedValue={idpIdParamSchema.parse(
-                        onClick={() =>
+                        searchParams.get("idp_id") ?? undefined
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                    )}
-                        }
+                    onValueChange={(value) =>
-                    >
+                        handleFilterChange("idp_id", value)
-                        {t("identityProvider")}
+                    }
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    searchPlaceholder={t("searchPlaceholder")}
-                    </Button>
+                    emptyMessage={t("emptySearchOptions")}
-                );
+                    label={t("identityProvider")}
-            }
+                    className="p-3"
+                />
+            )
         },
         {
             accessorKey: "twoFactorEnabled",
             friendlyName: t("twoFactor"),
-            header: ({ column }) => {
+            header: () => (
-                return (
+                <ColumnFilterButton
-                    <Button
+                    options={[
-                        variant="ghost"
+                        { value: "true", label: t("enabled") },
-                        onClick={() =>
+                        { value: "false", label: t("disabled") }
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                    ]}
-                        }
+                    selectedValue={twoFactorFilterSchema.parse(
-                    >
+                        searchParams.get("two_factor") ?? undefined
-                        {t("twoFactor")}
+                    )}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    onValueChange={(value) =>
-                    </Button>
+                        handleFilterChange("two_factor", value)
-                );
+                    }
-            },
+                    searchPlaceholder={t("searchPlaceholder")}
+                    emptyMessage={t("emptySearchOptions")}
+                    label={t("twoFactor")}
+                    className="p-3"
+                />
+            ),
             cell: ({ row }) => {
                 const userRow = row.original;
-
                 return (
                     <div className="flex flex-row items-center gap-2">
                         <span>
@@ -277,8 +359,11 @@ export default function UsersTable({ users }: Props) {
                             <DropdownMenuContent align="end">
                                 {r.type === "internal" && (
                                     <DropdownMenuItem
+                                        disabled={isGeneratingCode}
                                         onClick={() => {
-                                            generatePasswordResetCode(r.id);
+                                            void generatePasswordResetCode(
+                                                r.id
+                                            );
                                         }}
                                     >
                                         {t("generatePasswordResetCode")}
@@ -350,11 +435,21 @@ export default function UsersTable({ users }: Props) {
                 />
             )}
 
-            <UsersDataTable
+            <ControlledDataTable
                 columns={columns}
-                data={rows}
+                rows={users}
+                tableId="admin-users-table"
+                searchPlaceholder={t("userSearch")}
+                pagination={pagination}
+                onPaginationChange={handlePaginationChange}
+                searchQuery={searchParams.get("query")?.toString()}
+                onSearch={handleSearchChange}
                 onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                isRefreshing={isRefreshing || isFiltering}
+                rowCount={rowCount}
+                enableColumnVisibility
+                stickyLeftColumn="username"
+                stickyRightColumn="actions"
             />
 
             <Credenza