fix(ui): сохранить имя строки при прокрутке таблицы

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

@@ -18,6 +18,7 @@ import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
+  DEFAULT_DATA_GRID_LAYOUT,
 } from "@/components/data-grids/shared/data-grid-layout"
 import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
 import {
@@ -79,6 +80,7 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
       {
         id: "name",
         accessorKey: "name",
+        size: 160,
         header: ({ column }) => (
           <DataGridSortHeader column={column} title="Сертификат" className="ml-1" />
         ),
@@ -97,7 +99,7 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
               </Button>
               <div className="min-w-0">
                 <div className="flex items-center gap-2 min-w-0">
-                  <span className="shrink-0">{cfg.icon}</span>
+                  <span className="hidden sm:inline shrink-0">{cfg.icon}</span>
                   <span className="font-medium text-sm truncate" title={cert.name}>
                     {cert.name}
                   </span>
@@ -196,6 +198,7 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
       },
       {
         id: "status",
+        size: 120,
         accessorKey: "status",
         header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
         cell: ({ row }) => {
@@ -226,7 +229,7 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
     manualPagination: false,
     autoResetPageIndex: false,
     autoResetExpanded: false,
-    initialState: { pagination: { pageIndex: 0, pageSize: 50 } },
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["name"], end: [] } },
     data: certificates,
     columns,
     getRowId: (row) => row.id,
@@ -254,6 +257,7 @@ function CertificatesDataGrid({ certificates, serverMap, isLoading, emptyTitle =
     <DataGridShell
       table={table}
       recordCount={certificates.length}
+      tableLayout={{ ...DEFAULT_DATA_GRID_LAYOUT, columnsPinnable: true }}
       pagination={certificates.length > 50 || pageSize !== 50}
       isLoading={isLoading}
       loadingMode="skeleton"

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

@@ -2,7 +2,7 @@
 
 import { DataGridContainer, DataGridScrollArea, DataGridTable, dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"
 
-import { useMemo, useEffect, type ReactNode } from "react"
+import { useMemo, useEffect, type ReactNode, type CSSProperties } from "react"
 import {
   type ColumnDef,
   useTable,
@@ -12,6 +12,7 @@ import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
+  DEFAULT_DATA_GRID_LAYOUT,
 } 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"
@@ -23,6 +24,7 @@ export interface CompactDataGridColumn<T> {
   accessorKey?: keyof T & string
   cell?: (row: T) => ReactNode
   enableSorting?: boolean
+  size?: number
   headerClassName?: string
   cellClassName?: string
 }
@@ -32,6 +34,7 @@ interface CompactDataGridProps<T extends { id: string }> {
   columns: CompactDataGridColumn<T>[]
   isLoading?: boolean
   horizontalScroll?: boolean
+  pinnedColumnId?: string
   emptyTitle?: string
   emptyDescription?: string
   onRowClick?: (row: T) => void
@@ -43,6 +46,7 @@ function CompactDataGrid<T extends { id: string }>({
   columns,
   isLoading,
   horizontalScroll = false,
+  pinnedColumnId,
   emptyTitle = "Нет записей",
   emptyDescription,
   onRowClick,
@@ -52,6 +56,7 @@ function CompactDataGrid<T extends { id: string }>({
     () =>
       columns.map((col, index) => ({
         id: col.id,
+        size: col.size,
         accessorKey: col.accessorKey ?? col.id,
         header: ({ column }) => (
           <DataGridSortHeader column={column} title={col.header} className={index === 0 ? "ml-1" : undefined} />
@@ -86,7 +91,7 @@ function CompactDataGrid<T extends { id: string }>({
     features: dataGridFeatures,
     manualPagination: false,
     autoResetPageIndex: false,
-    initialState: { pagination: { pageIndex: 0, pageSize: 50 } },
+    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: pinnedColumnId ? [pinnedColumnId] : [], end: [] } },
     data,
     columns: columnDefs,
     getRowId: (row) => row.id,
@@ -103,6 +108,7 @@ function CompactDataGrid<T extends { id: string }>({
     <DataGridShell
       table={table}
       recordCount={data.length}
+      tableLayout={pinnedColumnId ? { ...DEFAULT_DATA_GRID_LAYOUT, columnsPinnable: true } : undefined}
       pagination={data.length > 50 || table.state.pagination.pageSize !== 50}
       isLoading={isLoading}
       loadingMode="skeleton"
@@ -123,7 +129,11 @@ function CompactDataGrid<T extends { id: string }>({
     >
       {horizontalScroll ? (
         <DataGridContainer border={false} className="w-full rounded-none border-0">
-          <DataGridScrollArea orientation="horizontal">
+          <DataGridScrollArea
+            orientation="horizontal"
+            className={pinnedColumnId ? "[&_[data-slot=scroll-area-viewport]]:[scroll-padding-inline-start:var(--pinned-column-width)]" : undefined}
+            style={pinnedColumnId ? { "--pinned-column-width": `${table.getColumn(pinnedColumnId)?.getSize() ?? 0}px` } as CSSProperties : undefined}
+          >
             <DataGridTable />
           </DataGridScrollArea>
         </DataGridContainer>