fix(ui): перенести таблицы оптимизатора маршрутов на ReUI v9

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

@@ -1,22 +1,22 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 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/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { ArrowRightIcon, PinIcon, RefreshCwIcon } from "lucide-react"
 
 function Chip({ children, color }: { children: React.ReactNode; color?: string }) {
@@ -70,7 +70,7 @@ function RouteOptimizerCommRecsDataGrid({
     [homeId, recs],
   )
 
-  const columns = useMemo<ColumnDef<(typeof rows)[number]>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, (typeof rows)[number]>[]>(
     () => [
       {
         id: "community",
@@ -231,11 +231,11 @@ function RouteOptimizerCommRecsDataGrid({
     [applied, applying, homeId, onApply, onPin, pinned],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: rows,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row._rowKey,
   })
 

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

@@ -1,23 +1,22 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, useState } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 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/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import { ArrowRightIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
 function Chip({ children, color }: { children: React.ReactNode; color?: string }) {
@@ -73,7 +72,7 @@ function RouteOptimizerFullRoutesDataGrid({
     [visibleRoutes],
   )
 
-  const columns = useMemo<ColumnDef<FullRoute & { _index: number }>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, FullRoute & { _index: number }>[]>(
     () => [
       {
         id: "index",
@@ -249,11 +248,11 @@ function RouteOptimizerFullRoutesDataGrid({
     [bestId],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: indexed,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })
 

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

@@ -1,20 +1,19 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
-import { cn } from "@/lib/utils"
-import { DataGridShell } from "@/components/data-grids/shared/legacy-data-grid-shell"
+  useTable,
+} from "@tanstack/react-table"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
-import { DataGridSortHeader } from "@/components/data-grids/shared/legacy-data-grid-sort-header"
+} 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 { NetworkIcon } from "lucide-react"
 
@@ -40,7 +39,7 @@ function RouteOptimizerOspfPreviewDataGrid({
   error,
   loading,
 }: RouteOptimizerOspfPreviewDataGridProps) {
-  const columns = useMemo<ColumnDef<OspfPreviewInterfaceRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, OspfPreviewInterfaceRow>[]>(
     () => [
       {
         id: "interface",
@@ -111,11 +110,11 @@ function RouteOptimizerOspfPreviewDataGrid({
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: rows,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })
 

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

@@ -1,20 +1,21 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 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/legacy-data-grid-shell"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
 import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
-} from "@/components/data-grids/shared/legacy-data-grid-layout"
+} from "@/components/data-grids/shared/data-grid-layout"
 import { WifiIcon } from "lucide-react"
 
 function LossChip({ loss }: { loss: number }) {
@@ -39,8 +40,8 @@ function RouteOptimizerWanMatrixDataGrid({
 }: RouteOptimizerWanMatrixDataGridProps) {
   const bestScore = legs.length ? Math.max(...legs.map((l) => l.score)) : 0
 
-  const columns = useMemo<ColumnDef<HomeRouter["wans"][number]>[]>(() => {
-    const base: ColumnDef<HomeRouter["wans"][number]>[] = [
+  const columns = useMemo<ColumnDef<DataGridFeatures, HomeRouter["wans"][number]>[]>(() => {
+    const base: ColumnDef<DataGridFeatures, HomeRouter["wans"][number]>[] = [
       {
         id: "wan",
         accessorKey: "name",
@@ -96,7 +97,7 @@ function RouteOptimizerWanMatrixDataGrid({
       },
     ]
 
-    const jhCols: ColumnDef<HomeRouter["wans"][number]>[] = jumpHosts.map((jh) => ({
+    const jhCols: ColumnDef<DataGridFeatures, HomeRouter["wans"][number]>[] = jumpHosts.map((jh) => ({
       id: `jh-${jh.id}`,
       header: () => (
         <div className="text-center">
@@ -163,10 +164,12 @@ function RouteOptimizerWanMatrixDataGrid({
     return [...base, ...jhCols]
   }, [bestScore, jumpHosts, legs])
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
+    manualSorting: true,
     data: home.wans,
     columns,
-    getCoreRowModel: getCoreRowModel(),
     getRowId: (row) => row.id,
   })