rez-table-listing-mui 1.0.40 → 1.0.41

package/package.json

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

package/src/App.tsx

@@ -9,9 +9,10 @@ import {
   useDeleteFilterAPI,
   useEntityTableAPI,
   useSavedFilterAPI,
-  useSaveSettingsDataAPI,
+  useGetSettingsDataAPI,
   useSettingsDropDownAPI,
   useUpdateFilterAPI,
+  useSaveSettingsDataAPI,
 } from "./libs/hooks/useEntityTableAPI";
 import {
   useDetailsQueryAPI,
@@ -20,7 +21,8 @@ import {
 import LoginButton from "./components/login";
 import { CraftTableFilter } from ".";
 import { useCraftTableFilterSettings } from "./libs/hooks/useCraftTableFilterSettings";
-import QuickFilterSettings from "./components/table-settings";
+import { QuickFilterSettings } from "./components/table-settings";
+import { SettingsDataProps } from "./types/filter-settings";
 // import { ENTITY_TYPE } from "./libs/utils/common";
 
 function App() {
@@ -38,12 +40,8 @@ function App() {
 
   const { filters, setFilters, filterMaster, filterToDelete } = tableStates;
 
-  const {
-    showListViewSettings,
-    setShowListViewSettings,
-    settingsData,
-    setSettingsData,
-  } = filterSettingStates;
+  const { showListViewSettings, setShowListViewSettings, setSettingsData } =
+    filterSettingStates;
 
   const { defaultColumns } = useDefaultColumns();
 
@@ -57,7 +55,7 @@ function App() {
   const { savedMutation } = useSavedFilterAPI(); //API CALL FOR SAVED FILTER
   const { deleteMutation } = useDeleteFilterAPI(); //API FOR DELETING FILTER
   const { updateMutation } = useUpdateFilterAPI(); //API FOR UPDATE FILTER
-
+  const { saveSettingsDataMutation } = useSaveSettingsDataAPI("AYR");
   const { dropdownData } = useCommonDropdownAPI(metaQuery.data);
   const { settingsTabDropdownData, settingsTabDropdownPending } =
     useSettingsDropDownAPI({
@@ -66,9 +64,7 @@ function App() {
       sort_by: filterSettingStates?.quickTabStates?.sorting,
     });
 
-  const { saveSettingsAPIData } = useSaveSettingsDataAPI({
-    payload: filterSettingStates?.settingsData,
-  });
+  const { getSettingsAPIData } = useGetSettingsDataAPI("AYR");
 
   useEffect(() => {
     // setTimeout(() => {
@@ -92,9 +88,8 @@ function App() {
   }, [detailsQuery.data]);
 
   useEffect(() => {
-    setSettingsData(saveSettingsAPIData?.layout_json);
-    console.log("settingsData", settingsData);
-  }, [saveSettingsAPIData]);
+    setSettingsData(getSettingsAPIData?.layout_json);
+  }, [getSettingsAPIData]);
 
   //For server side sorting
   const enableServerSideSorting = true;
@@ -234,6 +229,16 @@ function App() {
     updateMutation.mutate({ entity_type, payload });
   };
 
+  const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
+    const payload = {
+      entity_type: "LAP",
+      mapped_entity_type: "AYR",
+      layout_json: settingsData,
+    };
+
+    saveSettingsDataMutation.mutate({ payload });
+  };
+
   return (
     <div className="app_wrapper">
       <LoginButton />
@@ -302,8 +307,10 @@ function App() {
                 filterSettingStates={filterSettingStates}
                 onClose={() => setShowListViewSettings(false)}
                 columnsData={metaQuery.data || {}}
+                columnsDataLoading={metaQuery.isPending}
                 tabsApiData={settingsTabDropdownData || []}
                 tabsApiDataLoading={settingsTabDropdownPending}
+                onSaveSettingsData={handleSaveSettingsData}
               />
             </>
           ),

package/src/assets/svg.tsx

@@ -838,7 +838,7 @@ export const AddIcon = ({ ...props }) => {
     >
       <path
         d="M4.50002 5.50002H1.16669C1.02502 5.50002 0.906298 5.45208 0.81052 5.35619C0.714632 5.2603 0.666687 5.14152 0.666687 4.99985C0.666687 4.85808 0.714632 4.73935 0.81052 4.64369C0.906298 4.54791 1.02502 4.50002 1.16669 4.50002H4.50002V1.16669C4.50002 1.02502 4.54797 0.906298 4.64385 0.81052C4.73974 0.714632 4.85852 0.666687 5.00019 0.666687C5.14197 0.666687 5.26069 0.714632 5.35635 0.81052C5.45213 0.906298 5.50002 1.02502 5.50002 1.16669V4.50002H8.83335C8.97502 4.50002 9.09374 4.54797 9.18952 4.64385C9.28541 4.73974 9.33335 4.85852 9.33335 5.00019C9.33335 5.14197 9.28541 5.26069 9.18952 5.35635C9.09374 5.45213 8.97502 5.50002 8.83335 5.50002H5.50002V8.83335C5.50002 8.97502 5.45208 9.09374 5.35619 9.18952C5.2603 9.28541 5.14152 9.33335 4.99985 9.33335C4.85808 9.33335 4.73935 9.28541 4.64369 9.18952C4.54791 9.09374 4.50002 8.97502 4.50002 8.83335V5.50002Z"
-        fill="#888888"
+        fill="currentColor"
       />
     </svg>
   );
@@ -894,3 +894,63 @@ export const CrossBox = () => {
     </svg>
   );
 };
+
+export const EyeIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_6673_82208"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
+        <rect width="16" height="16" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_6673_82208)">
+        <path
+          d="M8.00147 10.3847C8.75692 10.3847 9.39853 10.1203 9.92631 9.5915C10.4541 9.06272 10.718 8.42061 10.718 7.66517C10.718 6.90972 10.4536 6.26811 9.9248 5.74033C9.39603 5.21256 8.75392 4.94867 7.99847 4.94867C7.24303 4.94867 6.60142 5.21306 6.07364 5.74183C5.54586 6.27061 5.28197 6.91272 5.28197 7.66817C5.28197 8.42361 5.54636 9.06522 6.07514 9.593C6.60392 10.1208 7.24603 10.3847 8.00147 10.3847ZM7.99997 9.46667C7.49997 9.46667 7.07497 9.29167 6.72497 8.94167C6.37497 8.59167 6.19997 8.16667 6.19997 7.66667C6.19997 7.16667 6.37497 6.74167 6.72497 6.39167C7.07497 6.04167 7.49997 5.86667 7.99997 5.86667C8.49997 5.86667 8.92497 6.04167 9.27497 6.39167C9.62497 6.74167 9.79997 7.16667 9.79997 7.66667C9.79997 8.16667 9.62497 8.59167 9.27497 8.94167C8.92497 9.29167 8.49997 9.46667 7.99997 9.46667ZM7.99997 12.3333C6.59653 12.3333 5.31297 11.9589 4.1493 11.2102C2.98564 10.4615 2.0568 9.4765 1.3628 8.25517C1.30725 8.15939 1.26664 8.06289 1.24097 7.96567C1.21541 7.86844 1.20264 7.76867 1.20264 7.66633C1.20264 7.564 1.21541 7.46433 1.24097 7.36733C1.26664 7.27033 1.30725 7.17394 1.3628 7.07817C2.0568 5.85683 2.98564 4.87183 4.1493 4.12317C5.31297 3.37439 6.59653 3 7.99997 3C9.40342 3 10.687 3.37439 11.8506 4.12317C13.0143 4.87183 13.9431 5.85683 14.6371 7.07817C14.6927 7.17394 14.7333 7.27044 14.759 7.36767C14.7845 7.46489 14.7973 7.56467 14.7973 7.667C14.7973 7.76933 14.7845 7.869 14.759 7.966C14.7333 8.063 14.6927 8.15939 14.6371 8.25517C13.9431 9.4765 13.0143 10.4615 11.8506 11.2102C10.687 11.9589 9.40342 12.3333 7.99997 12.3333ZM7.99997 11.3333C9.25553 11.3333 10.4083 11.0028 11.4583 10.3417C12.5083 9.68055 13.3111 8.78889 13.8666 7.66667C13.3111 6.54444 12.5083 5.65278 11.4583 4.99167C10.4083 4.33056 9.25553 4 7.99997 4C6.74442 4 5.59164 4.33056 4.54164 4.99167C3.49164 5.65278 2.68886 6.54444 2.1333 7.66667C2.68886 8.78889 3.49164 9.68055 4.54164 10.3417C5.59164 11.0028 6.74442 11.3333 7.99997 11.3333Z"
+          fill="#505050"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const ClosedEyeIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_6673_82183"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="16"
+        height="16"
+      >
+        <rect width="16" height="16" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_6673_82183)">
+        <path
+          d="M9.91793 5.74876C10.1888 6.01976 10.3982 6.34903 10.5461 6.73659C10.694 7.12426 10.7499 7.51337 10.7139 7.90392C10.7139 8.03215 10.6678 8.1407 10.5756 8.22959C10.4833 8.31848 10.373 8.36292 10.2448 8.36292C10.1165 8.36292 10.008 8.31848 9.9191 8.22959C9.83021 8.1407 9.78576 8.03215 9.78576 7.90392C9.82854 7.61081 9.80443 7.33303 9.71343 7.07059C9.62243 6.80826 9.48248 6.58264 9.29359 6.39376C9.1047 6.20487 8.87693 6.06148 8.61026 5.96359C8.34359 5.8657 8.06237 5.84026 7.76659 5.88726C7.63837 5.89159 7.52771 5.84864 7.43459 5.75842C7.34137 5.66831 7.29265 5.55914 7.28843 5.43092C7.28409 5.3027 7.32532 5.19198 7.41209 5.09876C7.49887 5.00564 7.60637 4.95698 7.73459 4.95276C8.12259 4.90831 8.51254 4.95892 8.90443 5.10459C9.29632 5.25037 9.63415 5.46509 9.91793 5.74876ZM7.99993 4.00009C7.76315 4.00009 7.53087 4.01165 7.30309 4.03476C7.07532 4.05776 6.84859 4.09576 6.62293 4.14876C6.48104 4.17787 6.35326 4.15759 6.23959 4.08792C6.12593 4.01826 6.04776 3.91803 6.00509 3.78726C5.96232 3.65226 5.97643 3.52387 6.04743 3.40209C6.11832 3.28031 6.22126 3.20487 6.35626 3.17576C6.62471 3.11164 6.89587 3.06637 7.16976 3.03992C7.44376 3.01337 7.72048 3.00009 7.99993 3.00009C9.43237 3.00009 10.7482 3.37231 11.9474 4.11676C13.1465 4.8612 14.0687 5.86848 14.7139 7.13859C14.7584 7.22315 14.7907 7.30837 14.8108 7.39426C14.8309 7.48014 14.8409 7.57098 14.8409 7.66676C14.8409 7.76253 14.8326 7.85337 14.8159 7.93926C14.7993 8.02515 14.7687 8.11037 14.7243 8.19492C14.52 8.62226 14.2718 9.02076 13.9794 9.39042C13.6871 9.76009 13.3653 10.0996 13.0139 10.4091C12.9106 10.5014 12.7925 10.5396 12.6596 10.5238C12.5266 10.508 12.4174 10.4415 12.3319 10.3244C12.2465 10.2073 12.211 10.0817 12.2256 9.94759C12.2402 9.81337 12.2991 9.70009 12.4024 9.60776C12.7033 9.33509 12.9777 9.03703 13.2256 8.71359C13.4735 8.39003 13.6872 8.04109 13.8666 7.66676C13.311 6.54453 12.5083 5.65287 11.4583 4.99176C10.4083 4.33065 9.25548 4.00009 7.99993 4.00009ZM7.99993 12.3334C6.59648 12.3334 5.31015 11.9584 4.14093 11.2084C2.97171 10.4584 2.04226 9.47059 1.35259 8.24492C1.29704 8.16037 1.25643 8.06848 1.23076 7.96926C1.20509 7.87014 1.19226 7.76931 1.19226 7.66676C1.19226 7.5642 1.20337 7.46503 1.22559 7.36926C1.24782 7.27359 1.28671 7.18003 1.34226 7.08859C1.59015 6.63559 1.87093 6.20415 2.18459 5.79426C2.49826 5.38448 2.85893 5.0172 3.26659 4.69242L1.76143 3.17692C1.66921 3.07781 1.62371 2.96009 1.62493 2.82376C1.62626 2.68742 1.67521 2.57098 1.77176 2.47442C1.86832 2.37787 1.98543 2.32959 2.12309 2.32959C2.26065 2.32959 2.37771 2.37787 2.47426 2.47442L13.5256 13.5258C13.6179 13.6181 13.6669 13.7324 13.6724 13.8686C13.678 14.0049 13.629 14.1248 13.5256 14.2283C13.429 14.3248 13.3119 14.3731 13.1743 14.3731C13.0367 14.3731 12.9197 14.3248 12.8231 14.2283L10.4769 11.9026C10.0837 12.0547 9.67959 12.1645 9.2646 12.2321C8.84971 12.2996 8.42815 12.3334 7.99993 12.3334ZM3.96926 5.39492C3.57859 5.6967 3.22748 6.03792 2.91593 6.41859C2.60437 6.79937 2.34348 7.21542 2.13326 7.66676C2.68882 8.78898 3.49159 9.68064 4.54159 10.3418C5.59159 11.0029 6.74437 11.3334 7.99993 11.3334C8.28626 11.3334 8.56809 11.3142 8.84543 11.2758C9.12276 11.2373 9.3982 11.1779 9.67176 11.0976L8.82809 10.2334C8.69309 10.2924 8.55826 10.3324 8.42359 10.3533C8.28904 10.3743 8.14782 10.3848 7.99993 10.3848C7.24348 10.3848 6.60137 10.1209 6.07359 9.59309C5.54582 9.06531 5.28193 8.4232 5.28193 7.66676C5.28193 7.51887 5.29348 7.37765 5.31659 7.24309C5.33971 7.10842 5.37859 6.97359 5.43326 6.83859L3.96926 5.39492Z"
+          fill="#C5C5C5"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/common/loader/loader.tsx

@@ -0,0 +1,20 @@
+import { Box, CircularProgress, Typography } from "@mui/material";
+
+const Loader = ({ loaderText }: { loaderText?: string }) => {
+  return (
+    <Box
+      display={"flex"}
+      justifyContent="center"
+      alignItems={"center"}
+      flexDirection={"column"}
+      gap={2}
+      height={"100%"}
+      width={"100%"}
+    >
+      <CircularProgress />
+      {loaderText && <Typography variant="h6">{loaderText}</Typography>}
+    </Box>
+  );
+};
+
+export default Loader;

package/src/components/table-settings/common/draggable-listitem.tsx

@@ -42,22 +42,23 @@ const DraggableListItem = ({
       ref={setNodeRef}
       style={style}
       {...attributes}
-      {...listeners}
       sx={{
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        py: 1,
-        px: 1,
         "&:hover": { bgcolor: "#f5f5f5" },
         borderRadius: 1,
         marginBottom: 1,
-        backgroundColor: "white",
-        cursor: isDragging ? "grabbing" : "grab",
+        cursor: isDragging ? "grabbing" : "default",
         boxShadow: isDragging ? "0 2px 8px rgba(0,0,0,0.1)" : "none",
       }}
     >
-      <DragIndicator sx={{ mr: 1, color: "#ccc" }} />
+      <Box
+        {...listeners}
+        sx={{ cursor: "grab", display: "flex", alignItems: "center" }}
+      >
+        <DragIndicator sx={{ mr: 1, color: "#ccc" }} />
+      </Box>
       {children}
     </Box>
   );

package/src/components/table-settings/common/listing-values.tsx

@@ -1,12 +1,4 @@
-import { Visibility, VisibilityOff } from "@mui/icons-material";
-import {
-  Box,
-  Button,
-  CircularProgress,
-  Grid,
-  IconButton,
-  Typography,
-} from "@mui/material";
+import { Box, Button, Grid, IconButton, Typography } from "@mui/material";
 import CustomSearch from "../../filter/components/search/index.tsx";
 import {
   SortableContext,
@@ -15,6 +7,9 @@ import {
 import { useDroppable } from "@dnd-kit/core";
 import DraggableListItem from "./draggable-listitem.tsx";
 import { listingValuesStyles } from "../style.ts";
+import Loader from "../../common/loader/loader.tsx";
+import { ClosedEyeIcon, EyeIcon } from "../../../assets/svg.tsx";
+``;
 
 interface FilterValue {
   id: string;
@@ -30,6 +25,7 @@ interface ListingValuesProps {
   setSearchTerm?: React.Dispatch<React.SetStateAction<string>>;
   containerId: string;
   tabsApiDataLoading?: boolean;
+  onItemToggle: (itemId: string, fromContainerId: string) => void;
 }
 
 const ListingValues = ({
@@ -41,6 +37,7 @@ const ListingValues = ({
   setSearchTerm,
   containerId,
   tabsApiDataLoading,
+  onItemToggle,
 }: ListingValuesProps) => {
   const { setNodeRef } = useDroppable({
     id: containerId,
@@ -53,14 +50,7 @@ const ListingValues = ({
   return (
     <Grid size={6} sx={listingValuesStyles.wrapper}>
       {tabsApiDataLoading ? (
-        <Box
-          display={"flex"}
-          justifyContent="center"
-          alignItems={"center"}
-          height={"100%"}
-        >
-          <CircularProgress />
-        </Box>
+        <Loader />
       ) : (
         <Box sx={{ p: 2 }}>
           <Box sx={listingValuesStyles.headerContainer}>
@@ -72,6 +62,7 @@ const ListingValues = ({
               variant="text"
               size="small"
               sx={listingValuesStyles.button}
+              disabled={filteredValues.length === 0}
             >
               {buttonText}
             </Button>
@@ -93,15 +84,23 @@ const ListingValues = ({
                     id={item.id}
                     containerId={containerId}
                   >
-                    <Box sx={listingValuesStyles.itemLabel}>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        flex: 1,
+                        color: containerId === "tabs" ? "black" : "#9e9d9b",
+                      }}
+                    >
                       <Typography>{item.label}</Typography>
                     </Box>
-                    <IconButton size="small">
-                      {containerId === "tabs" ? (
-                        <Visibility />
-                      ) : (
-                        <VisibilityOff />
-                      )}
+
+                    {/* on click i want to append this item in the show list and remove it from the hide list */}
+                    <IconButton
+                      size="small"
+                      onClick={() => onItemToggle(item.id, containerId)}
+                    >
+                      {containerId === "tabs" ? <EyeIcon /> : <ClosedEyeIcon />}
                     </IconButton>
                   </DraggableListItem>
                 ))}

package/src/components/table-settings/components/column.tsx

@@ -39,16 +39,25 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
   const [searchTerm, setSearchTerm] = useState<string>("");
   const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
 
-  const { quickTabStates, columnTabState, setColumnTabState } =
+  const { quickTabStates, columnTabState, setColumnTabState, settingsData } =
     filterSettingStates;
 
   useEffect(() => {
+    const mappedColumns: ColumnItem[] =
+      columnsData?.column_list?.map((column) => ({
+        label: column?.name,
+        value: column?.attribute_key,
+      })) || [];
+    //Later changed TabData to interface from filter settings types file
+    const mappedTabs: TabData[] =
+      quickTabStates?.show_list?.map((tab) => ({
+        tab_name: tab,
+        show_list: mappedColumns,
+        hide_list: [],
+      })) || [];
+
     if (!Object.entries(columnTabState)?.length) {
-      const mappedColumns: ColumnItem[] =
-        columnsData?.column_list?.map((column) => ({
-          label: column?.name,
-          value: column?.attribute_key,
-        })) || [];
+      console.log("hello:", Object.entries(columnTabState)?.length);
 
       console.log("mappedColumnsssss", mappedColumns);
 
@@ -56,16 +65,41 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
         isDefault: true,
         show_list: mappedColumns,
         hide_list: [],
-        tabs: quickTabStates?.show_list?.map((tab) => ({
-          tab_name: tab,
-          show_list: mappedColumns,
-          hide_list: [],
-        })),
+        tabs: mappedTabs,
       };
 
       setColumnTabState(newColumnState);
     }
-  }, []);
+
+    // console.log(
+    //   "+++++++++",
+    //   columnTabState?.tabs,
+    //   !settingsData?.column?.tabs?.length
+    // );
+
+    /**
+     * * If isDefault is true and tabs is undefined
+     * *    - we need to set tabs
+     *
+     * * If isDefault is false and show_list and hide_list are undefined
+     * *    - we need to set show_list and hide_list
+     */
+    if (
+      columnTabState?.tabs?.length === undefined &&
+      !settingsData?.column?.tabs?.length
+    ) {
+      setColumnTabState((prev) => ({
+        ...prev,
+        tabs: mappedTabs,
+      }));
+    } else if (!columnTabState?.show_list && !columnTabState?.hide_list) {
+      setColumnTabState((prev) => ({
+        ...prev,
+        show_list: mappedColumns,
+        hide_list: [],
+      }));
+    }
+  }, []); // might need settingsData dependancy if logic is working inconsistently
 
   // useEffect(() => {
   //   if (settingsData?.column) {
@@ -154,6 +188,29 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
     value.label.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  const handleItemToggle = (itemId: string, fromContainerId: string) => {
+    let newShowList = [...showList];
+    let newHideList = [...hideList];
+
+    if (fromContainerId === "tabs") {
+      // Move from show to hide
+      const itemIndex = newShowList.findIndex((item) => item.value === itemId);
+      if (itemIndex > -1) {
+        const [itemToMove] = newShowList.splice(itemIndex, 1);
+        newHideList.push(itemToMove);
+      }
+    } else if (fromContainerId === "list") {
+      // Move from hide to show
+      const itemIndex = newHideList.findIndex((item) => item.value === itemId);
+      if (itemIndex > -1) {
+        const [itemToMove] = newHideList.splice(itemIndex, 1);
+        newShowList.push(itemToMove);
+      }
+    }
+
+    updateLists(newShowList, newHideList);
+  };
+
   // Update lists based on current mode
   const updateLists = (
     newShowList: ColumnItem[],
@@ -267,38 +324,39 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
     setSelectedTabIndex(newValue);
   };
 
+  const hasShowListQuickTabs =
+    quickTabStates?.show_list?.length !== 0 || isColumnDefault ? true : false;
+
   return (
-    <Box sx={{ maxHeight: "600px" }}>
-      <Box sx={{ maxHeight: "500px", borderRadius: 1, bgcolor: "white" }}>
-        <Grid container spacing={2}>
-          <Grid size={12}>
-            <Box sx={{ mb: 2 }}>
-              <Typography
-                variant="subtitle2"
-                sx={{ mb: 1, fontWeight: 500, color: "#0E0C0BE5" }}
-              >
-                Customize column by
-              </Typography>
-              <CustomToggleSwitchButton
-                buttons={TOGGLE_BUTTON_TABS}
-                value={isColumnDefault}
-                onChange={handleToggleChange}
-              />
-            </Box>
-          </Grid>
-
-          {!isColumnDefault && (
-            <Grid size={12}>
-              <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 2 }}>
-                <CustomTabs value={selectedTabIndex} onChange={handleTabChange}>
-                  {quickTabStates?.show_list?.map((tab) => (
-                    <Tab key={tab} label={tab} />
-                  ))}
-                </CustomTabs>
-              </Box>
-            </Grid>
-          )}
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.75rem",
+        height: "100%",
+      }}
+    >
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>
+          Customize column by
+        </Typography>
+        <CustomToggleSwitchButton
+          buttons={TOGGLE_BUTTON_TABS}
+          value={isColumnDefault}
+          onChange={handleToggleChange}
+        />
+      </Box>
 
+      <Box sx={{ flex: 1 }}>
+        {!isColumnDefault && hasShowListQuickTabs && (
+          <CustomTabs value={selectedTabIndex} onChange={handleTabChange}>
+            {quickTabStates?.show_list?.map((tab) => (
+              <Tab key={tab} label={tab} />
+            ))}
+          </CustomTabs>
+        )}
+
+        {hasShowListQuickTabs ? (
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -306,24 +364,28 @@ const ColumnTab = ({ filterSettingStates, columnsData }: ColumnTabProps) => {
           >
             <Grid container spacing={2} size={12}>
               <ListingValues
+                containerId="list"
+                headerText="Hidden In List"
+                filteredValues={filteredListValues}
                 buttonText="Show All"
                 onClick={handleShowAll}
-                headerText="Hidden in List"
-                filteredValues={filteredListValues}
                 searchTerm={searchTerm}
                 setSearchTerm={setSearchTerm}
-                containerId="list"
+                onItemToggle={handleItemToggle}
               />
               <ListingValues
+                containerId="tabs"
+                headerText="Show In List"
+                filteredValues={showListValues}
                 buttonText="Hide All"
                 onClick={handleHideAll}
-                headerText="Shown in List"
-                filteredValues={showListValues}
-                containerId="tabs"
+                onItemToggle={handleItemToggle}
               />
             </Grid>
           </DndContext>
-        </Grid>
+        ) : (
+          <Typography>View as Tabs empty in Quick Tab</Typography>
+        )}
       </Box>
     </Box>
   );