chore(ui): сохранить основу поэтапной миграции таблиц

components/data-grids/asns-data-grid.tsx

@@ -7,15 +7,15 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Asn } from "@/lib/data"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { FilterIcon, NetworkIcon } from "lucide-react"
 

components/data-grids/backups-data-grid.tsx

@@ -6,18 +6,18 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Backup } from "@/lib/data"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/reui/badge"
 import { IconTile } from "@/components/reui/icon-tile"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   CloudIcon,

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

@@ -7,14 +7,14 @@ import {
   getExpandedRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   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"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-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"

components/data-grids/certificates-data-grid.tsx

@@ -7,18 +7,18 @@ import {
   getExpandedRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { CertStatus, Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import {
   CertificateExpandedDetail,
   daysLeftBar,

components/data-grids/communities-data-grid.tsx

@@ -6,15 +6,15 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   CheckIcon,

components/data-grids/compact-data-grid.tsx

@@ -7,14 +7,14 @@ import {
   getExpandedRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+} from "@tanstack/react-table-v8"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { InboxIcon } from "lucide-react"
 

components/data-grids/data-collection-scheduler-data-grid.tsx

@@ -5,18 +5,18 @@ import {
   type ColumnDef,
   getCoreRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { SchedulerJobStatusDto } from "@/lib/scheduler-settings"
 import { FormToggle } from "@/components/form-kit"
 import { Badge } from "@/components/reui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
 import { cn } from "@/lib/utils"
 import { RefreshCwIcon } from "lucide-react"
 

components/data-grids/domains-data-grid.tsx

@@ -7,15 +7,15 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Domain } from "@/lib/data"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { FilterIcon, GlobeIcon } from "lucide-react"
 

components/data-grids/filters-data-grid.tsx

@@ -6,18 +6,18 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { FilterRule, GreTunnel, Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   AlertCircleIcon,

components/data-grids/firewall-rules-data-grid.tsx

@@ -6,7 +6,7 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { FirewallRule } from "@/lib/data"
 import { FormToggle } from "@/components/form-kit"
 import { cn } from "@/lib/utils"
@@ -18,15 +18,15 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
   DATA_GRID_CONTAINER_CLASS,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
-import { DataGridContainer, DataGridTableDndRowHandle, DataGridTableDndRows } from "@/components/reui/data-grid"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+import { DataGridContainer, DataGridTableDndRowHandle, DataGridTableDndRows } from "@/components/reui/legacy-data-grid"
 import type { DragEndEvent } from "@dnd-kit/core"
 import { EmptyState } from "@/components/empty-state"
 import {

components/data-grids/firewall-scenario-rules-data-grid.tsx

@@ -5,14 +5,14 @@ import {
   type ColumnDef,
   getCoreRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { ActionBadge, ChainBadge } from "@/components/data-grids/firewall-rules-data-grid"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
 import { cn } from "@/lib/utils"
 import { PowerIcon, Trash2Icon } from "lucide-react"
 

components/data-grids/gre-pools-data-grid.tsx

@@ -6,7 +6,7 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { GrePool } from "@/lib/data"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -17,13 +17,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { LayersIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react"
 

components/data-grids/gre-tunnels-data-grid.tsx

@@ -6,7 +6,7 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type {
   GrePool,
   GreTunnel,
@@ -29,13 +29,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   CodeXmlIcon,

components/data-grids/ip-ranges-data-grid.tsx

@@ -7,15 +7,15 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { IpRange } from "@/lib/data"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { FilterIcon, NetworkIcon } from "lucide-react"
 

components/data-grids/ospf-bfd-data-grid.tsx

@@ -6,15 +6,15 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { ActivityIcon } from "lucide-react"
 

components/data-grids/ospf-neighbors-data-grid.tsx

@@ -6,15 +6,15 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { NetworkIcon } from "lucide-react"
 

components/data-grids/ospf-routes-data-grid.tsx

@@ -6,15 +6,15 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { RouteIcon } from "lucide-react"
 

components/data-grids/probes-schedule-data-grid.tsx

@@ -6,17 +6,17 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Server } from "@/lib/data"
 import { cn } from "@/lib/utils"
 import { FormToggle } from "@/components/form-kit"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { ClockIcon, Trash2Icon } from "lucide-react"
 

components/data-grids/probes-speed-probes-data-grid.tsx

@@ -6,15 +6,15 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { ClockIcon } from "lucide-react"
 

components/data-grids/recursive-routes-data-grid.tsx

@@ -7,17 +7,17 @@ import {
   getExpandedRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   AlertCircleIcon,

components/data-grids/route-optimizer-comm-recs-data-grid.tsx

@@ -6,17 +6,17 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { CommRec } from "@/lib/route-optimizer-data"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { ArrowRightIcon, PinIcon, RefreshCwIcon } from "lucide-react"
 
 function Chip({ children, color }: { children: React.ReactNode; color?: string }) {

components/data-grids/route-optimizer-full-routes-data-grid.tsx

@@ -6,18 +6,18 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { FullRoute } from "@/lib/route-optimizer-data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { ArrowRightIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 function Chip({ children, color }: { children: React.ReactNode; color?: string }) {

components/data-grids/route-optimizer-ospf-preview-data-grid.tsx

@@ -6,15 +6,15 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { NetworkIcon } from "lucide-react"
 

components/data-grids/route-optimizer-wan-matrix-data-grid.tsx

@@ -5,16 +5,16 @@ import {
   type ColumnDef,
   getCoreRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { HomeRouter, JumpHost, WanJhLeg } from "@/lib/route-optimizer-data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
 import { WifiIcon } from "lucide-react"
 
 function LossChip({ loss }: { loss: number }) {

components/data-grids/servers-data-grid.tsx

@@ -3,10 +3,7 @@
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getSortedRowModel,
-  useReactTable,
+  useTable,
 } from "@tanstack/react-table"
 import type { Server, ServerType } from "@/lib/data"
 import { StatusBadge } from "@/components/status-badge"
@@ -21,6 +18,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid/data-grid"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
@@ -185,7 +183,7 @@ function ServersDataGrid({
   onDelete,
   onToggleStatus,
 }: ServersDataGridProps) {
-  const columns = useMemo<ColumnDef<Server>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, Server>[]>(
     () => [
       {
         id: "name",
@@ -363,12 +361,11 @@ function ServersDataGrid({
     [busy, isLive, onDelete, onEdit, onPoll, onToggleStatus, pollingIds],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
     data: servers,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
+    manualPagination: true,
     getRowId: (row) => row.id,
     getRowCanExpand: () => true,
   })

components/data-grids/shared/data-grid-layout.ts

@@ -1,17 +1,17 @@
-import type { DataGridProps } from "@/components/reui/data-grid/data-grid"
+import type { DataGridProps, DataGridFeatures } from "@/components/reui/data-grid/data-grid"
 
 const DATA_GRID_CELL_PAD = "py-3"
 const DATA_GRID_CELL_PAD_FIRST = "pl-5 py-3"
 const DATA_GRID_CELL_PAD_LAST = "pr-4 py-3"
 
-const DEFAULT_DATA_GRID_LAYOUT: NonNullable<DataGridProps<object>["tableLayout"]> = {
+const DEFAULT_DATA_GRID_LAYOUT: NonNullable<DataGridProps<DataGridFeatures, object>["tableLayout"]> = {
   rowBorder: true,
   headerBackground: true,
   headerBorder: true,
   columnsResizable: false,
 }
 
-const DEFAULT_DATA_GRID_CLASS_NAMES: NonNullable<DataGridProps<object>["tableClassNames"]> = {
+const DEFAULT_DATA_GRID_CLASS_NAMES: NonNullable<DataGridProps<DataGridFeatures, object>["tableClassNames"]> = {
   headerRow: "border-b border-border",
   bodyRow: "group/row",
 }

components/data-grids/shared/data-grid-shell.tsx

@@ -8,6 +8,7 @@ import {
   DataGridPagination,
   DataGridTable,
   type DataGridProps,
+  type DataGridFeatures,
 } from "@/components/reui/data-grid"
 import {
   DATA_GRID_CONTAINER_CLASS,
@@ -16,16 +17,16 @@ import {
 } from "@/components/data-grids/shared/data-grid-layout"
 
 interface DataGridShellProps<TData extends object> {
-  table: Table<TData>
+  table: Table<DataGridFeatures, TData>
   recordCount: number
   children?: ReactNode
   pagination?: boolean
   isLoading?: boolean
-  loadingMode?: DataGridProps<TData>["loadingMode"]
+  loadingMode?: DataGridProps<DataGridFeatures, TData>["loadingMode"]
   emptyMessage?: ReactNode
-  onRowClick?: DataGridProps<TData>["onRowClick"]
-  tableLayout?: DataGridProps<TData>["tableLayout"]
-  tableClassNames?: DataGridProps<TData>["tableClassNames"]
+  onRowClick?: DataGridProps<DataGridFeatures, TData>["onRowClick"]
+  tableLayout?: DataGridProps<DataGridFeatures, TData>["tableLayout"]
+  tableClassNames?: DataGridProps<DataGridFeatures, TData>["tableClassNames"]
 }
 
 function DataGridShell<TData extends object>({

components/data-grids/shared/data-grid-sort-header.tsx

@@ -1,16 +1,17 @@
 "use client"
 
 import type { Column } from "@tanstack/react-table"
+import type { DataGridFeatures } from "@/components/reui/data-grid"
 import { cn } from "@/lib/utils"
 import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"
 
-interface DataGridSortHeaderProps<TData> {
-  column: Column<TData, unknown>
+interface DataGridSortHeaderProps<TData extends object> {
+  column: Column<DataGridFeatures, TData, unknown>
   title: string
   className?: string
 }
 
-function DataGridSortHeader<TData>({
+function DataGridSortHeader<TData extends object>({
   column,
   title,
   className,

components/data-grids/shared/legacy-data-grid-layout.ts

@@ -0,0 +1,34 @@
+import type { DataGridProps } from "@/components/reui/legacy-data-grid/data-grid"
+
+const DATA_GRID_CELL_PAD = "py-3"
+const DATA_GRID_CELL_PAD_FIRST = "pl-5 py-3"
+const DATA_GRID_CELL_PAD_LAST = "pr-4 py-3"
+
+const DEFAULT_DATA_GRID_LAYOUT: NonNullable<DataGridProps<object>["tableLayout"]> = {
+  rowBorder: true,
+  headerBackground: true,
+  headerBorder: true,
+  columnsResizable: false,
+}
+
+const DEFAULT_DATA_GRID_CLASS_NAMES: NonNullable<DataGridProps<object>["tableClassNames"]> = {
+  headerRow: "border-b border-border",
+  bodyRow: "group/row",
+}
+
+const DATA_GRID_CONTAINER_CLASS = "w-full rounded-none border-0"
+
+const DATA_PAGE_CARD_CLASS = "flex w-full flex-col overflow-hidden py-0 gap-0"
+
+const DATA_PAGE_TOOLBAR_CLASS = "flex items-center gap-3 px-5 py-3 border-b flex-wrap"
+
+export {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+  DEFAULT_DATA_GRID_LAYOUT,
+  DEFAULT_DATA_GRID_CLASS_NAMES,
+  DATA_GRID_CONTAINER_CLASS,
+  DATA_PAGE_CARD_CLASS,
+  DATA_PAGE_TOOLBAR_CLASS,
+}

components/data-grids/shared/legacy-data-grid-shell.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import type { ReactNode } from "react"
+import type { Table } from "@tanstack/react-table-v8"
+import {
+  DataGrid,
+  DataGridContainer,
+  DataGridPagination,
+  DataGridTable,
+  type DataGridProps,
+} from "@/components/reui/legacy-data-grid"
+import {
+  DATA_GRID_CONTAINER_CLASS,
+  DEFAULT_DATA_GRID_CLASS_NAMES,
+  DEFAULT_DATA_GRID_LAYOUT,
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+
+interface DataGridShellProps<TData extends object> {
+  table: Table<TData>
+  recordCount: number
+  children?: ReactNode
+  pagination?: boolean
+  isLoading?: boolean
+  loadingMode?: DataGridProps<TData>["loadingMode"]
+  emptyMessage?: ReactNode
+  onRowClick?: DataGridProps<TData>["onRowClick"]
+  tableLayout?: DataGridProps<TData>["tableLayout"]
+  tableClassNames?: DataGridProps<TData>["tableClassNames"]
+}
+
+function DataGridShell<TData extends object>({
+  table,
+  recordCount,
+  children,
+  pagination = false,
+  isLoading,
+  loadingMode,
+  emptyMessage,
+  onRowClick,
+  tableLayout = DEFAULT_DATA_GRID_LAYOUT,
+  tableClassNames = DEFAULT_DATA_GRID_CLASS_NAMES,
+}: DataGridShellProps<TData>) {
+  return (
+    <DataGrid
+      className="w-full"
+      table={table}
+      recordCount={recordCount}
+      isLoading={isLoading}
+      loadingMode={loadingMode}
+      emptyMessage={emptyMessage}
+      onRowClick={onRowClick}
+      tableLayout={tableLayout}
+      tableClassNames={tableClassNames}
+    >
+      {children ?? (
+        <>
+          <DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
+            <DataGridTable />
+          </DataGridContainer>
+          {pagination && recordCount > 0 && (
+            <DataGridPagination className="px-5 pb-3" />
+          )}
+        </>
+      )}
+    </DataGrid>
+  )
+}
+
+export { DataGridShell, type DataGridShellProps }

components/data-grids/shared/legacy-data-grid-sort-header.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import type { Column } from "@tanstack/react-table-v8"
+import { cn } from "@/lib/utils"
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"
+
+interface DataGridSortHeaderProps<TData> {
+  column: Column<TData, unknown>
+  title: string
+  className?: string
+}
+
+function DataGridSortHeader<TData>({
+  column,
+  title,
+  className,
+}: DataGridSortHeaderProps<TData>) {
+  const sorted = column.getIsSorted()
+  const canSort = column.getCanSort()
+
+  if (!canSort) {
+    return (
+      <span className={cn("text-xs font-medium text-muted-foreground", className)}>
+        {title}
+      </span>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground",
+        "hover:text-foreground transition-colors rounded-md -ml-1 px-1 py-0.5",
+        className,
+      )}
+      onClick={column.getToggleSortingHandler()}
+    >
+      {title}
+      {sorted === "asc" ? (
+        <ArrowUpIcon className="size-3 text-foreground" />
+      ) : sorted === "desc" ? (
+        <ArrowDownIcon className="size-3 text-foreground" />
+      ) : (
+        <ArrowUpDownIcon className="size-3 opacity-35" />
+      )}
+    </button>
+  )
+}
+
+export { DataGridSortHeader, type DataGridSortHeaderProps }

components/data-grids/subusers-data-grid.tsx

@@ -6,18 +6,18 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { FormToggle } from "@/components/form-kit"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { CableIcon, CopyIcon, EyeIcon, EyeOffIcon, Trash2Icon } from "lucide-react"
 

components/data-grids/traffic-flows-data-grid.tsx

@@ -1,15 +1,15 @@
 "use client"
 
 import { useMemo } from "react"
-import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table-v8"
 import type { FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
 import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from "lucide-react"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
 import { fmtRate } from "@/lib/fmt-rate"
 import { cn } from "@/lib/utils"
 

components/data-grids/uptime-resources-data-grid.tsx

@@ -6,19 +6,19 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { Sparkline } from "@/components/sparkline"
 import { StatusDot } from "@/components/status-dot"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   AlertCircleIcon,

components/data-grids/uptime-speed-history-data-grid.tsx

@@ -6,16 +6,16 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Server } from "@/lib/data"
 import { Flag } from "@/components/flag"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { cn } from "@/lib/utils"
 import { ArrowRightIcon, RefreshCwIcon } from "lucide-react"
 

components/data-grids/users-data-grid.tsx

@@ -7,17 +7,17 @@ import {
   getExpandedRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/reui/badge"
 import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { UsersExpandedDetail } from "@/components/data-grids/users-expanded-detail"
 import { EmptyState } from "@/components/empty-state"
 import { ALL_SECTIONS, ROLE_LABEL, type AppUser } from "@/lib/users"

components/data-grids/vxlan-data-grid.tsx

@@ -6,7 +6,7 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { Server, VxlanTunnel } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
@@ -18,13 +18,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import {
   CodeXmlIcon,

components/data-grids/wireguard-data-grid.tsx

@@ -7,7 +7,7 @@ import {
   getExpandedRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { WireGuardInterface } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
@@ -20,13 +20,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { WireGuardPeersDetail } from "@/components/data-grids/wireguard-peers-detail"
 import { EmptyState } from "@/components/empty-state"
 import {

components/data-grids/wireguard-peers-grid.tsx

@@ -6,18 +6,18 @@ import {
   getCoreRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table-v8"
 import type { WireGuardPeer } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+} from "@/components/data-grids/shared/legacy-data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
 import { EmptyState } from "@/components/empty-state"
 import { fmtBytes, truncKey } from "@/components/data-grids/wireguard-peers-detail"
 import {