ColumnFilterButton correction and table DOM structure correction

src/components/generic/Table/components/DesktopTable/DesktopTable.js

@@ -8,32 +8,38 @@ import RowsBackgroundStyle from '../../styles/RowsBackgroundStyle';
 const DesktopTable = (props) => {
   return (
     <TableStyle rowFooter={props.rowFooter}>
-      <TableHeader
-        orderedKeys={props.orderedKeys}
-        sortByUpdate={props.sortByUpdate}
-        tableUpdate={props.tableUpdate}
-      />
-      {props.elements.map((item, i) => {
-        return (
-          <tr key={`table-row-${i}`} className="TableStyle__tr">
-            <TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} />
-            <TableRowFooter
-              deleteItem={() => {
-                props.setItemToHandle(item);
-                props.setDeletePopUp(true);
-              }}
-              editItem={() => {
-                props.setItemToHandle(item);
-                props.setEditPopUp(true);
-              }}
-              rowFooter={props.rowFooter}
-              item={item}
-              i={i}
-            />
-            <RowsBackgroundStyle i={i} />
-          </tr>
-        );
-      })}
+      <tbody>
+        <TableHeader
+          orderedKeys={props.orderedKeys}
+          sortByUpdate={props.sortByUpdate}
+          tableUpdate={props.tableUpdate}
+        />
+        {props.elements.map((item, i) => {
+          return (
+            <tr key={`table-row-${i}`} className="TableStyle__tr">
+              <TableRowItems
+                orderedKeys={props.orderedKeys}
+                item={item}
+                i={i}
+              />
+              <TableRowFooter
+                deleteItem={() => {
+                  props.setItemToHandle(item);
+                  props.setDeletePopUp(true);
+                }}
+                editItem={() => {
+                  props.setItemToHandle(item);
+                  props.setEditPopUp(true);
+                }}
+                rowFooter={props.rowFooter}
+                item={item}
+                i={i}
+              />
+              <RowsBackgroundStyle i={i} as="td" />
+            </tr>
+          );
+        })}
+      </tbody>
     </TableStyle>
   );
 };

src/components/generic/Table/components/TableHeader/TableHeader.js

@@ -25,17 +25,19 @@ const TableHeader = (props) => {
               props.tableUpdate();
             }}
           >
-            {keyValue}
-            <FlexRow
-              as="span"
-              className="TableStyle__sort-button"
-              column={keyValue}
-            >
-              <ColumnFilterIcon
-                index={i}
-                active={activeIcon}
-                rotateIcon={rotateActiveIcon}
-              />
+            <FlexRow as="span" alignmentX="flex-start" gap="8px" width="100%">
+              {keyValue}
+              <FlexRow
+                as="span"
+                className="TableStyle__sort-button"
+                column={keyValue}
+              >
+                <ColumnFilterIcon
+                  index={i}
+                  active={activeIcon}
+                  rotateIcon={rotateActiveIcon}
+                />
+              </FlexRow>
             </FlexRow>
           </th>
         );

src/components/generic/Table/components/TableRowItems/TableRowItems.js

@@ -21,7 +21,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
         return (
           <td key={`table-item-${i}-${j}`} className="TableStyle__td">
             {IS_MOBILE() && (
-              <Container className="mobile-table-header">{keyValue}</Container>
+              <Container as="span" className="mobile-table-header">
+                {keyValue}
+              </Container>
             )}
             {renderValue(keyValue)}
             {keyValue === '#' && i + 1}

src/components/generic/Table/components/TableRowTags/TableRowTags.js

@@ -3,7 +3,7 @@ import { FlexRow } from '../../../../../utils/containers';
 
 const TableRowTags = ({ item, i }) => {
   return (
-    <FlexRow className="TableStyle__tags-container">
+    <FlexRow as="span" className="TableStyle__tags-container">
       {renderTags(item.tags)}
     </FlexRow>
   );

src/components/generic/Table/styles/TableStyle.js

@@ -6,7 +6,6 @@ const TableStyle = styled.table`
   width: 100%;
 
   .TableStyle__th {
-    position: relative;
     cursor: pointer;
     * {
       cursor: pointer;
@@ -62,12 +61,6 @@ const TableStyle = styled.table`
     gap: 4px;
     padding: 0 2px;
   }
-
-  .TableStyle__sort-button {
-    position: absolute;
-    top: 15px;
-    right: 16%;
-  }
 `;
 
 export default TableStyle;