div wrapper & icon size

Author: RafaelGB

src/components/Table.tsx

@@ -243,20 +243,23 @@ export function Table(tableData: TableDataType) {
                 const addColumnHeader = headerGroup.headers.find(
                   (h) => h.id === MetadataColumns.ADD_COLUMN
                 );
-                console.log("headerGroup");
                 return (
                   <div
                     key={`${headerGroup.id}-${headerGroupIndex}`}
                     className={`${c("tr header-group")}`}
                   >
                     {/** HEADER CONTEXT */}
-                    {<HeaderContextMenuWrapper {...headerContext} />}
+                    <HeaderContextMenuWrapper
+                      header={headerContext}
+                      style={{
+                        width: "30px",
+                      }}
+                    />
                     {/** LIST OF COLUMNS */}
                     {headerGroup.headers
                       .filter(
                         (h) =>
-                          h.id !== MetadataColumns.ROW_CONTEXT_MENU &&
-                          h.id !== MetadataColumns.ADD_COLUMN
+                          ![headerContext.id, addColumnHeader.id].includes(h.id)
                       )
                       .map(
                         (
@@ -273,14 +276,7 @@ export function Table(tableData: TableDataType) {
                         )
                       )}
                     {/** ADD COLUMN HEADER*/}
-                    <div key={`${addColumnHeader.id}`} className={`${c("th")}`}>
-                      {addColumnHeader.isPlaceholder
-                        ? null
-                        : flexRender(
-                            addColumnHeader.column.columnDef.header,
-                            addColumnHeader.getContext()
-                          )}
-                    </div>
+                    <HeaderContextMenuWrapper header={addColumnHeader} />
                   </div>
                 );
               }

src/components/contextMenu/HeaderContextMenu.tsx

@@ -23,21 +23,18 @@ export default function HeaderContextMenu(
       enable_columns_filter: !columnsFilterAreEnabled,
     });
   };
-  console.log("HeaderContextMenu");
   return (
-    <Button
-      size="small"
+    <span
+      className="svg-icon svg-gray"
       onClick={enableColumnsFilterHandler}
       key={`Button-Enabled-DataviewFilters`}
-      style={{ minWidth: "0px", padding: "2px", borderRadius: "0px" }}
+      style={{ width: "30px", height: "100%" }}
     >
-      <span className="svg-icon svg-gray">
-        {columnsFilterAreEnabled ? (
-          <SearchOffIcon {...MenuButtonStyle} />
-        ) : (
-          <ManageSearchIcon {...MenuButtonStyle} />
-        )}
-      </span>
-    </Button>
+      {columnsFilterAreEnabled ? (
+        <SearchOffIcon {...MenuButtonStyle} fontSize="small" />
+      ) : (
+        <ManageSearchIcon {...MenuButtonStyle} fontSize="small" />
+      )}
+    </span>
   );
 }

src/components/contextMenu/HeaderContextMenuWrapper.tsx

@@ -1,17 +1,18 @@
 import { flexRender, Header } from "@tanstack/react-table";
 import { RowDataType } from "cdm/FolderModel";
 import { c } from "helpers/StylesHelper";
-import React from "react";
-
-export default function HeaderContextMenuWrapper(
-  header: Header<RowDataType, unknown>
-) {
-  console.log("HeaderContextMenuWrapper");
+import React, { HTMLAttributes, HTMLProps } from "react";
+interface HeaderWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  header: Header<RowDataType, unknown>;
+}
+const HeaderContextMenuWrapper = ({ header, ...props }: HeaderWrapperProps) => {
   return (
-    <div key={`${header.id}`} className={`${c("th")}`}>
+    <div key={`${header.id}`} className={`${c("th")}`} {...props}>
       {header.isPlaceholder
         ? null
         : flexRender(header.column.columnDef.header, header.getContext())}
     </div>
   );
-}
+};
+
+export default HeaderContextMenuWrapper;