diff --git a/web/src/components/RealtimeTable/TableHead/TableHead.jsx b/web/src/components/RealtimeTable/TableHead/TableHead.jsx index 0a63ae4..7bee2df 100644 --- a/web/src/components/RealtimeTable/TableHead/TableHead.jsx +++ b/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) => ( +
+
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)', + }} + > +
+ {header.isPlaceholder ? null : column.columnDef.header} +
+ +
+
+ ); + + if (splitGroup) { + return ( + <> +
+ {renderCell(pinnedBandWidth, '0')} +
+
+ {renderCell(headerSize - pinnedBandWidth, getTextLeftOffset(true))} +
+ + ); + } + return (
{ zIndex: isPinned ? 21 : 'auto', }} > -
-
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)', - }} - > -
- {header.isPlaceholder ? null : column.columnDef.header} -
- -
-
+ {renderCell(headerSize, getTextLeftOffset())}
); };