refactor(ui): migrate 5 simple tables onto shared DataTable

[yuneng-berri]

Relevant issues

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Screenshots / Proof of Fix

UI-only change, verified against a live proxy on localhost:4000 with the dashboard dev server at commit 0f2123b. Steps to reproduce, screenshots to follow:

1. Start the proxy on :4000 and npm run dev in ui/litellm-dashboard, then log in with the dev defaults
2. Open /projects: the migrated Projects table shows sortable Name, Team, and Created headers, monospace ID cells with the hover chevron, a models count badge with a tooltip listing model names, Active/Blocked badges, and the shared pagination footer; typing in the search box filters rows and shows a branched "No matching projects" empty state on no hits
3. Click a project ID to open the detail view: the Keys card lists the project's keys in the migrated table with the shared footer (rows per page 5) and the key-name filter above it
4. Open /models-and-endpoints and the Pass-Through Endpoints tab: the endpoints table shows monospace IDs opening the info view, method chips (or an ALL badge), Yes/No authentication badges, masked headers with an eye toggle, and a per-row overflow menu with Edit and a destructive Delete that opens the confirm modal
5. Open /logging-and-alerts, Logging Callbacks tab: the callbacks table shows the display name, a Success/Failure/Success & Failure mode badge, and an overflow menu with Test, Edit, and Delete
6. Open /vector-stores, Create Vector Store tab, and upload one or two files: the Uploaded Documents table shows each file with its size, a status badge, and an overflow menu with Copy document ID and Remove

Type

🧹 Refactoring
🐛 Bug Fix

Changes

