diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx index 149554a3ac3..162fc39a632 100644 --- a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.test.tsx @@ -1,4 +1,4 @@ -import type { ColumnDef, ExpandedState } from "@tanstack/react-table"; +import type { ColumnDef, ExpandedState, OnChangeFn, PaginationState } from "@tanstack/react-table"; import { render, screen, waitFor, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { useState } from "react"; @@ -274,6 +274,71 @@ describe("DataTable pagination", () => { await user.click(screen.getByTestId("pagination-next")); expect(onPaginationChange).toHaveBeenCalledTimes(1); }); + + type ServerPageHarnessProps = { + rowCount: number; + isLoading?: boolean; + initialPageIndex: number; + onChange: (next: PaginationState) => void; + }; + + function ServerPageHarness({ rowCount, isLoading = false, initialPageIndex, onChange }: ServerPageHarnessProps) { + const [pagination, setPagination] = useState({ pageIndex: initialPageIndex, pageSize: 10 }); + const handleChange: OnChangeFn = (updater) => { + const next = typeof updater === "function" ? updater(pagination) : updater; + onChange(next); + setPagination(next); + }; + return ( + + ); + } + + it("server mode snaps to the last page when rowCount no longer reaches the current page", async () => { + const onChange = vi.fn(); + render(); + + await waitFor(() => expect(onChange).toHaveBeenCalledWith({ pageIndex: 1, pageSize: 10 })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 11-15 of 15"); + expect(screen.getByText("Page 2 of 2")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-next")).toBeDisabled(); + }); + + it("server mode falls back to the first page when rowCount drops to zero", async () => { + const onChange = vi.fn(); + render(); + + await waitFor(() => expect(onChange).toHaveBeenCalledWith({ pageIndex: 0, pageSize: 10 })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(screen.getByTestId("pagination-range")).toHaveTextContent("No results"); + expect(screen.getByText("Page 1 of 1")).toBeInTheDocument(); + expect(screen.getByTestId("pagination-first")).toBeDisabled(); + expect(screen.getByTestId("pagination-prev")).toBeDisabled(); + }); + + it("server mode leaves the page index alone while loading and clamps once the response lands", async () => { + const onChange = vi.fn(); + const { rerender } = render(); + + expect(screen.getByText("Page 3 of 1")).toBeInTheDocument(); + await new Promise((resolve) => setTimeout(resolve, 20)); + expect(onChange).not.toHaveBeenCalled(); + + rerender(); + + await waitFor(() => expect(onChange).toHaveBeenCalledWith({ pageIndex: 1, pageSize: 10 })); + expect(onChange).toHaveBeenCalledTimes(1); + expect(screen.getByText("Page 2 of 2")).toBeInTheDocument(); + }); }); describe("DataTable filtering", () => { diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx index 17a5fe42d1c..58f9657a001 100644 --- a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx +++ b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx @@ -16,6 +16,7 @@ import { getSortedRowModel, type Header, type OnChangeFn, + type PaginationState, type Row, type RowData, type RowSelectionState, @@ -26,7 +27,7 @@ import { } from "@tanstack/react-table"; import { SearchX } from "lucide-react"; import * as React from "react"; -import { Fragment, useState } from "react"; +import { Fragment, useEffect, useState } from "react"; import { Skeleton } from "@/components/ui/skeleton"; import { @@ -417,6 +418,21 @@ function useControllable( return { value: internal, onChange: setInternal }; } +function useServerPageClamp( + active: boolean, + rowCount: number | undefined, + pagination: { value: PaginationState; onChange: OnChangeFn }, +): void { + const { pageIndex, pageSize } = pagination.value; + const { onChange } = pagination; + useEffect(() => { + if (!active || rowCount === undefined) return; + const lastPageIndex = Math.max(Math.ceil(rowCount / pageSize) - 1, 0); + if (pageIndex <= lastPageIndex) return; + onChange({ pageIndex: lastPageIndex, pageSize }); + }, [active, rowCount, pageIndex, pageSize, onChange]); +} + function useDataTableInstance( props: DataTableResolvedProps, ): Table { @@ -433,6 +449,7 @@ function useDataTableInstance( pagination, onPaginationChange, rowCount, + isLoading = false, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, filterMode = "none", columnFilters, @@ -457,6 +474,7 @@ function useDataTableInstance( pageIndex: 0, pageSize: pageSizeOptions[0] ?? 25, }); + useServerPageClamp(paginationMode === "server" && !isLoading, rowCount, paginationState); const filterState = useControllable( columnFilters, onColumnFiltersChange,