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

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

@@ -1,12 +1,12 @@
 "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 { 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/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 { LayersIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react"
 
@@ -32,7 +32,7 @@ interface GrePoolsDataGridProps {
 }
 
 function GrePoolsDataGrid({ pools }: GrePoolsDataGridProps) {
-  const columns = useMemo<ColumnDef<GrePool>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, GrePool>[]>(
     () => [
       {
         id: "name",
@@ -172,11 +172,11 @@ function GrePoolsDataGrid({ pools }: GrePoolsDataGridProps) {
     [],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: pools,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })
 

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

@@ -1,12 +1,12 @@
 "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 {
   GrePool,
   GreTunnel,
@@ -29,13 +29,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 { EmptyState } from "@/components/empty-state"
 import {
   CodeXmlIcon,
@@ -120,7 +120,7 @@ function GreTunnelsDataGrid({
   const serverMap = useMemo(() => new Map(servers.map((s) => [s.id, s])), [servers])
   const poolMap = useMemo(() => new Map(pools.map((p) => [p.id, p])), [pools])
 
-  const columns = useMemo<ColumnDef<GreTunnel>[]>(
+  const columns = useMemo<ColumnDef<DataGridFeatures, GreTunnel>[]>(
     () => [
       {
         id: "name",
@@ -340,11 +340,11 @@ function GreTunnelsDataGrid({
     [onCodePreview, onEdit, onToggle, onDelete, mutationsLocked, poolMap, serverMap],
   )
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: tunnels,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row, index) => `${row.id}:${row.serverId}:${row.name}:${index}`,
   })
 

components/ipsec/ipsec-users-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 { IpsecClientDto } from "@mmapp/contracts/ipsec"
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 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 {
   BadgeCheckIcon,
@@ -44,8 +44,8 @@ function IpsecUsersGrid({
   onEdit,
   onDelete,
 }: IpsecUsersGridProps) {
-  const columns = useMemo<ColumnDef<IpsecClientDto>[]>(() => {
-    const cols: ColumnDef<IpsecClientDto>[] = [
+  const columns = useMemo<ColumnDef<DataGridFeatures, IpsecClientDto>[]>(() => {
+    const cols: ColumnDef<DataGridFeatures, IpsecClientDto>[] = [
       {
         id: "name",
         accessorKey: "name",
@@ -224,11 +224,11 @@ function IpsecUsersGrid({
     return cols
   }, [compactServer, onDownloadCert, onEdit, onDelete])
 
-  const table = useReactTable({
+  const table = useTable({
+    features: dataGridFeatures,
+    manualPagination: true,
     data: clients,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
     getRowId: (row) => row.id,
   })