From f61e204a72b57b15b753ca61f469da38d2f46883 Mon Sep 17 00:00:00 2001
From: ryan <ryan@berri.ai>
Date: Fri, 11 Sep 2026 01:52:24 +0000
Subject: [PATCH] fix(ui): reset member table filters per team and index org
 members once

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../organization/organization_view.tsx        |  5 ++--
 .../components/shared/DataTable/DataTable.tsx |  2 --
 .../components/team/TeamMemberTab.test.tsx    | 23 ++++++++++++++++++-
 .../src/components/team/TeamMemberTab.tsx     |  1 +
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/organization/organization_view.tsx b/ui/litellm-dashboard/src/components/organization/organization_view.tsx
index aae7feaecf7..096e736b493 100644
--- a/ui/litellm-dashboard/src/components/organization/organization_view.tsx
+++ b/ui/litellm-dashboard/src/components/organization/organization_view.tsx
@@ -121,8 +121,8 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
     return <div className="p-4">Organization not found</div>;
   }
 
-  const orgMemberFor = (record: Member) =>
-    record.user_id != null ? (orgData.members || []).find((m) => m.user_id === record.user_id) : undefined;
+  const orgMemberById = new Map((orgData.members || []).map((m) => [m.user_id, m]));
+  const orgMemberFor = (record: Member) => (record.user_id != null ? orgMemberById.get(record.user_id) : undefined);
 
   const orgExtraColumns: MemberTableColumn[] = [
     {
@@ -252,6 +252,7 @@ const OrganizationInfoView: React.FC<OrganizationInfoProps> = ({
         <TabsContent keepMounted={hasVisited("members")} value="members" className="pt-4">
           <div className="space-y-4">
             <MemberTable
+              key={orgData.organization_id}
               members={(orgData.members || []).map((m) => ({
                 role: m.user_role || "",
                 user_id: m.user_id,
diff --git a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx
index ed24f8f97e9..26162a3f1f7 100644
--- a/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx
+++ b/ui/litellm-dashboard/src/components/shared/DataTable/DataTable.tsx
@@ -96,8 +96,6 @@ function derivePinning<TData, TValue>(columns: ColumnDef<TData, TValue>[]): Colu
   return { left: collect("left"), right: collect("right") };
 }
 
-// TanStack's default drops a column from global search when the first row's value is not a
-// string or number, which silently hides sparse columns; an explicit opt-in overrides that.
 function columnCanGlobalFilter<TData>(firstRow: TData | undefined, column: Column<TData, unknown>): boolean {
   if (column.columnDef.enableGlobalFilter === true) return true;
   if (firstRow === undefined || column.accessorFn === undefined) return false;
diff --git a/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx b/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx
index 6711514bfe9..2c119bb5848 100644
--- a/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamMemberTab.test.tsx
@@ -1,4 +1,4 @@
-import { screen, within } from "@testing-library/react";
+import { fireEvent, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "../../../tests/test-utils";
@@ -168,6 +168,27 @@ describe("TeamMembersComponent", () => {
     expect(table).toHaveTextContent("admin");
   });
 
+  it("clears the member search when a different team is shown", () => {
+    const props = {
+      canEditTeam: false,
+      handleMemberDelete: mockHandleMemberDelete,
+      setSelectedEditMember: mockSetSelectedEditMember,
+      setIsEditMemberModalVisible: mockSetIsEditMemberModalVisible,
+      setIsAddMemberModalVisible: mockSetIsAddMemberModalVisible,
+    };
+    const { rerender } = renderWithProviders(<TeamMembersComponent teamData={createMockTeamData()} {...props} />);
+
+    fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "user2" } });
+    expect(screen.queryByText("user1@test.com")).not.toBeInTheDocument();
+
+    const otherTeam = createMockTeamData({ team_id: "team-456" });
+    rerender(<TeamMembersComponent teamData={otherTeam} {...props} />);
+
+    expect(screen.getByTestId("datatable-search")).toHaveValue("");
+    expect(screen.getAllByText("user1@test.com").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("user2@test.com").length).toBeGreaterThanOrEqual(1);
+  });
+
   it("should render Add Member button", () => {
     renderWithProviders(
       <TeamMembersComponent
diff --git a/ui/litellm-dashboard/src/components/team/TeamMemberTab.tsx b/ui/litellm-dashboard/src/components/team/TeamMemberTab.tsx
index 76a176de834..3780770315c 100644
--- a/ui/litellm-dashboard/src/components/team/TeamMemberTab.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamMemberTab.tsx
@@ -187,6 +187,7 @@ export default function TeamMemberTab({
 
   return (
     <MemberTable
+      key={teamData.team_id}
       members={teamData.team_info.members_with_roles}
       canEdit={canEditTeam}
       onEdit={(record) => {