feat(ui): rebuild the Teams table on the 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

This is a UI-only change, so the proof is visual. To see it end to end:

1. Start a proxy (python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml) and the dashboard dev server (npm run dev in ui/litellm-dashboard, served on port 3000)
2. Log in and open Teams from the left nav, then the "Your Teams" tab
3. Confirm the redesigned table matches the design: a toolbar with search, a Columns menu, and a Filters button using the same slider icon as the Virtual Keys page; sortable Team and Created headers; a Resources cell showing members / models / keys as colored pills; a Spend / Budget meter; and a per-row actions menu (the kebab) with Edit team, Copy team ID and Delete team
4. Click the Team and Created headers and confirm the list reorders. Open Filters, apply an Organization or a Team alias, and confirm the chip appears and the results narrow. Open a row's kebab and confirm Edit opens the team's settings, Copy copies the team id, and Delete opens the confirmation modal
5. Screenshots worth capturing: the full table, the Filters drawer open, and a row's actions menu open

Type

🆕 New Feature

Changes

The Teams "Your Teams" tab is rebuilt on the shared DataTable that the Virtual Keys page uses, so the two admin tables now share the same toolbar, filter drawer, columns menu, pagination footer and interaction model. The old Ant Design table, its manual fetch/search/filter state and its per-row icon buttons are gone; the grid now lives in components/TeamsPage/TeamsTable.tsx with column definitions in teamTableColumns.tsx, backed by a new server-mode useTeamsTable hook that mirrors useKeys

Sorting is wired only to the fields /v2/team/list can actually order by (team_alias and created_at). The design also showed Spend / Budget and Updated as sortable, but the endpoint silently ignores any other sort_by, so those stay unsorted rather than offering a control that does nothing. The design's "Created by" column is dropped because the team object has no such field, and the drawer's "Has keys" filter is dropped for the same reason. Row actions follow the current behavior (Edit, Copy team ID, Delete), moved into a kebab menu with Edit and Delete gated to Admin, and the actions column has no header text to match the design

Teams.tsx keeps the create-team modal, delete modal, detail view and the three tabs, and now refreshes the list through React Query invalidation instead of a manual refetch. The grid gets its own focused unit tests in TeamsPage/TeamsTable.test.tsx (the sort-field contract, filter-to-param mapping, resource counts, role-gated actions, empty and loading states); Teams.test.tsx is trimmed to the shell concerns it still owns

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 rebuilds the Teams "Your Teams" tab on the shared DataTable component, aligning it with the Virtual Keys page's toolbar, filter drawer, columns menu, pagination, and interaction model. The old Ant Design table and its manual fetch/search/filter state are replaced by a new server-mode useTeamsTable hook backed by React Query, and row actions move into a kebab DropdownMenu built on @base-ui/react.

• TeamsPage/TeamsTable.tsx + teamTableColumns.tsx: New self-contained table with sort (team_alias, created_at only — matching what /v2/team/list can actually order by), filter drawer (org, alias, team ID), debounced search, and a Resources pill cell showing member/model/key counts.
• Teams.tsx: Shell slimmed to own the create/edit/delete modals and three tabs; list refreshes via queryClient.invalidateQueries on the shared teamsTableKeys instead of manual refetch state.
• TeamsTable.test.tsx: New focused unit tests cover the sort-field contract, filter-to-param mapping, resource counts, role-gated actions, empty/loading states, and pagination totals; Teams.test.tsx trimmed to shell-level wiring tests.

Confidence Score: 5/5

Safe to merge; the change is UI-only, well-tested, and all data-layer interactions go through the existing React Query / API layer without modification.

The rewrite is well-scoped: the new DataTable wiring mirrors the established Virtual Keys pattern, the React Query hook is straightforward, sort fields are intentionally limited to what the backend supports, and the comprehensive unit tests in TeamsTable.test.tsx cover the critical contracts. The two observations are minor clean-up items that do not affect correctness or security.

