frontend/lib-commonjs/webparts/approvalAdmin/components/screens/RequestTypesScreen.js

@@ -85,6 +85,7 @@ var RequestTypesScreen = function (_a) {
                     header: '',
                     width: '100px',
                     align: 'right',
+                    sticky: true,
                     render: function (r) { return (React.createElement(ui_1.ActionsCell, null,
                         React.createElement(ui_1.IconButton, { icon: "edit", label: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C", onClick: function () { return openEdit(r); } }),
                         React.createElement(ui_1.IconButton, { icon: "trash", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", danger: true, onClick: function () { setDeleteError(undefined); setDeleting(r); } }))); }

frontend/lib-commonjs/webparts/approvalAdmin/components/screens/RouteStepsScreen.js

@@ -160,6 +160,7 @@ var RouteStepsScreen = function (_a) {
                     header: '',
                     width: '100px',
                     align: 'right',
+                    sticky: true,
                     render: function (r) { return (React.createElement(ui_1.ActionsCell, null,
                         React.createElement(ui_1.IconButton, { icon: "edit", label: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C", onClick: function () { return openEdit(r); } }),
                         React.createElement(ui_1.IconButton, { icon: "trash", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", danger: true, onClick: function () { setDeleteError(undefined); setDeleting(r); } }))); }

frontend/lib-commonjs/webparts/approvalAdmin/components/screens/RoutesScreen.js

@@ -154,6 +154,7 @@ var RoutesScreen = function (_a) {
                     header: '',
                     width: '160px',
                     align: 'right',
+                    sticky: true,
                     render: function (r) { return (React.createElement(ui_1.ActionsCell, null,
                         React.createElement(ui_1.Button, { size: "sm", variant: "secondary", icon: "clipboard", onClick: function () { return onOpenSteps(r); } }, "\u0428\u0430\u0433\u0438"),
                         React.createElement(ui_1.IconButton, { icon: "edit", label: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C", onClick: function () { return openEdit(r); } }),

frontend/lib-commonjs/webparts/approvalAdmin/components/ui/DataTable.js

@@ -13,11 +13,11 @@ function DataTable(_a) {
                 React.createElement("thead", null,
                     React.createElement("tr", null, columns.map(function (col) {
                         var _a;
-                        return (React.createElement("th", { key: col.key, style: { width: col.width, textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.header));
+                        return (React.createElement("th", { key: col.key, className: col.sticky ? DataTable_module_scss_1.default.stickyCell : undefined, style: { width: col.width, textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.header));
                     }))),
                 React.createElement("tbody", null, rows.map(function (row) { return (React.createElement("tr", { key: keyOf(row) }, columns.map(function (col) {
                     var _a;
-                    return (React.createElement("td", { key: col.key, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
+                    return (React.createElement("td", { key: col.key, className: col.sticky ? DataTable_module_scss_1.default.stickyCell : undefined, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
                 }))); })))),
         rows.length === 0 && React.createElement("div", { className: DataTable_module_scss_1.default.empty }, emptyMessage)));
 }

frontend/lib-commonjs/webparts/approvalAdmin/components/ui/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/DataTable.tsx"],"names":[],"mappings":";;;AAkBA,8BA8BC;;AAhDD,mDAA+B;AAC/B,0FAA6C;AAiB7C,SAAgB,SAAS,CAAI,EAA0D;QAAxD,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,YAAY,kBAAA;IAC/D,OAAO,CACL,6BAAK,SAAS,EAAE,+BAAM,CAAC,IAAI;QACzB,6BAAK,SAAS,EAAE,+BAAM,CAAC,MAAM;YAC3B,+BAAO,SAAS,EAAE,+BAAM,CAAC,KAAK;gBAC5B;oBACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;wBAAI,OAAA,CAClB,4BAAI,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IAC1E,GAAG,CAAC,MAAM,CACR,CACN,CAAA;qBAAA,CAAC,CACC,CACC;gBACR,mCACG,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAA,CACf,4BAAI,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,IAChB,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;oBAAI,OAAA,CAClB,4BAAI,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IACxD,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CACb,CACN,CAAA;iBAAA,CAAC,CACC,CACN,EARgB,CAQhB,CAAC,CACI,CACF,CACJ;QACL,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,6BAAK,SAAS,EAAE,+BAAM,CAAC,KAAK,IAAG,YAAY,CAAO,CACpE,CACP,CAAC;AACJ,CAAC;AAEM,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB;AAEK,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB","sourcesContent":["import * as React from 'react';\nimport styles from './DataTable.module.scss';\n\nexport interface IColumn<T> {\n  key: string;\n  header: string;\n  render: (row: T) => React.ReactNode;\n  align?: 'left' | 'right' | 'center';\n  width?: string;\n}\n\nexport interface IDataTableProps<T> {\n  columns: IColumn<T>[];\n  rows: T[];\n  keyOf: (row: T) => string | number;\n  emptyMessage: string;\n}\n\nexport function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {\n  return (\n    <div className={styles.wrap}>\n      <div className={styles.scroll}>\n        <table className={styles.table}>\n          <thead>\n            <tr>\n              {columns.map(col => (\n                <th key={col.key} style={{ width: col.width, textAlign: col.align ?? 'left' }}>\n                  {col.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map(row => (\n              <tr key={keyOf(row)}>\n                {columns.map(col => (\n                  <td key={col.key} style={{ textAlign: col.align ?? 'left' }}>\n                    {col.render(row)}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      {rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}\n    </div>\n  );\n}\n\nexport const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <span className={styles.primaryCell}>{children}</span>\n);\n\nexport const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <span className={styles.actionsCell}>{children}</span>\n);\n"]}
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/DataTable.tsx"],"names":[],"mappings":";;;AAqBA,8BAsCC;;AA3DD,mDAA+B;AAC/B,0FAA6C;AAoB7C,SAAgB,SAAS,CAAI,EAA0D;QAAxD,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,YAAY,kBAAA;IAC/D,OAAO,CACL,6BAAK,SAAS,EAAE,+BAAM,CAAC,IAAI;QACzB,6BAAK,SAAS,EAAE,+BAAM,CAAC,MAAM;YAC3B,+BAAO,SAAS,EAAE,+BAAM,CAAC,KAAK;gBAC5B;oBACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;wBAAI,OAAA,CAClB,4BACE,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,+BAAM,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACrD,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IAE1D,GAAG,CAAC,MAAM,CACR,CACN,CAAA;qBAAA,CAAC,CACC,CACC;gBACR,mCACG,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAA,CACf,4BAAI,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,IAChB,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;oBAAI,OAAA,CAClB,4BACE,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,+BAAM,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACrD,KAAK,EAAE,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IAExC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CACb,CACN,CAAA;iBAAA,CAAC,CACC,CACN,EAZgB,CAYhB,CAAC,CACI,CACF,CACJ;QACL,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,6BAAK,SAAS,EAAE,+BAAM,CAAC,KAAK,IAAG,YAAY,CAAO,CACpE,CACP,CAAC;AACJ,CAAC;AAEM,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB;AAEK,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB","sourcesContent":["import * as React from 'react';\nimport styles from './DataTable.module.scss';\n\nexport interface IColumn<T> {\n  key: string;\n  header: string;\n  render: (row: T) => React.ReactNode;\n  align?: 'left' | 'right' | 'center';\n  width?: string;\n  // Держит колонку у правого края видимой области при горизонтальной\n  // прокрутке — чтобы кнопки действий не уезжали за край на узких экранах.\n  sticky?: boolean;\n}\n\nexport interface IDataTableProps<T> {\n  columns: IColumn<T>[];\n  rows: T[];\n  keyOf: (row: T) => string | number;\n  emptyMessage: string;\n}\n\nexport function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {\n  return (\n    <div className={styles.wrap}>\n      <div className={styles.scroll}>\n        <table className={styles.table}>\n          <thead>\n            <tr>\n              {columns.map(col => (\n                <th\n                  key={col.key}\n                  className={col.sticky ? styles.stickyCell : undefined}\n                  style={{ width: col.width, textAlign: col.align ?? 'left' }}\n                >\n                  {col.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map(row => (\n              <tr key={keyOf(row)}>\n                {columns.map(col => (\n                  <td\n                    key={col.key}\n                    className={col.sticky ? styles.stickyCell : undefined}\n                    style={{ textAlign: col.align ?? 'left' }}\n                  >\n                    {col.render(row)}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      {rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}\n    </div>\n  );\n}\n\nexport const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <span className={styles.primaryCell}>{children}</span>\n);\n\nexport const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n  <span className={styles.actionsCell}>{children}</span>\n);\n"]}

frontend/lib-commonjs/webparts/approvalAdmin/components/ui/DataTable.module.scss.css

@@ -87,6 +87,25 @@
   background: #FEFBF0;
 }
 
+.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, 0.12);
+  z-index: 1;
+}
+
+.table tbody tr:hover td.stickyCell {
+  background: #FEFBF0;
+}
+
 .primaryCell {
   font-weight: 500;
   color: #0F2440;

frontend/release/assets/approval-admin-web-part.js

@@ -218,16 +218,17 @@ __webpack_require__.r(__webpack_exports__);
 // Imports
 
 
-_node_modules_microsoft_sp_css_loader_node_modules_microsoft_load_themed_styles_lib_es6_index_js__WEBPACK_IMPORTED_MODULE_0__.loadStyles(":root{--navy-950:#0a1b30;--navy-900:#0f2440;--navy-800:#1b3a5c;--navy-700:#244b73;--navy-600:#2d5c8a;--navy-100:#e8eef4;--navy-50:#f4f7fa;--gold-600:#b8881a;--gold-500:#d4a01e;--gold-400:#e5b635;--gold-300:#f0cc5e;--gold-100:#fdf5e0;--gold-50:#fefbf0;--gray-900:#111827;--gray-700:#374151;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--red-500:#dc2626;--red-50:#fef2f2;--green-600:#15803d;--green-50:#f0fdf4;--blue-600:#2563eb;--blue-50:#eff6ff;--amber-700:#854d0e;--sh-1:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);--sh-2:0 4px 16px rgba(15,36,64,.07);--sh-3:0 12px 32px rgba(15,36,64,.1);--sh-gold:0 4px 20px rgba(212,160,30,.18);--sh-modal:0 24px 70px rgba(10,27,48,.25);--r-sm:6px;--r-md:10px;--r-lg:14px}.wrap_bf1aa6ad{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);overflow:hidden}.scroll_bf1aa6ad{overflow-x:auto}.table_bf1aa6ad{border-collapse:collapse;font-size:13.5px;min-width:100%}.table_bf1aa6ad thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;color:#9ca3af;font-size:10.5px;font-weight:600;letter-spacing:1.2px;padding:13px 18px;text-align:left;text-transform:uppercase;white-space:nowrap}.table_bf1aa6ad tbody td{border-bottom:1px solid #f3f4f6;color:#374151;padding:15px 18px;vertical-align:middle}.table_bf1aa6ad tbody tr:last-child td{border-bottom:0}.table_bf1aa6ad tbody tr{transition:.12s}.table_bf1aa6ad tbody tr:hover{background:#fefbf0}.primaryCell_bf1aa6ad{align-items:center;color:#0f2440;display:flex;font-weight:500;gap:10px}.actionsCell_bf1aa6ad{align-items:center;display:flex;gap:4px;justify-content:flex-end}.empty_bf1aa6ad{color:#9ca3af;font-size:13px;padding:48px 20px;text-align:center}", true);
+_node_modules_microsoft_sp_css_loader_node_modules_microsoft_load_themed_styles_lib_es6_index_js__WEBPACK_IMPORTED_MODULE_0__.loadStyles(":root{--navy-950:#0a1b30;--navy-900:#0f2440;--navy-800:#1b3a5c;--navy-700:#244b73;--navy-600:#2d5c8a;--navy-100:#e8eef4;--navy-50:#f4f7fa;--gold-600:#b8881a;--gold-500:#d4a01e;--gold-400:#e5b635;--gold-300:#f0cc5e;--gold-100:#fdf5e0;--gold-50:#fefbf0;--gray-900:#111827;--gray-700:#374151;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;--red-500:#dc2626;--red-50:#fef2f2;--green-600:#15803d;--green-50:#f0fdf4;--blue-600:#2563eb;--blue-50:#eff6ff;--amber-700:#854d0e;--sh-1:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);--sh-2:0 4px 16px rgba(15,36,64,.07);--sh-3:0 12px 32px rgba(15,36,64,.1);--sh-gold:0 4px 20px rgba(212,160,30,.18);--sh-modal:0 24px 70px rgba(10,27,48,.25);--r-sm:6px;--r-md:10px;--r-lg:14px}.wrap_a3314060{background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 1px 2px rgba(15,36,64,.04),0 1px 3px rgba(15,36,64,.06);overflow:hidden}.scroll_a3314060{overflow-x:auto}.table_a3314060{border-collapse:collapse;font-size:13.5px;min-width:100%}.table_a3314060 thead th{background:#f9fafb;border-bottom:1px solid #e5e7eb;color:#9ca3af;font-size:10.5px;font-weight:600;letter-spacing:1.2px;padding:13px 18px;text-align:left;text-transform:uppercase;white-space:nowrap}.table_a3314060 tbody td{border-bottom:1px solid #f3f4f6;color:#374151;padding:15px 18px;vertical-align:middle}.table_a3314060 tbody tr:last-child td{border-bottom:0}.table_a3314060 tbody tr{transition:.12s}.table_a3314060 tbody tr:hover{background:#fefbf0}.stickyCell_a3314060{position:sticky;right:0}.table_a3314060 thead th.stickyCell_a3314060{z-index:2}.table_a3314060 tbody td.stickyCell_a3314060{background:#fff;box-shadow:-6px 0 6px -6px rgba(15,36,64,.12);z-index:1}.table_a3314060 tbody tr:hover td.stickyCell_a3314060{background:#fefbf0}.primaryCell_a3314060{align-items:center;color:#0f2440;display:flex;font-weight:500;gap:10px}.actionsCell_a3314060{align-items:center;display:flex;gap:4px;justify-content:flex-end}.empty_a3314060{color:#9ca3af;font-size:13px;padding:48px 20px;text-align:center}", true);
 
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
-  wrap: "wrap_bf1aa6ad",
+  wrap: "wrap_a3314060",
-  scroll: "scroll_bf1aa6ad",
+  scroll: "scroll_a3314060",
-  table: "table_bf1aa6ad",
+  table: "table_a3314060",
-  primaryCell: "primaryCell_bf1aa6ad",
+  stickyCell: "stickyCell_a3314060",
-  actionsCell: "actionsCell_bf1aa6ad",
+  primaryCell: "primaryCell_a3314060",
-  empty: "empty_bf1aa6ad"
+  actionsCell: "actionsCell_a3314060",
+  empty: "empty_a3314060"
 });
 
 
@@ -645,6 +646,7 @@ var RequestTypesScreen = function (_a) {
                     header: '',
                     width: '100px',
                     align: 'right',
+                    sticky: true,
                     render: function (r) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_1__.ActionsCell, null,
                         react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_1__.IconButton, { icon: "edit", label: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C", onClick: function () { return openEdit(r); } }),
                         react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_1__.IconButton, { icon: "trash", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", danger: true, onClick: function () { setDeleteError(undefined); setDeleting(r); } }))); }
@@ -929,6 +931,7 @@ var RouteStepsScreen = function (_a) {
                     header: '',
                     width: '100px',
                     align: 'right',
+                    sticky: true,
                     render: function (r) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_2__.ActionsCell, null,
                         react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_2__.IconButton, { icon: "edit", label: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C", onClick: function () { return openEdit(r); } }),
                         react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_2__.IconButton, { icon: "trash", label: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C", danger: true, onClick: function () { setDeleteError(undefined); setDeleting(r); } }))); }
@@ -1150,6 +1153,7 @@ var RoutesScreen = function (_a) {
                     header: '',
                     width: '160px',
                     align: 'right',
+                    sticky: true,
                     render: function (r) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_2__.ActionsCell, null,
                         react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_2__.Button, { size: "sm", variant: "secondary", icon: "clipboard", onClick: function () { return onOpenSteps(r); } }, "\u0428\u0430\u0433\u0438"),
                         react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ui__WEBPACK_IMPORTED_MODULE_2__.IconButton, { icon: "edit", label: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C", onClick: function () { return openEdit(r); } }),
@@ -1351,11 +1355,11 @@ function DataTable(_a) {
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement("thead", null,
                     react__WEBPACK_IMPORTED_MODULE_0__.createElement("tr", null, columns.map(function (col) {
                         var _a;
-                        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("th", { key: col.key, style: { width: col.width, textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.header));
+                        return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("th", { key: col.key, className: col.sticky ? _DataTable_module_scss__WEBPACK_IMPORTED_MODULE_1__["default"].stickyCell : undefined, style: { width: col.width, textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.header));
                     }))),
                 react__WEBPACK_IMPORTED_MODULE_0__.createElement("tbody", null, rows.map(function (row) { return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("tr", { key: keyOf(row) }, columns.map(function (col) {
                     var _a;
-                    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("td", { key: col.key, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
+                    return (react__WEBPACK_IMPORTED_MODULE_0__.createElement("td", { key: col.key, className: col.sticky ? _DataTable_module_scss__WEBPACK_IMPORTED_MODULE_1__["default"].stickyCell : undefined, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
                 }))); })))),
         rows.length === 0 && react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: _DataTable_module_scss__WEBPACK_IMPORTED_MODULE_1__["default"].empty }, emptyMessage)));
 }

frontend/src/webparts/approvalAdmin/components/screens/RequestTypesScreen.tsx

@@ -128,6 +128,7 @@ export const RequestTypesScreen: React.FC<IRequestTypesScreenProps> = ({ api })
             header: '',
             width: '100px',
             align: 'right',
+            sticky: true,
             render: r => (
               <ActionsCell>
                 <IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />

frontend/src/webparts/approvalAdmin/components/screens/RouteStepsScreen.tsx

@@ -238,6 +238,7 @@ export const RouteStepsScreen: React.FC<IRouteStepsScreenProps> = ({ api, route,
             header: '',
             width: '100px',
             align: 'right',
+            sticky: true,
             render: r => (
               <ActionsCell>
                 <IconButton icon="edit" label="Редактировать" onClick={() => openEdit(r)} />

frontend/src/webparts/approvalAdmin/components/screens/RoutesScreen.tsx

@@ -214,6 +214,7 @@ export const RoutesScreen: React.FC<IRoutesScreenProps> = ({ api, onOpenSteps })
             header: '',
             width: '160px',
             align: 'right',
+            sticky: true,
             render: r => (
               <ActionsCell>
                 <Button size="sm" variant="secondary" icon="clipboard" onClick={() => onOpenSteps(r)}>Шаги</Button>

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>
                 ))}