fix(ui): ограничить каталог сертификатов и сохранить детали

components/data-grids/certificates-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, type ReactNode } from "react"
+import { useMemo, useEffect, type ReactNode } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -223,13 +223,22 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
 
   const table = useTable({
     features: dataGridFeatures,
-    manualPagination: true,
+    manualPagination: false,
+    autoResetPageIndex: false,
+    autoResetExpanded: false,
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 } },
     data: certificates,
     columns,
     getRowId: (row) => row.id,
     getRowCanExpand: () => true,
   })
 
+  const { pageIndex, pageSize } = table.state.pagination
+  useEffect(() => {
+    const lastPage = Math.max(0, Math.ceil(certificates.length / pageSize) - 1)
+    if (pageIndex > lastPage) table.setPageIndex(lastPage)
+  }, [certificates.length, pageSize, pageIndex, table])
+
   if (!isLoading && certificates.length === 0) {
     return (
       <EmptyState
@@ -245,10 +254,17 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
     <DataGridShell
       table={table}
       recordCount={certificates.length}
+      pagination={certificates.length > 50 || pageSize !== 50}
       isLoading={isLoading}
       loadingMode="skeleton"
       onRowClick={(row) => table.getRow(row.id).toggleExpanded()}
-    />
+    >
+      <DataGridContainer border={false} className="w-full rounded-none border-0">
+        <DataGridScrollArea orientation="horizontal">
+          <DataGridTable />
+        </DataGridScrollArea>
+      </DataGridContainer>
+    </DataGridShell>
   )
 }