правочки

frontend/src/webparts/approvalAdmin/components/ui/DataTable.module.scss

@@ -47,6 +47,21 @@
 .table tbody tr { transition: .12s; }
 .table tbody tr:hover { background: $gold-50; }
 
+.stickyCell {
+  position: sticky;
+  right: 0;
+}
+
+.table thead th.stickyCell { z-index: 2; }
+
+.table tbody td.stickyCell {
+  background: #fff;
+  box-shadow: -6px 0 6px -6px rgba(15, 36, 64, .12);
+  z-index: 1;
+}
+
+.table tbody tr:hover td.stickyCell { background: $gold-50; }
+
 .primaryCell {
   font-weight: 500;
   color: $navy-900;

frontend/src/webparts/approvalAdmin/components/ui/DataTable.tsx

@@ -7,6 +7,9 @@ export interface IColumn<T> {
   render: (row: T) => React.ReactNode;
   align?: 'left' | 'right' | 'center';
   width?: string;
+  // Держит колонку у правого края видимой области при горизонтальной
+  // прокрутке — чтобы кнопки действий не уезжали за край на узких экранах.
+  sticky?: boolean;
 }
 
 export interface IDataTableProps<T> {
@@ -24,7 +27,11 @@ export function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableP
           <thead>
             <tr>
               {columns.map(col => (
-                <th key={col.key} style={{ width: col.width, textAlign: col.align ?? 'left' }}>
+                <th
+                  key={col.key}
+                  className={col.sticky ? styles.stickyCell : undefined}
+                  style={{ width: col.width, textAlign: col.align ?? 'left' }}
+                >
                   {col.header}
                 </th>
               ))}
@@ -34,7 +41,11 @@ export function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableP
             {rows.map(row => (
               <tr key={keyOf(row)}>
                 {columns.map(col => (
-                  <td key={col.key} style={{ textAlign: col.align ?? 'left' }}>
+                  <td
+                    key={col.key}
+                    className={col.sticky ? styles.stickyCell : undefined}
+                    style={{ textAlign: col.align ?? 'left' }}
+                  >
                     {col.render(row)}
                   </td>
                 ))}