Next batch of the shared DataTable migration (after #33128, #33303, #33314, #33343, #33357): five simple tables move onto the shared DataTable and cell library with the usual thin-container plus columns-file split, overflow-menu row actions, rich empty states, initial-load-only loading skeletons, and compact sizing

Projects drops the inline antd Table in ProjectsPage for a ProjectsTable + ProjectsTableColumns pair in client sort/pagination mode. The page keeps its search, detail swap, and create modal; the antd Pagination header line is replaced by the shared footer and the empty state branches between "no projects" and "no search matches". The legacy sorters on Name, Team, and Created are preserved as opt-in sortable headers and the table starts unsorted like before

Project Keys becomes a server-paginated DataTable with the full PaginationState lifted into ProjectKeysSection, so the shared footer's rows-per-page selector works and the hand-rolled antd Pagination goes away. While verifying this against a live proxy I found the section was rendered nowhere: ProjectDetailsPage had a hardcoded "No keys to display" card, and the whole project-keys feature (originally wired in b914c98) had silently become dead code, apparently dropped by a later large sync merge. This PR wires ProjectKeysSection back into the detail page and pins the wiring with a test

Vector-store Documents and Logging Callbacks are straight client-mode migrations. Inline icon actions move into the overflow menu, and the Documents view-details eye icon, which was a no-op (onClick={() => {}}), is dropped rather than ported. The callbacks table keeps its composite name+type row id that guards the dual success/failure registration regression, and settings.tsx gains an initial-load-only isLoading flag resolved on every exit path so the table shows skeletons instead of flashing the empty state before the first fetch settles

Pass-through Endpoints moves off the view_logs/table DataTable clone onto the shared component, retiring one of that clone's four remaining consumers. The snake_case pass_through_settings.tsx is renamed to components/PassThroughSettings/PassThroughSettings.tsx with the table split into PascalCase files; its unused modelData prop is deleted from the interface and the call site, its tremor imports are replaced, and rows without an id now render disabled menu items instead of the legacy non-null-assertion delete. Stale eslint bulk-suppressions for the rewritten files are pruned

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

This PR migrates five dashboard tables (Projects, Project Keys, Pass-Through Endpoints, Logging Callbacks, and Vector-Store Documents) from inline antd Table components onto the shared DataTable component, following the established thin-container + columns-file pattern. It also resurfaces the ProjectKeysSection feature that had silently become dead code after a sync merge, and cleans up the renamed pass_through_settings.tsx.

• Projects & Project Keys: ProjectsPage delegates filtering to useMemo and hands pre-filtered data to ProjectsTable (client sort+pagination); ProjectKeysSection lifts its page state to PaginationState for server-side pagination via ProjectKeysTable; ProjectDetailsPage wires in ProjectKeysSection in place of the hardcoded empty card.
• Pass-Through Endpoints: pass_through_settings.tsx is deleted and replaced by PassThroughSettings/PassThroughSettings.tsx; the unused modelData prop is removed from the interface and call site; the old non-null assertion on row id in the delete action is replaced by guarded disabled menu items.
• Logging Callbacks & Vector-Store Documents: Straight client-mode migrations; icon actions move into overflow menus; the no-op "view details" eye button in Documents is intentionally dropped; settings.tsx adds an initial-load-only isLoadingCallbacks flag so the callbacks table shows skeletons on first fetch.

Confidence Score: 5/5

Safe to merge — all changes are UI-layer refactoring with no backend logic touched; previously dead feature code is correctly re-wired and pinned with tests.

The PR is a straightforward component migration: five antd tables moved to the shared DataTable, a dead-code path re-enabled, a renamed file with its call sites updated, and a non-null-assertion safety hole closed. Existing test regressions (dual-registration badge, page-reset-on-search) are preserved or improved. No business logic changes and no backend surface is affected. The initial-load-only isLoading pattern flagged in earlier comments is explicitly by design per the PR description and the reviewer confirmation.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.tsx	Swaps the hardcoded 'No keys to display' card for the real ProjectKeysSection, wiring up the previously dead-code feature; test coverage added for the wiring.
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysSection.tsx	Lifts pagination from a bare page-number integer to TanStack PaginationState, removing the hand-rolled antd Pagination in favour of the shared DataTable footer; reset-on-filter effect preserved.
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.tsx	Replaces the inline antd Table + Pagination header with ProjectsTable; page-reset-on-search is now handled by DataTable's autoResetPageIndex (confirmed by new test).
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsTable.tsx	New thin container: wraps DataTable in client sort+pagination mode with branching empty state for filtered vs. no-data scenarios.
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsTableColumns.tsx	New columns file: preserves sortable Name, Team, and Created headers; accessorFn for Team closes over teamAliasMap and is correctly invalidated when the map updates.
ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectKeysTable.tsx	Migrated to server-paginated DataTable with PaginationState props threaded from ProjectKeysSection; skeleton/empty states added.
ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughSettings.tsx	Renamed + refactored from pass_through_settings.tsx: removes unused modelData prop, adds initial-load-only isLoading flag (by design per PR), cleans up dead handleResetField wrapper.
ui/litellm-dashboard/src/components/PassThroughSettings/PassThroughEndpointsTableColumns.tsx	New columns file: replaces the non-null-assertion delete (row.original.id!) with guarded disabled menu items for rows without an id; header/auth/headers cells migrated cleanly.
ui/litellm-dashboard/src/components/Settings/LoggingAndAlerts/LoggingCallbacks/LoggingCallbacksTable.tsx	Migrated to DataTable; icon actions consolidated into overflow menu; getRowId preserves the name-type composite key that guards the dual-registration regression.
ui/litellm-dashboard/src/components/settings.tsx	Adds isLoadingCallbacks (initial-load-only, by design) and passes it to LoggingCallbacksTable so skeletons appear before the first fetch; alerts extraction logic unchanged.
ui/litellm-dashboard/src/app/(dashboard)/vector-stores/_components/DocumentsTable.tsx	Migrated to DataTable; the view-details eye icon (previously a no-op) intentionally dropped; copy-ID and remove actions moved to overflow menu in DocumentsTableColumns.
ui/litellm-dashboard/src/components/pass_through_settings.tsx	Deleted entirely; superseded by PassThroughSettings/PassThroughSettings.tsx; all import sites updated.

_{Reviews (2): Last reviewed commit: "refactor(ui): migrate 5 simple tables on..." | Re-trigger Greptile}

[greptile-apps]

The isLoadingCallbacks flag is never reset to true before a subsequent re-fetch. If accessToken, userRole, or userID change after the initial mount (e.g., after a token refresh), fetchCallbacks runs again but the callbacks table is already showing its settled state — no skeleton will appear during the second fetch. The fix is to set isLoadingCallbacks back to true at the top of fetchCallbacks, before the early-exit guard.

Suggested change

	const fetchCallbacks = async () => {
	if (!accessToken || !userRole || !userID) {
	setIsLoadingCallbacks(false);
	return;
	}
	const fetchCallbacks = async () => {
	setIsLoadingCallbacks(true);
	if (!accessToken || !userRole || !userID) {
	setIsLoadingCallbacks(false);
	return;
	}

[greptile-apps]

Same pattern: isLoading starts as true but is never reset before re-fetches. If any of the three dependencies change after initial mount, the endpoints re-fetch silently with no loading skeleton.

Suggested change

	const fetchEndpoints = async () => {
	if (!accessToken || !userRole || !userID) {
	setIsLoading(false);
	return;
	}
	const fetchEndpoints = async () => {
	setIsLoading(true);
	if (!accessToken || !userRole || !userID) {
	setIsLoading(false);
	return;
	}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_/migrate-simple-tables-8e8816 (0f2123b) with litellm_internal_staging (69a491e)}

[yuneng-berri]

@greptile this is by design, review again please

[devin-ai-integration]

QA: 5 tables migrated onto shared DataTable

QA'd this branch against a live proxy (localhost:4000) and the dev dashboard (localhost:3000), seeding representative data through the UI and the proxy API. All five migrated tables render on the shared DataTable with working row overflow menus, empty states, and pagination footers; no functional regressions found

One environment note for reviewers: the branch adds project_id to LiteLLM_VerificationToken, so an existing DB needs prisma db push (or the migration) before login/key creation works, otherwise /v2/login 500s with FieldNotFoundError: ...VerificationToken.create.project_id. Expected for a schema change, just flagging it

Projects renders with monospace ID, name, team, a models count pill, an Active status badge, sortable Name/Team/Created headers, search, and the pagination footer. The rich empty state ("No projects yet") shows when the list is empty

Project Keys is now wired into Project Details and uses the shared server-side paginated table (Key Name, Owner, Created, Last Active) with its own filter box and footer

Vector-store Documents lists uploaded files with size, a Ready status, and an overflow menu (Copy document ID, Remove)

Logging Callbacks shows the callback name, mode badge, and an overflow menu (Test, Edit, Delete)

Pass-Through Endpoints shows ID, path, target, methods, an Authentication badge, masked headers with a show toggle, and an overflow menu (Edit, Delete)