rez-table-listing-mui 1.2.9 → 1.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/App.tsx

@@ -34,7 +34,7 @@ function App() {
   const [searchTerm, setSearchTerm] = useState("");
   // const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
 
-  const [selectedTab, setSelectedTab] = useState("ALL");
+  const [selectedTab, setSelectedTab] = useState("All");
 
   const tableStates = useCraftTable();
   const filterSettingStates = useCraftTableFilterSettings();
@@ -195,9 +195,9 @@ function App() {
         (tab) => tab.tab_value?.toLowerCase() === "all"
       );
       if (allTab) {
-        setSelectedTab(allTab.tab_value || "ALL");
+        setSelectedTab(allTab.tab_value || "All");
       } else {
-        setSelectedTab(tabsData[0].tab_value || "ALL");
+        setSelectedTab(tabsData[0].tab_value || "All");
       }
     }
   }, [tabsData, selectedTab]);
@@ -205,7 +205,7 @@ function App() {
   const totalCount = useMemo(() => {
     return Number(
       tableData?.entity_tabs?.find((tab) => {
-        const activeTab = selectedTab || "ALL";
+        const activeTab = selectedTab || "All";
         return (
           tab.tab_value?.toLocaleLowerCase() === activeTab.toLocaleLowerCase()
         );
@@ -389,7 +389,7 @@ function App() {
                   showIcon: true,
                   onClick: () => setShowListViewSettings(!showListViewSettings),
                 }}
-                activeTab={selectedTab?.toUpperCase()}
+                activeTab={selectedTab}
                 tableStates={tableStates}
                 tabsData={tabsData}
                 onClick={(state) => {

package/src/assets/svg.tsx

@@ -792,22 +792,22 @@ export const DragandDrogIcon = () => {
   );
 };
 
-export const SettingIcon = () => {
-  return (
-    <svg
-      width="18"
-      height="17"
-      viewBox="0 0 18 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M15.1935 9.31669C15.2269 9.05002 15.2519 8.78335 15.2519 8.50002C15.2519 8.21669 15.2269 7.95002 15.1935 7.68335L16.9519 6.30835C17.1102 6.18335 17.1518 5.95835 17.0518 5.77502L15.3852 2.89169C15.3102 2.75835 15.1685 2.68335 15.0185 2.68335C14.9685 2.68335 14.9185 2.69169 14.8768 2.70835L12.8018 3.54169C12.3685 3.20835 11.9018 2.93335 11.3935 2.72502L11.0768 0.516687C11.0518 0.316687 10.8769 0.166687 10.6685 0.166687H7.33518C7.12685 0.166687 6.95185 0.316687 6.92685 0.516687L6.61018 2.72502C6.10185 2.93335 5.63518 3.21669 5.20185 3.54169L3.12685 2.70835C3.07685 2.69169 3.02685 2.68335 2.97685 2.68335C2.83518 2.68335 2.69352 2.75835 2.61852 2.89169L0.95185 5.77502C0.843516 5.95835 0.893517 6.18335 1.05185 6.30835L2.81018 7.68335C2.77685 7.95002 2.75185 8.22502 2.75185 8.50002C2.75185 8.77502 2.77685 9.05002 2.81018 9.31669L1.05185 10.6917C0.893517 10.8167 0.85185 11.0417 0.95185 11.225L2.61852 14.1084C2.69352 14.2417 2.83518 14.3167 2.98518 14.3167C3.03518 14.3167 3.08518 14.3084 3.12685 14.2917L5.20185 13.4584C5.63518 13.7917 6.10185 14.0667 6.61018 14.275L6.92685 16.4834C6.95185 16.6834 7.12685 16.8334 7.33518 16.8334H10.6685C10.8769 16.8334 11.0518 16.6834 11.0768 16.4834L11.3935 14.275C11.9018 14.0667 12.3685 13.7834 12.8018 13.4584L14.8768 14.2917C14.9268 14.3084 14.9768 14.3167 15.0268 14.3167C15.1685 14.3167 15.3102 14.2417 15.3852 14.1084L17.0518 11.225C17.1518 11.0417 17.1102 10.8167 16.9519 10.6917L15.1935 9.31669ZM13.5435 7.89169C13.5769 8.15002 13.5852 8.32502 13.5852 8.50002C13.5852 8.67502 13.5685 8.85835 13.5435 9.10835L13.4268 10.05L14.1685 10.6334L15.0685 11.3334L14.4852 12.3417L13.4268 11.9167L12.5602 11.5667L11.8102 12.1334C11.4518 12.4 11.1102 12.6 10.7685 12.7417L9.88518 13.1L9.75185 14.0417L9.58518 15.1667H8.41852L8.12685 13.1L7.24352 12.7417C6.88518 12.5917 6.55185 12.4 6.21852 12.15L5.46018 11.5667L4.57685 11.925L3.51852 12.35L2.93518 11.3417L3.83518 10.6417L4.57685 10.0584L4.46018 9.11669C4.43518 8.85835 4.41852 8.66669 4.41852 8.50002C4.41852 8.33335 4.43518 8.14169 4.46018 7.89169L4.57685 6.95002L3.83518 6.36669L2.93518 5.66669L3.51852 4.65835L4.57685 5.08335L5.44352 5.43335L6.19352 4.86669C6.55185 4.60002 6.89352 4.40002 7.23518 4.25835L8.11852 3.90002L8.25185 2.95835L8.41852 1.83335H9.57685L9.86852 3.90002L10.7519 4.25835C11.1102 4.40835 11.4435 4.60002 11.7768 4.85002L12.5352 5.43335L13.4185 5.07502L14.4768 4.65002L15.0602 5.65835L14.1685 6.36669L13.4268 6.95002L13.5435 7.89169ZM9.00185 5.16669C7.16018 5.16669 5.66852 6.65835 5.66852 8.50002C5.66852 10.3417 7.16018 11.8334 9.00185 11.8334C10.8435 11.8334 12.3352 10.3417 12.3352 8.50002C12.3352 6.65835 10.8435 5.16669 9.00185 5.16669ZM9.00185 10.1667C8.08518 10.1667 7.33518 9.41669 7.33518 8.50002C7.33518 7.58335 8.08518 6.83335 9.00185 6.83335C9.91852 6.83335 10.6685 7.58335 10.6685 8.50002C10.6685 9.41669 9.91852 10.1667 9.00185 10.1667Z"
-        fill="#1E1E1E"
-      />
-    </svg>
-  );
-};
+// export const SettingIcon = () => {
+//   return (
+//     <svg
+//       width="18"
+//       height="17"
+//       viewBox="0 0 18 17"
+//       fill="none"
+//       xmlns="http://www.w3.org/2000/svg"
+//     >
+//       <path
+//         d="M15.1935 9.31669C15.2269 9.05002 15.2519 8.78335 15.2519 8.50002C15.2519 8.21669 15.2269 7.95002 15.1935 7.68335L16.9519 6.30835C17.1102 6.18335 17.1518 5.95835 17.0518 5.77502L15.3852 2.89169C15.3102 2.75835 15.1685 2.68335 15.0185 2.68335C14.9685 2.68335 14.9185 2.69169 14.8768 2.70835L12.8018 3.54169C12.3685 3.20835 11.9018 2.93335 11.3935 2.72502L11.0768 0.516687C11.0518 0.316687 10.8769 0.166687 10.6685 0.166687H7.33518C7.12685 0.166687 6.95185 0.316687 6.92685 0.516687L6.61018 2.72502C6.10185 2.93335 5.63518 3.21669 5.20185 3.54169L3.12685 2.70835C3.07685 2.69169 3.02685 2.68335 2.97685 2.68335C2.83518 2.68335 2.69352 2.75835 2.61852 2.89169L0.95185 5.77502C0.843516 5.95835 0.893517 6.18335 1.05185 6.30835L2.81018 7.68335C2.77685 7.95002 2.75185 8.22502 2.75185 8.50002C2.75185 8.77502 2.77685 9.05002 2.81018 9.31669L1.05185 10.6917C0.893517 10.8167 0.85185 11.0417 0.95185 11.225L2.61852 14.1084C2.69352 14.2417 2.83518 14.3167 2.98518 14.3167C3.03518 14.3167 3.08518 14.3084 3.12685 14.2917L5.20185 13.4584C5.63518 13.7917 6.10185 14.0667 6.61018 14.275L6.92685 16.4834C6.95185 16.6834 7.12685 16.8334 7.33518 16.8334H10.6685C10.8769 16.8334 11.0518 16.6834 11.0768 16.4834L11.3935 14.275C11.9018 14.0667 12.3685 13.7834 12.8018 13.4584L14.8768 14.2917C14.9268 14.3084 14.9768 14.3167 15.0268 14.3167C15.1685 14.3167 15.3102 14.2417 15.3852 14.1084L17.0518 11.225C17.1518 11.0417 17.1102 10.8167 16.9519 10.6917L15.1935 9.31669ZM13.5435 7.89169C13.5769 8.15002 13.5852 8.32502 13.5852 8.50002C13.5852 8.67502 13.5685 8.85835 13.5435 9.10835L13.4268 10.05L14.1685 10.6334L15.0685 11.3334L14.4852 12.3417L13.4268 11.9167L12.5602 11.5667L11.8102 12.1334C11.4518 12.4 11.1102 12.6 10.7685 12.7417L9.88518 13.1L9.75185 14.0417L9.58518 15.1667H8.41852L8.12685 13.1L7.24352 12.7417C6.88518 12.5917 6.55185 12.4 6.21852 12.15L5.46018 11.5667L4.57685 11.925L3.51852 12.35L2.93518 11.3417L3.83518 10.6417L4.57685 10.0584L4.46018 9.11669C4.43518 8.85835 4.41852 8.66669 4.41852 8.50002C4.41852 8.33335 4.43518 8.14169 4.46018 7.89169L4.57685 6.95002L3.83518 6.36669L2.93518 5.66669L3.51852 4.65835L4.57685 5.08335L5.44352 5.43335L6.19352 4.86669C6.55185 4.60002 6.89352 4.40002 7.23518 4.25835L8.11852 3.90002L8.25185 2.95835L8.41852 1.83335H9.57685L9.86852 3.90002L10.7519 4.25835C11.1102 4.40835 11.4435 4.60002 11.7768 4.85002L12.5352 5.43335L13.4185 5.07502L14.4768 4.65002L15.0602 5.65835L14.1685 6.36669L13.4268 6.95002L13.5435 7.89169ZM9.00185 5.16669C7.16018 5.16669 5.66852 6.65835 5.66852 8.50002C5.66852 10.3417 7.16018 11.8334 9.00185 11.8334C10.8435 11.8334 12.3352 10.3417 12.3352 8.50002C12.3352 6.65835 10.8435 5.16669 9.00185 5.16669ZM9.00185 10.1667C8.08518 10.1667 7.33518 9.41669 7.33518 8.50002C7.33518 7.58335 8.08518 6.83335 9.00185 6.83335C9.91852 6.83335 10.6685 7.58335 10.6685 8.50002C10.6685 9.41669 9.91852 10.1667 9.00185 10.1667Z"
+//         fill="#1E1E1E"
+//       />
+//     </svg>
+//   );
+// };
 
 export const DropDownIcon = () => {
   return (
@@ -954,3 +954,19 @@ export const ClosedEyeIcon = () => {
     </svg>
   );
 };
+
+export const SettingIcon: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="21"
+    viewBox="0 0 20 21"
+    fill="none"
+  >
+    <path
+      d="M11.3748 18.8346H8.62484C8.47206 18.8346 8.33664 18.786 8.21859 18.6888C8.10053 18.5916 8.02762 18.4666 7.99984 18.3138L7.6665 16.2096C7.40262 16.1124 7.12484 15.9805 6.83317 15.8138C6.5415 15.6471 6.28456 15.4735 6.06234 15.293L4.12484 16.1888C3.97206 16.2582 3.81928 16.2687 3.6665 16.2201C3.51373 16.1714 3.39567 16.0707 3.31234 15.918L1.93734 13.4805C1.854 13.3416 1.83317 13.1957 1.87484 13.043C1.9165 12.8902 1.99984 12.7652 2.12484 12.668L3.9165 11.3555C3.88873 11.2305 3.87137 11.0881 3.86442 10.9284C3.85748 10.7687 3.854 10.6263 3.854 10.5013C3.854 10.3763 3.85748 10.2339 3.86442 10.0742C3.87137 9.9145 3.88873 9.77214 3.9165 9.64714L2.12484 8.33464C1.99984 8.23741 1.9165 8.11241 1.87484 7.95964C1.83317 7.80686 1.854 7.66102 1.93734 7.52214L3.31234 5.08464C3.39567 4.93186 3.51373 4.83116 3.6665 4.78255C3.81928 4.73394 3.97206 4.74436 4.12484 4.8138L6.06234 5.70964C6.28456 5.52908 6.5415 5.35547 6.83317 5.1888C7.12484 5.02214 7.40262 4.89714 7.6665 4.8138L7.99984 2.6888C8.02762 2.53602 8.10053 2.41102 8.21859 2.3138C8.33664 2.21658 8.47206 2.16797 8.62484 2.16797H11.3748C11.5276 2.16797 11.663 2.21658 11.7811 2.3138C11.8991 2.41102 11.9721 2.53602 11.9998 2.6888L12.3332 4.79297C12.5971 4.89019 12.8783 5.01866 13.1769 5.17839C13.4755 5.33811 13.729 5.51519 13.9373 5.70964L15.8748 4.8138C16.0276 4.74436 16.1804 4.73394 16.3332 4.78255C16.4859 4.83116 16.604 4.93186 16.6873 5.08464L18.0623 7.5013C18.1457 7.64019 18.17 7.7895 18.1353 7.94922C18.1005 8.10894 18.0137 8.23741 17.8748 8.33464L16.0832 9.60547C16.1109 9.74436 16.1283 9.89366 16.1353 10.0534C16.1422 10.2131 16.1457 10.3624 16.1457 10.5013C16.1457 10.6402 16.1422 10.786 16.1353 10.9388C16.1283 11.0916 16.1109 11.2374 16.0832 11.3763L17.8748 12.668C17.9998 12.7652 18.0832 12.8902 18.1248 13.043C18.1665 13.1957 18.1457 13.3416 18.0623 13.4805L16.6873 15.918C16.604 16.0707 16.4859 16.1714 16.3332 16.2201C16.1804 16.2687 16.0276 16.2582 15.8748 16.1888L13.9373 15.293C13.7151 15.4735 13.4616 15.6506 13.1769 15.8242C12.8922 15.9978 12.6109 16.1263 12.3332 16.2096L11.9998 18.3138C11.9721 18.4666 11.8991 18.5916 11.7811 18.6888C11.663 18.786 11.5276 18.8346 11.3748 18.8346ZM9.99984 13.2096C10.7498 13.2096 11.3887 12.9457 11.9165 12.418C12.4443 11.8902 12.7082 11.2513 12.7082 10.5013C12.7082 9.7513 12.4443 9.11241 11.9165 8.58464C11.3887 8.05686 10.7498 7.79297 9.99984 7.79297C9.24984 7.79297 8.61095 8.05686 8.08317 8.58464C7.55539 9.11241 7.2915 9.7513 7.2915 10.5013C7.2915 11.2513 7.55539 11.8902 8.08317 12.418C8.61095 12.9457 9.24984 13.2096 9.99984 13.2096ZM9.99984 11.9596C9.59706 11.9596 9.25331 11.8173 8.96859 11.5326C8.68387 11.2478 8.5415 10.9041 8.5415 10.5013C8.5415 10.0985 8.68387 9.75477 8.96859 9.47005C9.25331 9.18533 9.59706 9.04297 9.99984 9.04297C10.4026 9.04297 10.7464 9.18533 11.0311 9.47005C11.3158 9.75477 11.4582 10.0985 11.4582 10.5013C11.4582 10.9041 11.3158 11.2478 11.0311 11.5326C10.7464 11.8173 10.4026 11.9596 9.99984 11.9596ZM9.08317 17.5846H10.9165L11.2082 15.2513C11.6665 15.1402 12.1005 14.9666 12.5103 14.7305C12.92 14.4944 13.2915 14.2096 13.6248 13.8763L15.8332 14.8346L16.6665 13.3346L14.7082 11.8971C14.7637 11.661 14.8089 11.4284 14.8436 11.1992C14.8783 10.9701 14.8957 10.7374 14.8957 10.5013C14.8957 10.2652 14.8818 10.0326 14.854 9.80339C14.8262 9.57422 14.7776 9.34158 14.7082 9.10547L16.6665 7.66797L15.8332 6.16797L13.6248 7.1263C13.3054 6.76519 12.9443 6.46311 12.5415 6.22005C12.1387 5.977 11.6943 5.82075 11.2082 5.7513L10.9165 3.41797H9.08317L8.7915 5.7513C8.31928 5.84852 7.87831 6.01519 7.46859 6.2513C7.05887 6.48741 6.69428 6.77908 6.37484 7.1263L4.1665 6.16797L3.33317 7.66797L5.2915 9.10547C5.23595 9.34158 5.19081 9.57422 5.15609 9.80339C5.12137 10.0326 5.104 10.2652 5.104 10.5013C5.104 10.7374 5.12137 10.9701 5.15609 11.1992C5.19081 11.4284 5.23595 11.661 5.2915 11.8971L3.33317 13.3346L4.1665 14.8346L6.37484 13.8763C6.70817 14.2096 7.0797 14.4944 7.48942 14.7305C7.89914 14.9666 8.33317 15.1402 8.7915 15.2513L9.08317 17.5846Z"
+      fill="#0E0C0B"
+      fill-opacity="0.7"
+    />
+  </svg>
+);

package/src/components/index.scss

@@ -116,7 +116,7 @@
 
       .ts__head {
         position: relative;
-        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
+        // box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); //removing shadow below table header
 
         .ts__head__tr {
           background-color: var(--white);
@@ -124,10 +124,11 @@
           .ts__head__th {
             position: relative;
             padding: 0.5rem 1rem;
-            border: 1px solid var(--grey-300);
+            border: 1px solid var(--grey-500);
+            cursor: pointer;
 
             .ts__dnd__button {
-              color: var(--grey-100);
+              color: var(--grey-300);
               // width: max-content;
               // height: max-content;
               // cursor: grabbing;
@@ -145,6 +146,7 @@
               display: flex;
               align-items: center;
               gap: 0.25rem;
+              min-height: 44px; // to give min height of 60 px
 
               .ts__content__sort {
                 cursor: pointer;

package/src/components/pagination/default/index.scss

@@ -28,7 +28,7 @@
 
   .pagination_btn_container {
     display: flex;
-    gap: 0.5rem;
+    // gap: 0.3rem;
 
     .pagination_btn {
       position: relative;
@@ -71,3 +71,8 @@
     }
   }
 }
+
+.rows_per_page_container select {
+  border-radius: 4px;
+  padding: 6px;
+}

package/src/components/pagination/default/index.tsx

@@ -2,9 +2,11 @@ import { Table } from "@tanstack/react-table";
 import {
   TableFirstPageIcon,
   TableLastPageIcon,
-  TableNextPageIcon,
-  TablePreviousPageIcon,
+  // TableNextPageIcon,
+  // TablePreviousPageIcon,
 } from "../../../assets/svg";
+import TablePreviousPageIcon from "@mui/icons-material/NavigateBeforeRounded";
+import TableNextPageIcon from "@mui/icons-material/NavigateNextRounded";
 import "./index.scss";
 import { CraftTablePaginationProps } from "../../../types/table";
 
@@ -96,7 +98,7 @@ function DefaultPagination<T>({
               disabled={!table.getCanPreviousPage()}
               onClick={() => table.previousPage()}
             >
-              <TablePreviousPageIcon />
+              <TablePreviousPageIcon fontSize="small" />
             </button>
             <button
               title="Next Page"

package/src/components/tabs/index.tsx

@@ -5,6 +5,7 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import { settingsOptionsProps } from "../../types/table";
 import { tableTabsStyles } from "./styles";
 import { useMemo } from "react";
+import { SettingIcon } from "../../assets/svg";
 
 interface TabDataProps {
   tab_value: string | null;
@@ -24,7 +25,7 @@ interface TableTabsProps {
 export function TableTabs({
   loading = false,
   tabsData = [],
-  activeTab = "ALL",
+  activeTab = "All",
   onClick,
   tableStates,
   settingsOptions,
@@ -42,13 +43,13 @@ export function TableTabs({
       ?.filter((tab) => tab.tab_value !== null)
       ?.map((tab) => ({
         ...tab,
-        tab_value: tab.tab_value?.toUpperCase(),
+        tab_value: tab.tab_value,
       }));
   }, [tabsData]);
 
   const defaultTab = useMemo(() => {
     return (
-      normalizedTabs.find((t) => t.tab_value === "ALL")?.tab_value ||
+      normalizedTabs.find((t) => t.tab_value === "All")?.tab_value ||
       normalizedTabs[0]?.tab_value ||
       ""
     );
@@ -62,9 +63,9 @@ export function TableTabs({
       {settingsOptions?.showIcon && (
         <IconButton
           onClick={settingsOptions?.onClick}
-          sx={{ zIndex: 1000, mx: 1 }}
+          sx={{ zIndex: 1000, mx: 0 }}
         >
-          <SettingsOutlinedIcon />
+          <SettingIcon />
         </IconButton>
       )}
 
@@ -91,12 +92,17 @@ export function TableTabs({
                     sx={{
                       ...tableTabsStyles.tabCount,
                       ...(isSelected && {
-                        backgroundColor: "#ced3da",
-                        borderColor: "#ced3da",
+                        // backgroundColor: "#ced3da",
+                        // borderColor: "#ced3da",
+                        backgroundColor: "#000",
+                        color: "#fff",
+                        fontWeight: "500",
                       }),
                     }}
                   >
-                    {tab_value_count}
+                    {tab_value_count == 0
+                      ? "0"
+                      : String(tab_value_count).padStart(2, "0")}
                   </Box>
                 </Box>
               }

package/src/components/tabs/styles.ts

@@ -26,8 +26,9 @@ export const tableTabsStyles: TabStylesProps = {
   },
 
   tabCount: {
-    padding: "2px 6px",
-    borderRadius: "4px",
-    border: "1px solid #888",
+    padding: "2px 3px",
+    borderRadius: "6px",
+    border: "1px solid #0E0C0BE6",
+    color: "#0E0C0B",
   },
 };

package/src/components/topbar/index.tsx

@@ -107,6 +107,62 @@ function Topbar<T>({
     handler: () => setShowSearchInput(false),
   });
 
+  useEffect(() => {
+    const handleExternalLayoutTrigger = (e: Event) => {
+      const target = (e as CustomEvent).detail?.target as HTMLElement;
+      setLayoutAnchorEl(target);
+    };
+
+    const handleExternalFilterTrigger = () => {
+      onFilterButtonClick?.();
+    };
+
+    const handleExternalViewMoreTrigger = (e: Event) => {
+      const target = (e as CustomEvent).detail?.target as HTMLElement;
+      if (target) setViewMoreAnchorEl(target);
+    };
+
+    const handleExternalSearchTrigger = () => {
+      setShowSearchInput(true);
+      setTimeout(() => {
+        searchContainerRef.current?.querySelector("input")?.focus();
+      }, 100);
+    };
+
+    window.addEventListener(
+      "triggerLayoutPopover",
+      handleExternalLayoutTrigger
+    );
+    window.addEventListener("triggerFilterButton", handleExternalFilterTrigger);
+    window.addEventListener("triggerViewMore", handleExternalViewMoreTrigger);
+    window.addEventListener("triggerSearchInput", handleExternalSearchTrigger); // ✅
+
+    return () => {
+      window.removeEventListener(
+        "triggerLayoutPopover",
+        handleExternalLayoutTrigger
+      );
+      window.removeEventListener(
+        "triggerFilterButton",
+        handleExternalFilterTrigger
+      );
+      window.removeEventListener(
+        "triggerViewMore",
+        handleExternalViewMoreTrigger
+      );
+      window.removeEventListener(
+        "triggerSearchInput",
+        handleExternalSearchTrigger
+      ); // ✅
+    };
+  }, [onFilterButtonClick]);
+
+  const [viewMoreAnchorEl, setViewMoreAnchorEl] = useState<HTMLElement | null>(
+    null
+  );
+
+  const isViewMoreOpen = Boolean(viewMoreAnchorEl);
+
   return (
     <div className="ts-topbar">
       <div className="tabs-section">
@@ -119,40 +175,66 @@ function Topbar<T>({
         {rightSideComponent}
         {paginationComponent}
 
-        {showSearch && (
+        {/* {showSearch && (
           <div title="Search">
             <TableSearch
               value={searchValue ?? ""}
               onChange={onSearchChange ?? (() => {})}
             />
           </div>
+        )} */}
+        {showSearch && (
+          <div
+            title="Search"
+            className="external-search-trigger"
+            onClick={() => {
+              const customEvent = new CustomEvent("triggerSearchInput");
+              window.dispatchEvent(customEvent);
+            }}
+            ref={searchContainerRef}
+          >
+            <TableSearch
+              value={searchValue ?? ""}
+              onChange={onSearchChange ?? (() => {})}
+            />
+          </div>
         )}
 
         {showChangeLayoutToggle && (
           <>
             <div className="change-layout ts--button" title="Layout">
-              <div onClick={handleLayoutIconClick}>
+              {/* <div onClick={handleLayoutIconClick}>
+                <ChangeLayoutIcon />
+              </div> */}
+              <div
+                onClick={(e) => {
+                  const customEvent = new CustomEvent("triggerLayoutPopover", {
+                    detail: { target: e.currentTarget },
+                  });
+                  window.dispatchEvent(customEvent);
+                }}
+                className="external-layout-trigger"
+              >
                 <ChangeLayoutIcon />
               </div>
             </div>
-            <Popover
-              open={Boolean(layoutAnchorEl)}
-              anchorEl={layoutAnchorEl}
-              onClose={() => setLayoutAnchorEl(null)}
-              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-              container={fullscreenContainer}
-              sx={{
-                mt: 2.2,
-              }}
-            >
-              <LayoutSelector
-                onSelect={handleLayoutSelect}
-                selectedLayout={selectedLayout}
-              />
-            </Popover>
           </>
         )}
-
+        <Popover
+          open={Boolean(layoutAnchorEl)}
+          anchorEl={layoutAnchorEl}
+          onClose={() => setLayoutAnchorEl(null)}
+          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+          container={fullscreenContainer}
+          sx={{
+            mt: 2.2,
+          }}
+        >
+          <LayoutSelector
+            onSelect={handleLayoutSelect}
+            selectedLayout={selectedLayout}
+          />
+        </Popover>
         {showColumnToggle && (
           <>
             <div
@@ -203,7 +285,7 @@ function Topbar<T>({
           </div>
         )}
 
-        {viewMoreToggle && (
+        {/* {viewMoreToggle && (
           <div className="view-more ts--button" title="View More">
             <ViewMore
               compactMode={isCompactTable}
@@ -217,7 +299,54 @@ function Topbar<T>({
               tableStates={tableStates}
             />
           </div>
-        )}
+        )} */}
+        {/* {viewMoreToggle && (
+          <div
+            className="view-more ts--button view-more-trigger"
+            title="View More"
+          >
+            <ViewMore
+              compactMode={isCompactTable}
+              onCompactToggle={(value: string) =>
+                setIsCompactTable(value === "Compact")
+              }
+              isFullscreen={isFullscreen}
+              onFullscreenToggle={fullscreenToggle}
+              groupBy={groupBy}
+              onGroupByChange={(value: string) => setGroupBy(value)}
+              tableStates={tableStates}
+            />
+          </div>
+        )} */}
+        <Popover
+          open={isViewMoreOpen}
+          anchorEl={viewMoreAnchorEl}
+          onClose={() => setViewMoreAnchorEl(null)}
+          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+          transformOrigin={{ vertical: "top", horizontal: "left" }}
+          // PaperProps={{
+          //   sx: {
+          //     mt: 2,
+          //     padding: 0,
+          //     width: 380,
+          //     borderRadius: 1,
+          //     boxShadow: 4,
+          //   },
+          // }}
+        >
+          <ViewMore
+            compactMode={isCompactTable}
+            onCompactToggle={(value: string) =>
+              setIsCompactTable(value === "Compact")
+            }
+            isFullscreen={isFullscreen}
+            onFullscreenToggle={fullscreenToggle}
+            groupBy={groupBy}
+            onGroupByChange={(value: string) => setGroupBy(value)}
+            tableStates={tableStates}
+            onClose={() => setViewMoreAnchorEl(null)}
+          />
+        </Popover>
       </div>
     </div>
   );