fix(ui): заменить таблицы на карточки данных и улучшить функциональность поиска

components/data-grids/bgp-sessions-data-grid.tsx

@@ -9,12 +9,12 @@ import {
   useReactTable,
 } from "@tanstack/react-table"
 import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
-  DataGrid,
-  DataGridColumnHeader,
-  DataGridContainer,
-  DataGridTable,
-} from "@/components/reui/data-grid"
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { BgpSessionDetail } from "@/components/data-grids/bgp-session-detail"
 import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
@@ -109,7 +109,9 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
       {
         id: "serverLabel",
         accessorKey: "serverLabel",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Роутер" />,
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
+        ),
         cell: ({ row }) => {
           const expanded = row.getIsExpanded()
           return (
@@ -125,19 +127,26 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
         },
         meta: {
           headerTitle: "Роутер",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
           expandedContent: (row: BgpSessionRow) => <BgpSessionDetail session={row} />,
         },
       },
       {
         id: "peerIp",
         accessorKey: "peerIp",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Peer IP" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Peer IP" />,
         cell: ({ row }) => <span className="font-mono">{row.original.peerIp}</span>,
+        meta: {
+          headerTitle: "Peer IP",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "remoteAs",
         accessorKey: "remoteAs",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Remote AS" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Remote AS" />,
         cell: ({ row }) => {
           const as = row.original.remoteAs
           return (
@@ -149,43 +158,68 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
             </div>
           )
         },
+        meta: {
+          headerTitle: "Remote AS",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "description",
         accessorKey: "description",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Описание" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Описание" />,
         cell: ({ row }) => (
           <span className="text-muted-foreground max-w-[180px] truncate block">
             {row.original.description}
           </span>
         ),
+        meta: {
+          headerTitle: "Описание",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "type",
         accessorKey: "type",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Тип" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
         cell: ({ row }) => <TypeBadge type={row.original.type} />,
+        meta: {
+          headerTitle: "Тип",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "state",
         accessorKey: "state",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Состояние" />,
         cell: ({ row }) => <StateBadge state={row.original.state} />,
+        meta: {
+          headerTitle: "Состояние",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "uptime",
         accessorKey: "uptime",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Uptime" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
         cell: ({ row }) => (
           <span className="font-mono tabular-nums text-muted-foreground">
             {row.original.uptime ?? "—"}
           </span>
         ),
+        meta: {
+          headerTitle: "Uptime",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "prefixesRx",
         accessorKey: "prefixesRx",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Prefixes ↓" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Prefixes ↓" />,
         cell: ({ row }) => {
           const n = row.original.prefixesRx
           return n > 0 ? (
@@ -196,11 +230,16 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
             <span className="text-muted-foreground">—</span>
           )
         },
+        meta: {
+          headerTitle: "Prefixes ↓",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
       {
         id: "prefixesTx",
         accessorKey: "prefixesTx",
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Prefixes ↑" />,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Prefixes ↑" />,
         cell: ({ row }) => {
           const n = row.original.prefixesTx
           return n > 0 ? (
@@ -211,6 +250,11 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
             <span className="text-muted-foreground">—</span>
           )
         },
+        meta: {
+          headerTitle: "Prefixes ↑",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
       },
     ],
     [],
@@ -223,6 +267,7 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
     getSortedRowModel: getSortedRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getRowId: (row) => row.id,
+    getRowCanExpand: () => true,
   })
 
   if (sessions.length === 0) {
@@ -237,16 +282,11 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
   }
 
   return (
-    <DataGrid
+    <DataGridShell
       table={table}
       recordCount={sessions.length}
-      isLoading={false}
       onRowClick={(row) => table.getRow(row.id).toggleExpanded()}
-    >
-      <DataGridContainer>
-        <DataGridTable />
-      </DataGridContainer>
-    </DataGrid>
+    />
   )
 }