Web:Components:TableContainer: add tag ref for header cell

packages/components/table-container/TableHeader.js

@@ -662,6 +662,7 @@ class TableHeader extends React.Component {
       sortingVisible,
       infoPanelVisible,
       showSettings,
+      tagRef,
       ...rest
     } = this.props;
 
@@ -693,6 +694,7 @@ class TableHeader extends React.Component {
                   defaultSize={column.defaultSize}
                   onMouseDown={this.onMouseDown}
                   sortingVisible={sortingVisible}
+                  tagRef={tagRef}
                 />
               );
             })}

packages/components/table-container/TableHeaderCell.js

@@ -14,8 +14,9 @@ const TableHeaderCell = ({
   sorted,
   defaultSize,
   sortingVisible,
+  tagRef,
 }) => {
-  const { title, enable, active, minWidth } = column;
+  const { title, enable, active, minWidth, withTagRef } = column;
 
   const isActive = (sortBy && column.sortBy === sortBy) || active;
 
@@ -30,7 +31,46 @@ const TableHeaderCell = ({
     e.stopPropagation();
   };
 
-  return (
+  return withTagRef ? (
+    <StyledTableHeaderCell
+      sorted={sorted}
+      isActive={isActive}
+      showIcon={column.onClick}
+      className="table-container_header-cell"
+      id={`column_${index}`}
+      data-enable={enable}
+      data-min-width={minWidth}
+      data-default-size={defaultSize}
+      onClick={onClick}
+      sortingVisible={sortingVisible}
+      ref={tagRef}
+    >
+      <div className="table-container_header-item">
+        <div className="header-container-text-wrapper">
+          <Text fontWeight={600} className="header-container-text">
+            {enable ? title : ""}
+          </Text>
+
+          {sortingVisible && (
+            <IconButton
+              onClick={column.onIconClick ? onIconClick : onClick}
+              iconName="/static/images/sort.desc.react.svg"
+              className="header-container-text-icon"
+              size="small"
+              color={isActive ? globalColors.grayMain : globalColors.gray}
+            />
+          )}
+        </div>
+        {resizable && (
+          <div
+            data-column={`${index}`}
+            className="resize-handle not-selectable"
+            onMouseDown={onMouseDown}
+          />
+        )}
+      </div>
+    </StyledTableHeaderCell>
+  ) : (
     <StyledTableHeaderCell
       sorted={sorted}
       isActive={isActive}