diff --git a/components/data-grids/recursive-routes-data-grid.tsx b/components/data-grids/recursive-routes-data-grid.tsx
index 524949c9..c993d381 100644
--- a/components/data-grids/recursive-routes-data-grid.tsx
+++ b/components/data-grids/recursive-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, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
import {
type ColumnDef,
useTable,
@@ -67,9 +67,14 @@ function inferCountry(name: string): string | null {
}
function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) {
- const sorted = [...group.endpoints].sort((a, b) => a.distance - b.distance)
+ const [page, setPage] = useState(0)
+ const sorted = useMemo(() => [...group.endpoints].sort((a, b) => a.distance - b.distance), [group.endpoints])
+ const lastPage = Math.max(0, Math.ceil(sorted.length / 50) - 1)
+ if (page > lastPage) setPage(lastPage)
+ const currentPage = Math.min(page, lastPage)
+ const offset = currentPage * 50
return (
-
+
Route: {group.dstAddress}
@@ -81,15 +86,15 @@ function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) {
{group.comment && {group.comment}}
- {sorted.map((ep, idx) => (
-
+ {sorted.slice(offset, offset + 50).map((ep, idx) => (
+
{ep.country && (
)}
- Endpoint {idx + 1}
+ Endpoint {offset + idx + 1}
distance: {ep.distance}
@@ -104,6 +109,11 @@ function RouteGroupExpandedDetail({ group }: { group: RecursiveRouteGroup }) {
))}
+ {sorted.length > 50 &&
+ Конечные точки {offset + 1}–{Math.min(offset + 50, sorted.length)} из {sorted.length}
+
+
+
}
)
}
@@ -139,6 +149,7 @@ function RecursiveRoutesDataGrid({
() => [
{
id: "route",
+ size: 176,
accessorKey: "dstAddress",
header: ({ column }) => (
@@ -147,7 +158,7 @@ function RecursiveRoutesDataGrid({
const g = row.original
const isExpanded = expandedKey === g.key
return (
-