fix(dashboard): enhance data grid state management and pagination

- Replaced the use of `createDefaultDataGridState` with `useDataGridUrlState` across multiple components to improve state persistence and URL synchronization.
- Updated pagination logic in various tables to ensure consistent handling of grid states and improve user experience during data retrieval.
- Refactored components to utilize the new user picker table for better user selection functionality.

These changes enhance the overall reliability and usability of the dashboard's data grid features.

Author: mantrakp04

apps/backend/src/app/api/latest/permission-definitions-pagination.ts

@@ -2,6 +2,19 @@ import { yupNumber, yupObject, yupString } from "@stackframe/stack-shared/dist/s
 import { StatusError } from "@stackframe/stack-shared/dist/utils/errors";
 import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
 
+// Binary search: index of the first item whose id > cursor, in an
+// array already sorted by `stringCompare(a.id, b.id)`.
+function firstIndexAfter<T extends { id: string }>(sorted: T[], cursor: string): number {
+  let lo = 0;
+  let hi = sorted.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >>> 1;
+    if (stringCompare(sorted[mid].id, cursor) <= 0) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+
 type PermissionDefinition = {
   id: string,
   description?: string,
@@ -40,10 +53,14 @@ export function paginatePermissionDefinitions(items: PermissionDefinition[], que
   let startIdx = 0;
   if (query.cursor != null) {
     const cursorIdx = filtered.findIndex((p) => p.id === query.cursor);
-    if (cursorIdx === -1) {
-      throw new StatusError(StatusError.BadRequest, `Cursor not found: ${query.cursor}`);
-    }
-    startIdx = cursorIdx + 1;
+    // If the cursor row was deleted (or filtered out) between page
+    // requests, fall back to "first id strictly greater than the cursor"
+    // rather than 400'ing the client mid-scroll. Worst case the user
+    // sees a one-row gap; the alternative is a hard error on infinite
+    // scroll for any concurrent edit.
+    startIdx = cursorIdx === -1
+      ? firstIndexAfter(filtered, query.cursor)
+      : cursorIdx + 1;
   }
   const slice = filtered.slice(startIdx, startIdx + query.limit);
   const hasMore = startIdx + query.limit < filtered.length;

apps/backend/src/app/api/latest/users/crud.tsx

@@ -520,7 +520,7 @@ export const usersCrudHandlers = createLazyProxy(() => createCrudHandlers(usersC
   }),
   querySchema: yupObject({
     team_id: yupString().uuid().optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "Only return users who are members of the given team" } }),
-    limit: yupNumber().integer().min(1).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The maximum number of items to return" } }),
+    limit: yupNumber().integer().min(1).max(200).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The maximum number of items to return (capped at 200)." } }),
     cursor: yupString().uuid().optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The cursor to start the result set from." } }),
     order_by: yupString().oneOf(['signed_up_at', 'last_active_at']).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "The field to sort the results by. Defaults to signed_up_at" } }),
     desc: yupString().oneOf(["true", "false"]).optional().meta({ openapiField: { onlyShowInOperations: [ 'List' ], description: "Whether to sort the results in descending order. Defaults to false" } }),
@@ -629,9 +629,13 @@ export const usersCrudHandlers = createLazyProxy(() => createCrudHandlers(usersC
         },
         { projectUserId: sortDirection },
       ],
-      // +1 because we need to know if there is a next page
+      // +1 to detect whether a next page exists without a separate count.
       take: query.limit ? query.limit + 1 : undefined,
+      // Cursor convention (matches teams/crud.tsx): the client sends the
+      // id of the LAST row of the previous page; Prisma starts AT that id,
+      // and `skip: 1` drops it so we don't re-emit it.
       ...query.cursor ? {
+        skip: 1,
         cursor: {
           tenancyId_projectUserId: {
             tenancyId: auth.tenancy.id,
@@ -641,13 +645,13 @@ export const usersCrudHandlers = createLazyProxy(() => createCrudHandlers(usersC
       } : {},
     });
 
+    const items = db.slice(0, query.limit).map((user) => userPrismaToCrud(user, auth.tenancy.config));
+    const hasMore = query.limit != null && db.length > query.limit;
     return {
-      // remove the last item because it's the next cursor
-      items: db.map((user) => userPrismaToCrud(user, auth.tenancy.config)).slice(0, query.limit),
+      items,
       is_paginated: true,
       pagination: {
-        // if result is not full length, there is no next cursor
-        next_cursor: query.limit && db.length >= query.limit + 1 ? db[db.length - 1].projectUserId : null,
+        next_cursor: hasMore && items.length > 0 ? items[items.length - 1].id : null,
       },
     };
   },

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/domains/page-client.tsx

@@ -4,7 +4,7 @@ import { InputField, SwitchField } from "@/components/form-fields";
 import { InlineSaveDiscard } from "@/components/inline-save-discard";
 import { SettingCard, SettingSwitch } from "@/components/settings";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, ActionDialog, Alert, Button, Typography } from "@/components/ui";
-import { createDefaultDataGridState, DataGrid, useDataSource, type DataGridColumnDef } from "@stackframe/dashboard-ui-components";
+import { DataGrid, useDataGridUrlState, useDataSource, type DataGridColumnDef } from "@stackframe/dashboard-ui-components";
 import { useUpdateConfig } from "@/lib/config-update";
 import { yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
@@ -330,7 +330,7 @@ function DomainDataGrid({ domains }: { domains: DomainEntry[] }) {
     },
   ], [domains]);
 
