EPMRPP-92483 | Table header hoverable-clickable area fix

reportportal · Jul 2, 2024 · 4454f72 · 4454f72
1 parent 73f51af
commit 4454f72
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/components/table/table.module.scss b/src/components/table/table.module.scss
@@ -100,7 +100,15 @@ $HEIGHT-LARGE: 80px;
   text-align: left;
   background: none;
   border: none;
-  cursor: pointer;
+
+  .label {
+    display: flex;
+    align-items: center;
+  }
+
+  &.sortable-cell > .label{
+    cursor: pointer;
+  }
 
   &.align-right {
     justify-content: flex-end;

diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -105,16 +105,20 @@ export const Table: FC<TableComponentProps> = ({
             className={cx('table-header-cell', {
               [`align-${(column as FixedColumn).align}`]: 'align' in column,
               'primary-cell': 'primary' in column && column.primary,
+              'sortable-cell': sortableColumns.includes(column.key),
             })}
             style={getCellStyle(column as FixedColumn)}
-            onClick={() => handleSort(column.key)}
-            onMouseEnter={() => handleMouseEnter(column.key)}
-            onMouseLeave={handleMouseLeave}
           >
-            <span>{column.header}</span>
-
-            {(hoveredColumn === column.key || sortingColumn?.key === column.key) &&
-              getSortIcon(column.key)}
+            <div
+              className={cx('label')}
+              onClick={() => handleSort(column.key)}
+              onMouseEnter={() => handleMouseEnter(column.key)}
+              onMouseLeave={handleMouseLeave}
+            >
+              <span>{column.header}</span>
+              {(hoveredColumn === column.key || sortingColumn?.key === column.key) &&
+                getSortIcon(column.key)}
+            </div>
           </button>
         ))}
         {rowActionMenu && <div className={cx('table-header-cell', 'action-menu-cell')} />}
@@ -143,7 +147,7 @@ export const Table: FC<TableComponentProps> = ({
               {columns.map((column) => (
                 <div
                   key={column.key}
-                  className={cx('table-cell', 'table-cell', {
+                  className={cx('table-cell', {
                     'primary-cell': 'primary' in column && column.primary,
                   })}
                   style={getCellStyle(column as FixedColumn)}