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

components/traffic/flow-analytics-panel.tsx

@@ -1,7 +1,9 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, useState } from "react"
-import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table-v8"
+import { type ColumnDef, useTable } from "@tanstack/react-table"
 import type { FlowAnalyticsDto, FlowBreakdownRow, FlowEntityCard, FlowPathRow, FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
 import { ArrowDownIcon, ArrowUpIcon, GitBranchIcon, GlobeIcon, LayersIcon, NetworkIcon, RouteIcon, ShieldIcon, UsersIcon } from "lucide-react"
 import { Badge } from "@/components/reui/badge"
@@ -10,12 +12,12 @@ import { TrafficRxTxChart } from "@/components/reui-kit/traffic-rx-tx-chart"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Switch } from "@/components/ui/switch"
 import { Label } from "@/components/ui/label"
-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 { TrafficFlowsDataGrid } from "@/components/data-grids/traffic-flows-data-grid"
 import { FlowTrafficMap } from "@/components/traffic/flow-traffic-map"
 import { StatusDot } from "@/components/status-dot"
@@ -142,7 +144,7 @@ function FlowBreakdownGrid({
   country?: boolean
   onPick?: (row: FlowBreakdownRow) => void
 }) {
-  const columns = useMemo<ColumnDef<FlowBreakdownRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, FlowBreakdownRow>[]>(
     () => [
       {
         id: "label",
@@ -195,10 +197,12 @@ function FlowBreakdownGrid({
     [country],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
+    manualSorting: true,
     data: rows,
     columns,
-    getCoreRowModel: getCoreRowModel(),
     getRowId: (row) => row.id,
   })
 
@@ -221,7 +225,7 @@ function FlowPathsGrid({
   empty?: string
   onPick?: (row: FlowPathRow) => void
 }) {
-  const columns = useMemo<ColumnDef<FlowPathRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, FlowPathRow>[]>(
     () => [
       {
         id: "client",
@@ -290,10 +294,12 @@ function FlowPathsGrid({
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
+    manualSorting: true,
     data: rows,
     columns,
-    getCoreRowModel: getCoreRowModel(),
     getRowId: (row) => row.id,
   })
 

components/traffic/flow-traffic-map.tsx

@@ -1,15 +1,17 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, useState } from "react"
-import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table-v8"
+import { type ColumnDef, useTable } from "@tanstack/react-table"
 import type { FlowMapEdge } from "@mmapp/contracts/traffic-flow"
 import { Frame, FramePanel } from "@/components/reui/frame"
-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 { Flag } from "@/components/flag"
 import { fmtRate } from "@/lib/fmt-rate"
 
@@ -50,7 +52,7 @@ function FlowTrafficMap({
     return { srcPos, dstPos, maxBytes }
   }, [edges])
 
-  const columns = useMemo<ColumnDef<FlowMapEdge>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, FlowMapEdge>[]>(
     () => [
       {
         id: "from",
@@ -106,10 +108,12 @@ function FlowTrafficMap({
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
+    manualSorting: true,
     data: edges,
     columns,
-    getCoreRowModel: getCoreRowModel(),
     getRowId: (row, i) => `${row.fromId}-${row.toCountry}-${i}`,
   })