-  const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
+  const [gridState, setGridState] = useDataGridUrlState(columns, { paramPrefix: "domains" });
   const gridData = useDataSource({
     data: domains,
     columns,

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/page-client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { TeamMemberSearchTable } from "@/components/data-table/team-member-search-table";
+import { UserPickerTable } from "@/components/data-table/user-picker-table";
 import { DesignButton } from "@/components/design-components";
 import { DesignCard } from "@/components/design-components";
 import EmailPreview, { type OnWysiwygEditCommit } from "@/components/email-preview";
@@ -379,7 +379,7 @@ function RecipientsStage({ draftId, onBack, onNext, onStepClick }: RecipientsSta
                 )}
 
                 {/* Search Table */}
-                <TeamMemberSearchTable
+                <UserPickerTable
                   action={(user) => (
                     <Button
                       type="button"

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-outbox/page-client.tsx

@@ -2,7 +2,7 @@
 
 import { SettingCard } from "@/components/settings";
 import { ActionDialog, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SimpleTooltip, Switch, Typography, useToast } from "@/components/ui";
-import { createDefaultDataGridState, DataGrid, DataGridToolbar, useDataSource, type DataGridColumnDef, type DataGridDataSource } from "@stackframe/dashboard-ui-components";
+import { DataGrid, DataGridToolbar, useDataGridUrlState, useDataSource, type DataGridColumnDef, type DataGridDataSource } from "@stackframe/dashboard-ui-components";
 import { cn } from "@/lib/utils";
 import { DotsThreeIcon, PauseIcon, PlayIcon, XCircleIcon } from "@phosphor-icons/react";
 import { AdminEmailOutbox, AdminEmailOutboxSimpleStatus, AdminEmailOutboxStatus } from "@stackframe/stack";
@@ -700,7 +700,7 @@ export default function PageClient() {
     },
   ], []);
 
-  const [emailGridState, setEmailGridState] = useState(() => createDefaultDataGridState(emailColumns));
+  const [emailGridState, setEmailGridState] = useDataGridUrlState(emailColumns, { paramPrefix: "outbox" });
   const getRowId = useCallback((row: AdminEmailOutbox) => row.id, []);
   const emailGridData = useDataSource({
     dataSource,

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/grouped-email-table.tsx

@@ -5,11 +5,10 @@ import { Spinner, Typography } from "@/components/ui";
 import { AdminEmailOutbox, AdminEmailOutboxStatus } from "@stackframe/stack";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import {
-  createDefaultDataGridState,
   DataGrid,
+  useDataGridUrlState,
   useDataSource,
   type DataGridColumnDef,
-  type DataGridState,
 } from "@stackframe/dashboard-ui-components";
 import { useEffect, useMemo, useState } from "react";
 import { useAdminApp } from "../use-admin-app";
@@ -234,10 +233,10 @@ export function GroupedEmailTable() {
     [emails, draftsMap, templatesMap]
   );
 
-  const [gridState, setGridState] = useState<DataGridState>(() => ({
-    ...createDefaultDataGridState(groupedEmailGridColumns),
-    sorting: [{ columnId: "recipientCount", direction: "desc" }],
-  }));
+  const [gridState, setGridState] = useDataGridUrlState(groupedEmailGridColumns, {
+    paramPrefix: "sentgroup",
+    initial: { sorting: [{ columnId: "recipientCount", direction: "desc" }] },
+  });
 
   const gridData = useDataSource({
     data: groupedRows,

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx

@@ -8,12 +8,11 @@ import { Spinner, Typography } from "@/components/ui";
 import { Envelope } from "@phosphor-icons/react";
 import { AdminEmailOutbox } from "@stackframe/stack";
 import {
-  createDefaultDataGridState,
   DataGrid,
+  useDataGridUrlState,
   useDataSource,
   type DataGridColumnDef,
   type DataGridDataSource,
-  type DataGridState,
 } from "@stackframe/dashboard-ui-components";
 import { useCallback, useMemo, useState } from "react";
 import { AppEnabledGuard } from "../app-enabled-guard";
@@ -116,10 +115,10 @@ function EmailSendDataTable() {
   const stackAdminApp = useAdminApp();
   const router = useRouter();
 
-  const [gridState, setGridState] = useState<DataGridState>(() => ({
-    ...createDefaultDataGridState(emailTableColumns),
-    sorting: [{ columnId: "scheduledAt", direction: "desc" }],
-  }));
+  const [gridState, setGridState] = useDataGridUrlState(emailTableColumns, {
+    paramPrefix: "sentemails",
+    initial: { sorting: [{ columnId: "scheduledAt", direction: "desc" }] },
+  });
 
   const dataSource = useMemo<DataGridDataSource<AdminEmailOutbox>>(
     () => async function* (params) {

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/sent-emails-view.tsx

@@ -8,11 +8,10 @@ import { Envelope } from "@phosphor-icons/react";
 import { AdminEmailOutbox } from "@stackframe/stack";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import {
-  createDefaultDataGridState,
   DataGrid,
+  useDataGridUrlState,
   useDataSource,
   type DataGridColumnDef,
-  type DataGridState,
 } from "@stackframe/dashboard-ui-components";
 import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { useAdminApp, useProjectId } from "../use-admin-app";
@@ -111,10 +110,10 @@ export function SentEmailsView({ filterFn, renderActions }: SentEmailsViewProps)
   const filtered = useMemo(() => emails.filter(filterFn), [emails, filterFn]);
   const stats = useMemo(() => computeEmailStats(filtered), [filtered]);
 
-  const [gridState, setGridState] = useState<DataGridState>(() => ({
-    ...createDefaultDataGridState(emailColumns),
-    sorting: [{ columnId: "scheduledAt", direction: "desc" }],
-  }));
+  const [gridState, setGridState] = useDataGridUrlState(emailColumns, {
+    paramPrefix: "sentview",
+    initial: { sorting: [{ columnId: "scheduledAt", direction: "desc" }] },
+  });
 
   const gridData = useDataSource({
     data: filtered,

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/emails/page-client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { TeamMemberSearchTable } from "@/components/data-table/team-member-search-table";
+import { UserPickerTable } from "@/components/data-table/user-picker-table";
 import { FormDialog } from "@/components/form-dialog";
 import { InputField, SelectField, TextAreaField } from "@/components/form-fields";
 import { ActionDialog, Alert, AlertDescription, AlertTitle, Button, SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, useToast } from "@/components/ui";
@@ -15,11 +15,10 @@ import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { deepPlainEquals } from "@stackframe/stack-shared/dist/utils/objects";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import {
-  createDefaultDataGridState,
   DataGrid,
+  useDataGridUrlState,
   useDataSource,
   type DataGridColumnDef,
-  type DataGridState,
 } from "@stackframe/dashboard-ui-components";
 import { useEffect, useMemo, useState, type ElementType } from "react";
 import * as yup from "yup";
@@ -461,10 +460,10 @@ function EmailLogCard() {
   const [emailLogs, setEmailLogs] = useState<AdminSentEmail[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [gridState, setGridState] = useState<DataGridState>(() => ({
-    ...createDefaultDataGridState(emailTableColumns),
-    sorting: [{ columnId: "sentAt", direction: "desc" }],
-  }));
+  const [gridState, setGridState] = useDataGridUrlState(emailTableColumns, {
+    paramPrefix: "emails",
+    initial: { sorting: [{ columnId: "sentAt", direction: "desc" }] },
+  });
   const gridData = useDataSource({
     data: emailLogs,
     columns: emailTableColumns,
@@ -1235,7 +1234,7 @@ function SendEmailDialog(props: {
           <>
             {renderRecipientsBar()}
             {stage === 'recipients' ? (
-              <TeamMemberSearchTable
+              <UserPickerTable
                 action={(user) => (
                   <Button
                     size="sm"

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/external-db-sync/page-client.tsx

@@ -14,7 +14,7 @@ import {
   Switch,
   Typography,
 } from "@/components/ui";
-import { createDefaultDataGridState, DataGrid, useDataSource, type DataGridColumnDef } from "@stackframe/dashboard-ui-components";
+import { DataGrid, useDataGridUrlState, useDataSource, type DataGridColumnDef } from "@stackframe/dashboard-ui-components";
 import { Result } from "@stackframe/stack-shared/dist/utils/results";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { urlString } from "@stackframe/stack-shared/dist/utils/urls";
@@ -264,7 +264,7 @@ function SequencerDataGrid({ status, loading }: { status: ExternalDbSyncStatus |
     { name: "DeletedRow", ...status?.sequencer.deleted_rows },
   ]), [status]);
 
-  const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
+  const [gridState, setGridState] = useDataGridUrlState(columns, { paramPrefix: "extdbseq" });
   const gridData = useDataSource({
     data,
     columns,
@@ -301,7 +301,7 @@ function DeletedRowsDataGrid({ rows, loading }: { rows: DeletedRowEntry[], loadi
     { id: "max_seq", header: "Max Seq", width: 100, accessor: "max_sequence_id", renderCell: ({ row }) => <DataValue value={row.max_sequence_id} loading={loading} /> },
   ], [loading]);
 
-  const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
+  const [gridState, setGridState] = useDataGridUrlState(columns, { paramPrefix: "extdbdeleted" });
   const gridData = useDataSource({
     data: rows,
     columns,
@@ -351,7 +351,7 @@ function PollerDataGrid({ status, loading }: { status: ExternalDbSyncStatus | nu
     stale: status?.poller.stale,
   }], [status]);
 
-  const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
+  const [gridState, setGridState] = useDataGridUrlState(columns, { paramPrefix: "extdbpoller" });
   const gridData = useDataSource({
     data,
     columns,
@@ -384,7 +384,7 @@ function SyncEngineDataGrid({ rows, loading }: { rows: MappingStats[], loading:
     { id: "pending", header: "Pending Rows", width: 120, accessor: "internal_pending_count", renderCell: ({ row }) => <DataValue value={row.internal_pending_count} loading={loading} /> },
   ], [loading]);
 
-  const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
+  const [gridState, setGridState] = useDataGridUrlState(columns, { paramPrefix: "extdbmap" });
   const gridData = useDataSource({
     data: rows,
     columns,