fix(ui): ограничить отображение каталога OSPF-маршрутов

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

@@ -1,8 +1,8 @@
 "use client"
 
-import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
+import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 
-import { useMemo } from "react"
+import { useEffect, useMemo } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -49,11 +49,12 @@ function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
     () => [
       {
         id: "destination",
+        size: 150,
         accessorKey: "destination",
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Назначение" className="ml-1" />
         ),
-        cell: ({ row }) => <span className="font-mono">{row.original.destination}</span>,
+        cell: ({ row }) => <span className="font-mono whitespace-normal break-all">{row.original.destination}</span>,
         meta: {
           headerTitle: "Назначение",
           headerClassName: DATA_GRID_CELL_PAD_FIRST,
@@ -62,6 +63,7 @@ function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
       },
       {
         id: "type",
+        size: 116,
         accessorKey: "type",
         header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
         cell: ({ row }) => (
@@ -78,6 +80,7 @@ function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
       },
       {
         id: "cost",
+        size: 80,
         accessorKey: "cost",
         header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
         cell: ({ row }) => (
@@ -104,6 +107,7 @@ function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
       },
       {
         id: "via",
+        size: 120,
         accessorKey: "via",
         header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
         cell: ({ row }) => (
@@ -128,6 +132,7 @@ function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
       },
       {
         id: "area",
+        size: 120,
         accessorKey: "area",
         header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
         cell: ({ row }) => (
@@ -145,12 +150,20 @@ function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["destination"], end: [] } },
     data: routes,
     columns,
     getRowId: (row) => row.id,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(routes.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [routes.length, pageIndex, pageSize, table])
+
   if (routes.length === 0) {
     return (
       <EmptyState
@@ -165,9 +178,14 @@ function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
     <DataGridShell
       table={table}
       recordCount={routes.length}
+      pagination={routes.length > 50 || pageSize !== 50}
       tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row hover:bg-muted/30" }}
-      tableLayout={{ dense: true }}
-    />
+      tableLayout={{ dense: true, columnsPinnable: true }}
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }