ColumnFilterButton correction and table DOM structure correction

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

@@ -8,6 +8,7 @@ import RowsBackgroundStyle from '../../styles/RowsBackgroundStyle';
 const DesktopTable = (props) => {
   return (
     <TableStyle rowFooter={props.rowFooter}>
+      <tbody>
         <TableHeader
           orderedKeys={props.orderedKeys}
           sortByUpdate={props.sortByUpdate}
@@ -16,7 +17,11 @@ const DesktopTable = (props) => {
         {props.elements.map((item, i) => {
           return (
             <tr key={`table-row-${i}`} className="TableStyle__tr">
-            <TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} />
+              <TableRowItems
+                orderedKeys={props.orderedKeys}
+                item={item}
+                i={i}
+              />
               <TableRowFooter
                 deleteItem={() => {
                   props.setItemToHandle(item);
@@ -30,10 +35,11 @@ const DesktopTable = (props) => {
                 item={item}
                 i={i}
               />
-            <RowsBackgroundStyle i={i} />
+              <RowsBackgroundStyle i={i} as="td" />
             </tr>
           );
         })}
+      </tbody>
     </TableStyle>
   );
 };

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

@@ -25,6 +25,7 @@ const TableHeader = (props) => {
               props.tableUpdate();
             }}
           >
+            <FlexRow as="span" alignmentX="flex-start" gap="8px" width="100%">
               {keyValue}
               <FlexRow
                 as="span"
@@ -37,6 +38,7 @@ const TableHeader = (props) => {
                   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;