Teams.tsx — the currentOrg fallback in handleCreate is now permanently null; worth confirming currentOrgForCreateTeam is the intended fallback or the expression is dropped.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/TeamsPage/TeamsTable.tsx	New server-side DataTable wrapper for teams; pagination, sort, filter, and debounced search are wired correctly.
ui/litellm-dashboard/src/components/TeamsPage/teamTableColumns.tsx	Column definitions with ResourcesCell, SpendBudgetCell, DateCell, and kebab-menu actions; Admin-gating for Edit/Delete is correct given role normalization upstream.
ui/litellm-dashboard/src/app/(dashboard)/hooks/teams/useTeams.ts	Adds useTeamsTable hook with React Query keepPreviousData, staleTime, and enabled guard; teamsTableKeys exported for cross-component invalidation.
ui/litellm-dashboard/src/components/Teams.tsx	Shell simplified to own modals and tabs; refreshes via React Query invalidation. currentOrg retained with setter removed, making its handleCreate fallback permanently null — minor silent behavior change.
ui/litellm-dashboard/src/components/TeamsPage/TeamsTable.test.tsx	New focused unit tests covering sort contract, filter-to-param mapping, resource counts, role-gated actions, loading/empty states, and pagination totals.
ui/litellm-dashboard/src/components/Teams.test.tsx	Trimmed to shell concerns; TeamsTable mocked at component level; delete-modal and create-team wiring tested; some previously inline-logic tests removed cleanly.
ui/litellm-dashboard/src/components/ui/dropdown-menu.tsx	New shared DropdownMenu component wrapping @base-ui/react/menu; w-(--anchor-width) default is safely overridden by per-usage className (e.g. w-44 in TeamRowActions).
ui/litellm-dashboard/src/components/key_team_helpers/key_list.tsx	Added optional updated_at and members_count fields to the Team interface; non-breaking additive changes.
ui/litellm-dashboard/e2e_tests/tests/proxy-admin/teams.spec.ts	E2E test updated to click the kebab trigger and data-testid-based delete item instead of the previous fragile SVG-last selector.
ui/litellm-dashboard/eslint-suppressions.json	Suppression counts for Teams.tsx reduced, reflecting cleaned-up component.

_{Reviews (2): Last reviewed commit: "fix(ui): keep team admins' Members tab b..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_/teams-table-design-0ccc77 (2e29944) with litellm_internal_staging (b745e5b)}

[yuneng-berri]

@greptile

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[devin-ai-integration]

QA — passed

Ran this branch against a live proxy + the dashboard dev server (npm run dev, port 3000). Seeded an org (acme-org) and four teams with differing member/model/key counts and budgets. Walked the full "Your Teams" flow.

Walkthrough recording

Verified working, no regressions:

• Table render: Team, Organization, Resources pills (members/models/keys with correct counts), Spend/Budget meter, Created, Actions
• Sort by Team header (asc/desc toggle) and by Created header
• Debounced search (bravo narrows to 1 of 1)
• Filters drawer (Organization / Team alias / Team ID), applied chip + Filters (1) badge + Clear all
• Kebab actions: Copy team ID (clipboard + toast), Edit team (opens Settings detail), Delete team (type-to-confirm modal)
• Delete end-to-end and Create team both auto-refresh the list via React Query invalidation
• Pagination footer (rows per page, Showing x-y of n)

On the 2-clicks-vs-1 tradeoff: confirmed all three row actions work behind the kebab. The extra click is the intended cost for matching the Virtual Keys interaction model; flagging it as a conscious decision.

Non-blocking: the legacy (untouched) create-team modal still emits dev-only React/AntD console warnings (antd v5 support React is 16~18, Form.Item defaultValue, controlled/uncontrolled input). Not from the new DataTable code and doesn't affect functionality — not a regression from this PR.

Screenshots

Full redesigned table:

Filters drawer open:

Organization filter applied (chip + narrowed results):

Kebab actions menu (Edit / Copy team ID / Delete):

Copy team ID toast:

Edit opens the team Settings detail view:

Delete confirmation modal (type-to-confirm):

Delete success + list auto-refresh (4 → 3):

Create success + list auto-refresh (3 → 4):