Merge pull request '[AURORA-1132] - ошибка закрепления колонок' (#7) from AURORA-1132 into test

Reviewed-on: #7
Reviewed-by: PotapovaA <potapovaanna113@mail.ru>

web/src/components/RealtimeTable/TableHead/TableHead.jsx

@@ -31,6 +31,19 @@ const getColumnId = (header) => {
   return columnId;
 }
 
+// Ширина закреплённых дочерних колонок группового заголовка
+const getPinnedColumnsWidth = (header, pinningColumn) => {
+  let width = 0;
+  for (const leaf of header.getLeafHeaders()) {
+    if (pinningColumn.includes(leaf.column.id)) {
+      width += leaf.column.getSize();
+    } else {
+      break;
+    }
+  }
+  return width;
+};
+
 const calculateLeftOffset = (table, columnOrHeader) => {
   const columnId = getColumnId(columnOrHeader);
   const pinnedColumns = table.getState().columnPinning.left || [];
@@ -122,8 +135,13 @@ const ColumnNumberCell = ({ column, table }) => {
 
 const HeaderCell = ({ header, table, onClick, hightlight, onChangeWidth }) => {
   const column = header.column;
+  const pinningColumn = table.getState().columnPinning.left || [];
+  const isGroup = header.subHeaders?.length > 0;
   const isPinned = isColumnPin(table, header);
   const leftOffset = calculateLeftOffset(table, header);
+  const headerSize = header.getSize();
+  const pinnedBandWidth = isGroup ? getPinnedColumnsWidth(header, pinningColumn) : 0;
+  const splitGroup = isGroup && isPinned && pinnedBandWidth > 0 && pinnedBandWidth < headerSize;
 
   const customBgColor = column.columnDef?.muiTableHeadCellProps?.sx?.backgroundColor;
   const color = column.columnDef?.muiTableHeadCellProps?.sx?.color || '#000000';
@@ -157,6 +175,61 @@ const HeaderCell = ({ header, table, onClick, hightlight, onChangeWidth }) => {
     return `${totalPinnedWidth}px`;
   };
 
+  const renderCell = (width, textLeft) => (
+    <div style={{ position: 'relative' }}>
+      <div
+        onClick={() => onClick(header)}
+        style={{
+          width: width + 'px',
+          minWidth: width + 'px',
+          maxWidth: width + 'px',
+          position: 'relative',
+          padding: '4px 6px',
+          textAlign: 'center',
+          fontWeight: 600,
+          fontSize: '12px',
+          backgroundColor: backgroundColor,
+          color: '#424242',
+          boxSizing: 'border-box',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '3rem',
+          border: '.063rem solid rgba(209, 213, 220, 1)',
+        }}
+      >
+        <div
+          style={{
+            textAlign: 'center',
+            position: 'sticky',
+            left: textLeft,
+            right: 0,
+            paddingRight: '0.5rem',
+            paddingLeft: '0.5rem',
+            backgroundColor: backgroundColor,
+            color: color,
+          }}
+        >
+          {header.isPlaceholder ? null : column.columnDef.header}
+        </div>
+        <ColumnResizer reportDragDeltaX={handleChangeWidth} />
+      </div>
+    </div>
+  );
+
+  if (splitGroup) {
+    return (
+      <>
+        <div style={{ position: 'sticky', left: leftOffset, zIndex: 21, flexShrink: 0 }}>
+          {renderCell(pinnedBandWidth, '0')}
+        </div>
+        <div style={{ position: 'relative', flexShrink: 0 }}>
+          {renderCell(headerSize - pinnedBandWidth, getTextLeftOffset(true))}
+        </div>
+      </>
+    );
+  }
+
   return (
     <div
       style={{
@@ -165,46 +238,7 @@ const HeaderCell = ({ header, table, onClick, hightlight, onChangeWidth }) => {
         zIndex: isPinned ? 21 : 'auto',
       }}
     >
-      <div style={{ position: 'relative' }}>
+      {renderCell(headerSize, getTextLeftOffset())}
-        <div
-          key={header.id}
-          onClick={() => onClick(header)}
-          style={{
-            width: header.getSize() + 'px',
-            minWidth: header.getSize() + 'px',
-            maxWidth: header.getSize() + 'px',
-            position: 'relative',
-            padding: '4px 6px',
-            textAlign: 'center',
-            fontWeight: 600,
-            fontSize: '12px',
-            backgroundColor: backgroundColor,
-            color: '#424242',
-            boxSizing: 'border-box',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '3rem',
-            border: '.063rem solid rgba(209, 213, 220, 1)',
-          }}
-        >
-          <div
-            style={{
-              textAlign: 'center',
-              position: 'sticky',
-              left: getTextLeftOffset(),
-              right: 0,
-              paddingRight: '0.5rem',
-              paddingLeft: '0.5rem',
-              backgroundColor: backgroundColor,
-              color: color,
-            }}
-          >
-            {header.isPlaceholder ? null : column.columnDef.header}
-          </div>
-          <ColumnResizer reportDragDeltaX={handleChangeWidth} />
-        </div>
-      </div>
     </div>
   );
 };