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

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

@@ -1,13 +1,12 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 import type { WireGuardInterface } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
@@ -20,13 +19,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-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 { WireGuardPeersDetail } from "@/components/data-grids/wireguard-peers-detail"
 import { EmptyState } from "@/components/empty-state"
 import {
@@ -69,7 +68,7 @@ function WireguardDataGrid({
   onDeletePeer,
   onExportPeer,
 }: WireguardDataGridProps) {
-  const columns = useMemo<ColumnDef<WgIfaceWithServer>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, WgIfaceWithServer>[]>(
     () => [
       {
         id: "name",
@@ -269,12 +268,11 @@ function WireguardDataGrid({
     [compactServer, onExport, onAddPeer, onToggle, onDelete, onDeletePeer, onExportPeer],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: interfaces,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
     getRowId: (row) => row.id,
     getRowCanExpand: () => true,
   })

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

@@ -1,23 +1,23 @@
 "use client"
 
+import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+
 import { useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
-  getCoreRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table-v8"
+  useTable,
+} from "@tanstack/react-table"
 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/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 { fmtBytes, truncKey } from "@/components/data-grids/wireguard-peers-detail"
 import {
@@ -53,8 +53,8 @@ function WireguardPeersGrid({
   onDeletePeer,
   onExportPeer,
 }: WireguardPeersGridProps) {
-  const columns = useMemo<ColumnDef<WgPeerRow>[]>(() => {
-    const cols: ColumnDef<WgPeerRow>[] = [
+  const columns = useMemo<ColumnDef<DataGridFeatures, WgPeerRow>[]>(() => {
+    const cols: ColumnDef<DataGridFeatures, WgPeerRow>[] = [
       {
         id: "peer",
         accessorKey: "publicKey",
@@ -233,11 +233,11 @@ function WireguardPeersGrid({
     return cols
   }, [compactServer, onDeletePeer, onExportPeer])
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: peers,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })