Web: Components: Table: fixed header styles

packages/asc-web-components/table-container/StyledTableContainer.js

@@ -6,7 +6,6 @@ const HeaderStyles = css`
   position: fixed;
   background: #fff;
   z-index: 1;
-  width: 79%;
   border-bottom: 1px solid #eceef1;
 `;
 
@@ -96,6 +95,7 @@ const StyledTableRow = styled.div`
 `;
 
 const StyledTableCell = styled.div`
+  padding-right: 8px;
   height: 40px;
   max-height: 40px;
   border-bottom: 1px solid #eceef1;

packages/asc-web-components/table-container/TableCell.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { StyledTableCell } from "./StyledTableContainer";
 
-const TableCell = (props) => {
+const TableCell = ({ className, forwardedRef, ...rest }) => {
   return (
     <StyledTableCell
-      className="table-container_cell"
-      ref={props.forwardedRef}
-      {...props}
+      className={`${className} table-container_cell`}
+      ref={forwardedRef}
+      {...rest}
     />
   );
 };

packages/asc-web-components/table-container/TableContainer.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 const TableContainer = (props) => {
   return (
     <StyledTableContainer
+      id="table-container"
       className="table-container"
       ref={props.forwardedRef}
       {...props}

packages/asc-web-components/table-container/TableHeader.js

@@ -23,7 +23,7 @@ class TableHeader extends React.Component {
   }
 
   componentDidMount() {
-    //this.onResize();
+    this.onResize();
     window.addEventListener("resize", this.throttledResize);
   }
 
@@ -82,12 +82,16 @@ class TableHeader extends React.Component {
   onResize = () => {
     const { containerRef } = this.props;
 
+    const container = containerRef.current
+      ? containerRef.current
+      : document.getElementById("table-container");
+
     const storageSize = localStorage.getItem(TABLE_SIZE);
     const tableContainer = storageSize
       ? storageSize.split(" ")
-      : containerRef.current.style.gridTemplateColumns.split(" ");
+      : container.style.gridTemplateColumns.split(" ");
 
-    const containerWidth = +containerRef.current.clientWidth;
+    const containerWidth = +container.clientWidth;
     const newContainerWidth = containerWidth - 32 - 80 - 24;
 
     let str = "";
@@ -119,8 +123,9 @@ class TableHeader extends React.Component {
 
       str = `32px ${column} ${otherColumns} ${otherColumns} ${otherColumns} 80px 24px`;
     }
-    containerRef.current.style.gridTemplateColumns = str;
+    container.style.gridTemplateColumns = str;
     this.headerRef.current.style.gridTemplateColumns = str;
+    this.headerRef.current.style.width = containerWidth + "px";
 
     localStorage.setItem(TABLE_SIZE, str);
   };

packages/asc-web-components/table-container/TableRow.js

@@ -42,7 +42,7 @@ const TableRow = (props) => {
 
   const [iconVisible, setIconVisible] = useState(!checked);
 
-  const onMouseEnter = () => {
+  const onMouseOver = () => {
     if (checked) return;
     setIconVisible(false);
   };
@@ -70,7 +70,7 @@ const TableRow = (props) => {
         {...selectionProp}
         {...props.style}
         onMouseLeave={onMouseLeave}
-        onMouseEnter={onMouseEnter}
+        onMouseOver={onMouseOver}
       >
         {iconVisible ? (
           element