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

components/data-grids/bgp-sessions-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,
-  getExpandedRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 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,
-} 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 { BgpSessionDetail } from "@/components/data-grids/bgp-session-detail"
 import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
@@ -104,7 +103,7 @@ interface BgpSessionsDataGridProps {
 }
 
 function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
-  const columns = useMemo<ColumnDef<BgpSessionRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, BgpSessionRow>[]>(
     () => [
       {
         id: "serverLabel",
@@ -260,12 +259,11 @@ function BgpSessionsDataGrid({ sessions }: BgpSessionsDataGridProps) {
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: sessions,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
     getRowId: (row) => row.id,
     getRowCanExpand: () => true,
   })

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

@@ -1,20 +1,20 @@
 "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 { 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"
-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 { ActivityIcon } from "lucide-react"
 
@@ -69,7 +69,7 @@ interface OspfBfdDataGridProps {
 }
 
 function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
-  const columns = useMemo<ColumnDef<BfdSessionRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, BfdSessionRow>[]>(
     () => [
       {
         id: "serverLabel",
@@ -267,11 +267,11 @@ function OspfBfdDataGrid({ sessions }: OspfBfdDataGridProps) {
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: sessions,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })
 

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

@@ -1,20 +1,20 @@
 "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 { 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"
-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"
 
@@ -53,10 +53,9 @@ function OspfNeighborsDataGrid({
   neighbors,
   highlightRouterId,
   selectedRouterId,
-  onHighlight,
   onSelect,
 }: OspfNeighborsDataGridProps) {
-  const columns = useMemo<ColumnDef<OspfNeighborRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, OspfNeighborRow>[]>(
     () => [
       {
         id: "localLabel",
@@ -192,14 +191,14 @@ function OspfNeighborsDataGrid({
     const match = neighbors.find(
       (n) => n.localRouter === selectedRouterId || n.remoteRouter === selectedRouterId,
     )
-    return match ? { [match.id]: true } : {}
+    return match ? { [match.id]: true as const } : {}
   }, [neighbors, selectedRouterId])
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: neighbors,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
     enableRowSelection: true,
     state: { rowSelection },

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

@@ -1,20 +1,20 @@
 "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 { 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"
-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 { RouteIcon } from "lucide-react"
 
@@ -42,7 +42,7 @@ interface OspfRoutesDataGridProps {
 }
 
 function OspfRoutesDataGrid({ routes }: OspfRoutesDataGridProps) {
-  const columns = useMemo<ColumnDef<OspfRouteRow>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, OspfRouteRow>[]>(
     () => [
       {
         id: "destination",
@@ -140,11 +140,11 @@ function OspfRoutesDataGrid({ routes }: OspfRoutesDataGridProps) {
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: routes,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })