scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-03 02:22:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 81

feat(ui): migrate tremor pure-table files to shadcn table

Browse source 
Batch migration of files that only use Tremor for the Table family
(Table/TableHead/TableHeaderCell/TableBody/TableRow/TableCell).
Renames per shadcn: TableHead (thead wrapper) -> TableHeader, and
TableHeaderCell (th) -> TableHead. Updates related test mocks and
replaces the tremor Icon-based expand/collapse stub in ModelsCell.tsx
with semantic Expand/Collapse aria-labels.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-24 13:32:15 +00:00
parent d4371b67c7
commit 3f55d8d01b
No known key found for this signature in database
22 changed files with 160 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.test.tsx
View file

@ -4,17 +4,8 @@ import { describe, expect, it, vi } from "vitest";
import { Team } from "@/components/key_team_helpers/key_list";
import ModelsCell from "./ModelsCell";
// The Icon component from @tremor/react does not forward onClick to the rendered element
// by default in the test environment, so we stub it with a clickable button so accordion
// interaction can be tested end-to-end.
vi.mock("@tremor/react", async (importOriginal) => {
const actual = await importOriginal<typeof import("@tremor/react")>();
return {
...actual,
Icon: ({ onClick, "aria-label": ariaLabel }: { onClick?: () => void; "aria-label"?: string }) =>
React.createElement("button", { onClick, "aria-label": ariaLabel ?? "accordion-toggle", type: "button" }),
};
});
// The component now uses a native <button> with lucide icons for the
// expand/collapse toggle, so no Tremor mock is needed.
const makeTeam = (models: string[], overrides: Partial<Team> = {}): Team => ({
team_id: "team-1",
@ -63,7 +54,7 @@ describe("ModelsCell", () => {
expect(screen.getByText("gpt-4")).toBeInTheDocument();
expect(screen.getByText("gpt-3.5-turbo")).toBeInTheDocument();
expect(screen.getByText("claude-3")).toBeInTheDocument();
expect(screen.queryByRole("button", { name: /accordion/i })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: /(Expand|Collapse)/ })).not.toBeInTheDocument();
});
it("should truncate model names longer than 30 characters with an ellipsis", () => {
@ -95,14 +86,14 @@ describe("ModelsCell", () => {
it("should show the accordion toggle button when there are more than 3 models", () => {
renderModelsCell(makeTeam(["m1", "m2", "m3", "m4"]));
expect(screen.getByRole("button", { name: /accordion/i })).toBeInTheDocument();
expect(screen.getByRole("button", { name: /(Expand|Collapse)/ })).toBeInTheDocument();
});
it("should expand to show all models when the accordion toggle is clicked", () => {
renderModelsCell(makeTeam(["m1", "m2", "m3", "m4", "m5"]));
act(() => {
screen.getByRole("button", { name: /accordion/i }).click();
screen.getByRole("button", { name: /(Expand|Collapse)/ }).click();
});
expect(screen.getByText("m4")).toBeInTheDocument();
@ -113,7 +104,7 @@ describe("ModelsCell", () => {
it("should collapse back to show the overflow badge after a second click on the toggle", () => {
renderModelsCell(makeTeam(["m1", "m2", "m3", "m4", "m5"]));
const toggle = screen.getByRole("button", { name: /accordion/i });
const toggle = screen.getByRole("button", { name: /(Expand|Collapse)/ });
act(() => {
toggle.click();
});
@ -133,6 +124,6 @@ describe("ModelsCell", () => {
expect(screen.queryByText("m1")).not.toBeInTheDocument();
expect(screen.queryByText("m2")).not.toBeInTheDocument();
expect(screen.queryByText("m3")).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: /accordion/i })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: /(Expand|Collapse)/ })).not.toBeInTheDocument();
});
});

3
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/ModelsCell.tsx
View file

@ -1,6 +1,5 @@
import { Badge } from "@/components/ui/badge";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import { TableCell } from "@tremor/react";
import { TableCell } from "@/components/ui/table";
import { ChevronDown, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";

6
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.test.tsx
View file

@ -5,12 +5,12 @@ import { describe, expect, it, vi } from "vitest";
import { Team } from "@/components/key_team_helpers/key_list";
import TeamsTable from "./TeamsTable";
vi.mock("@tremor/react", () => ({
vi.mock("@/components/ui/table", () => ({
Table: ({ children }: any) => <table>{children}</table>,
TableHead: ({ children }: any) => <thead>{children}</thead>,
TableHeader: ({ children }: any) => <thead>{children}</thead>,
TableBody: ({ children }: any) => <tbody>{children}</tbody>,
TableRow: ({ children }: any) => <tr>{children}</tr>,
TableHeaderCell: ({ children }: any) => <th>{children}</th>,
TableHead: ({ children }: any) => <th>{children}</th>,
TableCell: ({ children, ...props }: any) => <td {...props}>{children}</td>,
}));

27
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/TeamsTable.tsx
View file

@ -1,12 +1,11 @@
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
Tooltip,
@ -57,19 +56,19 @@ const TeamsTable = ({
}: TeamsTableProps) => {
return (
<Table>
<TableHead>
<TableHeader>
<TableRow>
<TableHeaderCell>Team Name</TableHeaderCell>
<TableHeaderCell>Team ID</TableHeaderCell>
<TableHeaderCell>Created</TableHeaderCell>
<TableHeaderCell>Spend (USD)</TableHeaderCell>
<TableHeaderCell>Budget (USD)</TableHeaderCell>
<TableHeaderCell>Models</TableHeaderCell>
<TableHeaderCell>Organization</TableHeaderCell>
<TableHeaderCell>Your Role</TableHeaderCell>
<TableHeaderCell>Info</TableHeaderCell>
<TableHead>Team Name</TableHead>
<TableHead>Team ID</TableHead>
<TableHead>Created</TableHead>
<TableHead>Spend (USD)</TableHead>
<TableHead>Budget (USD)</TableHead>
<TableHead>Models</TableHead>
<TableHead>Organization</TableHead>
<TableHead>Your Role</TableHead>
<TableHead>Info</TableHead>
</TableRow>
</TableHead>
</TableHeader>
<TableBody>
{teams && teams.length > 0

2
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.test.tsx
View file

@ -6,7 +6,7 @@ import type { Team } from "@/components/key_team_helpers/key_list";
import YourRoleCell from "./YourRoleCell";
// Lightweight mocks for stable, focused tests
vi.mock("@tremor/react", () => ({
vi.mock("@/components/ui/table", () => ({
TableCell: ({ children }: { children: React.ReactNode }) => <div data-testid="cell">{children}</div>,
}));

3
ui/litellm-dashboard/src/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/YourRoleCell.tsx
View file

@ -1,5 +1,4 @@
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import { TableCell } from "@tremor/react";
import { TableCell } from "@/components/ui/table";
import { Team } from "@/components/key_team_helpers/key_list";
import TeamRoleBadge from "@/app/(dashboard)/teams/components/TeamsTable/YourRoleCell/TeamRoleBadge";

15
ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx
View file

@ -7,15 +7,14 @@ import {
ExternalLink as ExternalLinkIcon,
Plus,
} from "lucide-react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
@ -373,13 +372,13 @@ const UsefulLinksManagement: React.FC<UsefulLinksManagementProps> = ({ accessTok
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
<TableRow>
<TableHeaderCell className="py-1 h-8">Display Name</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">URL</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">Actions</TableHeaderCell>
<TableHead className="py-1 h-8">Display Name</TableHead>
<TableHead className="py-1 h-8">URL</TableHead>
<TableHead className="py-1 h-8">Actions</TableHead>
</TableRow>
</TableHead>
</TableHeader>
<TableBody>
{links.map((link, index) => (
<TableRow key={link.id} className="h-8">

13
ui/litellm-dashboard/src/components/DeletedKeysPage/DeletedKeysTable/DeletedKeysTable.tsx
View file

@ -11,15 +11,14 @@ import {
SortingState,
useReactTable,
} from "@tanstack/react-table";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import {
Tooltip,
TooltipContent,
@ -319,11 +318,11 @@ export function DeletedKeysTable({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1" style={{ width: table.getCenterTotalSize() }}>
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
data-header-id={header.id}
className="py-1 h-8 relative hover:bg-muted"
@ -385,11 +384,11 @@ export function DeletedKeysTable({
}}
/>
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading || isFetching ? (
<TableRow>

13
ui/litellm-dashboard/src/components/DeletedTeamsPage/DeletedTeamsTable/DeletedTeamsTable.tsx
View file

@ -9,15 +9,14 @@ import {
SortingState,
useReactTable,
} from "@tanstack/react-table";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
@ -275,11 +274,11 @@ export function DeletedTeamsTable({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1" style={{ width: table.getCenterTotalSize() }}>
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
data-header-id={header.id}
className={cn("py-1 h-8 relative hover:bg-muted")}
@ -341,11 +340,11 @@ export function DeletedTeamsTable({
}}
/>
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading || isFetching ? (
<TableRow>

46
ui/litellm-dashboard/src/components/ToolPolicies.tsx
View file

@ -8,8 +8,14 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell } from "@tremor/react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { TimeCell } from "./view_logs/time_cell";
import type { SortState } from "./common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
import { TableHeaderSortDropdown } from "./common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
@ -448,33 +454,33 @@ export const ToolPolicies: React.FC<ToolPoliciesProps> = ({ accessToken, onSelec
)}
<Table className="[&_td]:py-0.5 [&_th]:py-1 w-full">
<TableHead>
<TableHeader>
<TableRow>
<TableHeaderCell className="py-1 h-8">
<TableHead className="py-1 h-8">
<SortHeader label="Discovered" field="created_at" />
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">
</TableHead>
<TableHead className="py-1 h-8">
<SortHeader label="Tool Name" field="tool_name" />
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">
</TableHead>
<TableHead className="py-1 h-8">
<SortHeader label="Input Policy" field="input_policy" />
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">
</TableHead>
<TableHead className="py-1 h-8">
<SortHeader label="Output Policy" field="output_policy" />
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">
</TableHead>
<TableHead className="py-1 h-8">
<SortHeader label="# Calls" field="call_count" />
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">
</TableHead>
<TableHead className="py-1 h-8">
<SortHeader label="Team Name" field="team_id" />
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">Key Hash</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">
</TableHead>
<TableHead className="py-1 h-8">Key Hash</TableHead>
<TableHead className="py-1 h-8">
<SortHeader label="Key Name" field="key_alias" />
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">User Agent</TableHeaderCell>
</TableHead>
<TableHead className="py-1 h-8">User Agent</TableHead>
</TableRow>
</TableHead>
</TableHeader>
<TableBody>
{loading ? (
<TableRow>

13
ui/litellm-dashboard/src/components/agents/agent_table.tsx
View file

@ -1,13 +1,12 @@
import React, { useState } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
Tooltip,
@ -192,11 +191,11 @@ const AgentTable: React.FC<AgentTableProps> = ({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className="py-1 h-8"
onClick={header.column.getToggleSortingHandler()}
@ -225,11 +224,11 @@ const AgentTable: React.FC<AgentTableProps> = ({
)}
</div>
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>

13
ui/litellm-dashboard/src/components/claude_code_plugins/plugin_table.tsx
View file

@ -6,15 +6,14 @@ import {
SortingState,
useReactTable,
} from "@tanstack/react-table";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
@ -268,11 +267,11 @@ const PluginTable: React.FC<PluginTableProps> = ({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className={`py-1 h-8 ${
header.id === "actions"
@ -311,11 +310,11 @@ const PluginTable: React.FC<PluginTableProps> = ({
</div>
)}
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>

19
ui/litellm-dashboard/src/components/common_components/ModelAliasManager.tsx
View file

@ -1,14 +1,13 @@
import React, { useState, useEffect } from "react";
import { Pencil, Plus, Trash2 } from "lucide-react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
@ -205,17 +204,17 @@ const ModelAliasManager: React.FC<ModelAliasManagerProps> = ({
<div className="rounded-lg custom-border relative mb-6">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
<TableRow>
<TableHeaderCell className="py-1 h-8">
<TableHead className="py-1 h-8">
Alias Name
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">
</TableHead>
<TableHead className="py-1 h-8">
Target Model
</TableHeaderCell>
<TableHeaderCell className="py-1 h-8">Actions</TableHeaderCell>
</TableHead>
<TableHead className="py-1 h-8">Actions</TableHead>
</TableRow>
</TableHead>
</TableHeader>
<TableBody>
{aliases.map((alias) => (
<TableRow key={alias.id} className="h-8">

13
ui/litellm-dashboard/src/components/guardrails/guardrail_table.tsx
View file

@ -1,13 +1,12 @@
import React, { useState } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
@ -288,11 +287,11 @@ const GuardrailTable: React.FC<GuardrailTableProps> = ({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className={`py-1 h-8 ${
header.id === "actions"
@ -327,11 +326,11 @@ const GuardrailTable: React.FC<GuardrailTableProps> = ({
</div>
)}
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>

17
ui/litellm-dashboard/src/components/molecules/models/columns.test.tsx
View file

@ -4,7 +4,14 @@ import { describe, expect, it, vi, beforeEach } from "vitest";
import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table";
import { columns } from "./columns";
import { ModelData } from "../../model_dashboard/types";
import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell } from "@tremor/react";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import * as providerInfoHelpers from "../../provider_info_helpers";
vi.mock("../../provider_info_helpers");
@ -69,19 +76,19 @@ const TestTable = ({
return (
<Table>
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell key={header.id}>
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>

27
ui/litellm-dashboard/src/components/organizations.tsx
View file

@ -5,15 +5,14 @@ import {
ChevronRight as ChevronRightIcon,
RefreshCcw as RefreshIcon,
} from "lucide-react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
@ -324,19 +323,19 @@ const OrganizationsTable: React.FC<OrganizationsTableProps> = ({
</div>
</div>
<Table>
<TableHead>
<TableHeader>
<TableRow>
<TableHeaderCell>Organization ID</TableHeaderCell>
<TableHeaderCell>Organization Name</TableHeaderCell>
<TableHeaderCell>Created</TableHeaderCell>
<TableHeaderCell>Spend (USD)</TableHeaderCell>
<TableHeaderCell>Budget (USD)</TableHeaderCell>
<TableHeaderCell>Models</TableHeaderCell>
<TableHeaderCell>TPM / RPM Limits</TableHeaderCell>
<TableHeaderCell>Info</TableHeaderCell>
<TableHeaderCell>Actions</TableHeaderCell>
<TableHead>Organization ID</TableHead>
<TableHead>Organization Name</TableHead>
<TableHead>Created</TableHead>
<TableHead>Spend (USD)</TableHead>
<TableHead>Budget (USD)</TableHead>
<TableHead>Models</TableHead>
<TableHead>TPM / RPM Limits</TableHead>
<TableHead>Info</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHead>
</TableHeader>
<TableBody>
{organizations && organizations.length > 0

13
ui/litellm-dashboard/src/components/policies/attachment_table.tsx
View file

@ -1,13 +1,12 @@
import React, { useState } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
@ -238,11 +237,11 @@ const AttachmentTable: React.FC<AttachmentTableProps> = ({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className={`py-1 h-8 ${
header.id === "actions"
@ -277,11 +276,11 @@ const AttachmentTable: React.FC<AttachmentTableProps> = ({
</div>
)}
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>

13
ui/litellm-dashboard/src/components/policies/policy_table.tsx
View file

@ -1,13 +1,12 @@
import React, { useMemo, useState } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
@ -328,11 +327,11 @@ const PolicyTable: React.FC<PolicyTableProps> = ({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className={`py-1 h-8 ${
header.id === "actions"
@ -367,11 +366,11 @@ const PolicyTable: React.FC<PolicyTableProps> = ({
</div>
)}
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>

13
ui/litellm-dashboard/src/components/prompts/prompt_table.tsx
View file

@ -1,13 +1,12 @@
import React, { useState, useEffect } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
Tooltip,
@ -351,11 +350,11 @@ const PromptTable: React.FC<PromptTableProps> = ({
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className="py-1 h-8"
onClick={header.column.getToggleSortingHandler()}
@ -384,11 +383,11 @@ const PromptTable: React.FC<PromptTableProps> = ({
)}
</div>
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>

19
ui/litellm-dashboard/src/components/team/available_teams.tsx
View file

@ -1,13 +1,12 @@
import React, { useState, useEffect } from "react";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
@ -75,15 +74,15 @@ const AvailableTeamsPanel: React.FC<AvailableTeamsProps> = ({
return (
<Card className="w-full mx-auto flex-auto overflow-y-auto max-h-[50vh]">
<Table>
<TableHead>
<TableHeader>
<TableRow>
<TableHeaderCell>Team Name</TableHeaderCell>
<TableHeaderCell>Description</TableHeaderCell>
<TableHeaderCell>Members</TableHeaderCell>
<TableHeaderCell>Models</TableHeaderCell>
<TableHeaderCell>Actions</TableHeaderCell>
<TableHead>Team Name</TableHead>
<TableHead>Description</TableHead>
<TableHead>Members</TableHead>
<TableHead>Models</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHead>
</TableHeader>
<TableBody>
{availableTeams.map((team) => (
<TableRow key={team.team_id}>

8
ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.test.tsx
View file

@ -28,13 +28,13 @@ vi.mock("../common_components/IconActionButton/TableIconActionButtons/TableIconA
},
}));
// Mock Tremor components to avoid complex styling issues
vi.mock("@tremor/react", () => ({
// Mock shadcn table components to avoid complex styling issues
vi.mock("@/components/ui/table", () => ({
Table: ({ children, ...props }: any) => <table {...props}>{children}</table>,
TableHead: ({ children, ...props }: any) => <thead {...props}>{children}</thead>,
TableHeader: ({ children, ...props }: any) => <thead {...props}>{children}</thead>,
TableBody: ({ children, ...props }: any) => <tbody {...props}>{children}</tbody>,
TableRow: ({ children, ...props }: any) => <tr {...props}>{children}</tr>,
TableHeaderCell: ({ children, ...props }: any) => <th {...props}>{children}</th>,
TableHead: ({ children, ...props }: any) => <th {...props}>{children}</th>,
TableCell: ({ children, ...props }: any) => <td {...props}>{children}</td>,
}));

13
ui/litellm-dashboard/src/components/vector_store_management/VectorStoreTable.tsx
View file

@ -7,15 +7,14 @@ import {
SortingState,
useReactTable,
} from "@tanstack/react-table";
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeaderCell,
TableHeader,
TableRow,
} from "@tremor/react";
} from "@/components/ui/table";
import {
Tooltip,
TooltipContent,
@ -210,11 +209,11 @@ const VectorStoreTable: React.FC<VectorStoreTableProps> = ({ data, onView, onEdi
<div className="rounded-lg custom-border relative">
<div className="overflow-x-auto">
<Table className="[&_td]:py-0.5 [&_th]:py-1">
<TableHead>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<TableHeaderCell
<TableHead
key={header.id}
className={`py-1 h-8 ${
header.id === "actions"
@ -244,11 +243,11 @@ const VectorStoreTable: React.FC<VectorStoreTableProps> = ({ data, onView, onEdi
</div>
)}
</div>
</TableHeaderCell>
</TableHead>
))}
</TableRow>
))}
</TableHead>
</TableHeader>
<TableBody>
{table.getRowModel().rows.length > 0 ? (
table.getRowModel().rows.map((row) => (