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

@@ -31,19 +31,6 @@ 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 || [];
@@ -135,13 +122,8 @@ 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';
@@ -175,14 +157,22 @@ const HeaderCell = ({ header, table, onClick, hightlight, onChangeWidth }) => {
     return `${totalPinnedWidth}px`;
   };
 
-  const renderCell = (width, textLeft) => (
+  return (
+    <div
+      style={{
+        position: isPinned ? 'sticky' : 'relative',
+        left: isPinned ? leftOffset : 'auto',
+        zIndex: isPinned ? 21 : 'auto',
+      }}
+    >
       <div style={{ position: 'relative' }}>
         <div
+          key={header.id}
           onClick={() => onClick(header)}
           style={{
-          width: width + 'px',
+            width: header.getSize() + 'px',
-          minWidth: width + 'px',
+            minWidth: header.getSize() + 'px',
-          maxWidth: width + 'px',
+            maxWidth: header.getSize() + 'px',
             position: 'relative',
             padding: '4px 6px',
             textAlign: 'center',
@@ -202,7 +192,7 @@ const HeaderCell = ({ header, table, onClick, hightlight, onChangeWidth }) => {
             style={{
               textAlign: 'center',
               position: 'sticky',
-            left: textLeft,
+              left: getTextLeftOffset(),
               right: 0,
               paddingRight: '0.5rem',
               paddingLeft: '0.5rem',
@@ -215,30 +205,6 @@ const HeaderCell = ({ header, table, onClick, hightlight, onChangeWidth }) => {
           <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={{
-        position: isPinned ? 'sticky' : 'relative',
-        left: isPinned ? leftOffset : 'auto',
-        zIndex: isPinned ? 21 : 'auto',
-      }}
-    >
-      {renderCell(headerSize, getTextLeftOffset())}
     </div>
   );
 };