From 529748fe76598ae5a4a33f98de5da2e1c5fbaca4 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 5 Mar 2026 01:13:32 +0000
Subject: [PATCH] Add column sorting to MCP servers table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added sorting state management to DataTable component
- Enabled getSortedRowModel for tanstack/react-table
- Made column headers clickable with sort indicators (↑↓⇅)
- Added enableSorting: true to sortable columns in mcp_server_columns
- Columns now support ascending/descending sort by clicking headers
- Updated package-lock.json and tsconfig.json from build process

Co-authored-by: Ishaan Jaff <ishaan-jaff@users.noreply.github.com>
---
 ui/litellm-dashboard/package-lock.json        | 15 ----------
 .../mcp_tools/mcp_server_columns.tsx          |  7 +++++
 .../src/components/view_logs/table.tsx        | 30 ++++++++++++++++---
 ui/litellm-dashboard/tsconfig.json            |  2 +-
 4 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json
index 697ec68e0bb..200182cf551 100644
--- a/ui/litellm-dashboard/package-lock.json
+++ b/ui/litellm-dashboard/package-lock.json
@@ -12984,21 +12984,6 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.33",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
-      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
index c42a8593cf1..b30caa16d6b 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_columns.tsx
@@ -15,6 +15,7 @@ export const mcpServerColumns = (
   {
     accessorKey: "server_id",
     header: "Server ID",
+    enableSorting: true,
     cell: ({ row }) => (
       <button
         onClick={() => onView(row.original.server_id)}
@@ -27,10 +28,12 @@ export const mcpServerColumns = (
   {
     accessorKey: "server_name",
     header: "Name",
+    enableSorting: true,
   },
   {
     accessorKey: "alias",
     header: "Alias",
+    enableSorting: true,
   },
   {
     id: "url",
@@ -47,6 +50,7 @@ export const mcpServerColumns = (
   {
     accessorKey: "transport",
     header: "Transport",
+    enableSorting: true,
     cell: ({ row }) => {
       const transport = row.original.transport || "http";
       const specPath = row.original.spec_path;
@@ -58,6 +62,7 @@ export const mcpServerColumns = (
   {
     accessorKey: "auth_type",
     header: "Auth Type",
+    enableSorting: true,
     cell: ({ getValue }) => <span>{(getValue() as string) || "none"}</span>,
   },
   {
@@ -166,6 +171,7 @@ export const mcpServerColumns = (
   {
     header: "Created At",
     accessorKey: "created_at",
+    enableSorting: true,
     sortingFn: "datetime",
     cell: ({ row }) => {
       const server = row.original;
@@ -177,6 +183,7 @@ export const mcpServerColumns = (
   {
     header: "Updated At",
     accessorKey: "updated_at",
+    enableSorting: true,
     sortingFn: "datetime",
     cell: ({ row }) => {
       const server = row.original;
diff --git a/ui/litellm-dashboard/src/components/view_logs/table.tsx b/ui/litellm-dashboard/src/components/view_logs/table.tsx
index 77cb273d4fe..7f6b0930341 100644
--- a/ui/litellm-dashboard/src/components/view_logs/table.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/table.tsx
@@ -1,5 +1,5 @@
-import { Fragment } from "react";
-import { ColumnDef, flexRender, getCoreRowModel, getExpandedRowModel, Row, useReactTable } from "@tanstack/react-table";
+import { Fragment, useState } from "react";
+import { ColumnDef, flexRender, getCoreRowModel, getExpandedRowModel, Row, useReactTable, getSortedRowModel, SortingState } from "@tanstack/react-table";
 
 import { Table, TableHead, TableHeaderCell, TableBody, TableRow, TableCell } from "@tremor/react";
 
@@ -29,16 +29,22 @@ export function DataTable<TData, TValue>({
   noDataMessage = "No logs found",
 }: DataTableProps<TData, TValue>) {
   const supportsExpansion = !!(renderSubComponent || renderChildRows) && !!getRowCanExpand;
+  const [sorting, setSorting] = useState<SortingState>([]);
 
   const table = useReactTable<TData>({
     data,
     columns,
+    state: {
+      sorting,
+    },
+    onSortingChange: setSorting,
     ...(supportsExpansion && { getRowCanExpand }),
     getRowId: (row: TData, index: number) => {
       const _row: any = row as any;
       return _row?.request_id ?? String(index);
     },
     getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
     ...(supportsExpansion && { getExpandedRowModel: getExpandedRowModel() }),
   });
 
@@ -49,9 +55,25 @@ export function DataTable<TData, TValue>({
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
+                const canSort = header.column.getCanSort();
+                const isSorted = header.column.getIsSorted();
+                
                 return (
-                  <TableHeaderCell key={header.id} className="py-1 h-8">
-                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  <TableHeaderCell 
+                    key={header.id} 
+                    className={`py-1 h-8 ${canSort ? 'cursor-pointer select-none hover:bg-gray-50' : ''}`}
+                    onClick={canSort ? header.column.getToggleSortingHandler() : undefined}
+                  >
+                    {header.isPlaceholder ? null : (
+                      <div className="flex items-center gap-1">
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                        {canSort && (
+                          <span className="text-gray-400">
+                            {isSorted === 'asc' ? '↑' : isSorted === 'desc' ? '↓' : '⇅'}
+                          </span>
+                        )}
+                      </div>
+                    )}
                   </TableHeaderCell>
                 );
               })}
diff --git a/ui/litellm-dashboard/tsconfig.json b/ui/litellm-dashboard/tsconfig.json
index 5b0352feb98..d24bdd340f7 100644
--- a/ui/litellm-dashboard/tsconfig.json
+++ b/ui/litellm-dashboard/tsconfig.json
@@ -14,7 +14,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {