rez-table-listing-mui 1.3.62 → 2.0.0

package/src/listing/components/{table-head.tsx → table-head/table-head.tsx}

@@ -3,17 +3,25 @@ import {
   CraftTableFeatureProps,
   craftTableFilterSettingsOptionsProps,
   CraftTableOptionsProps,
-} from "../types/table-options";
-import { DownArrow, UpArrow } from "../../assets/svg";
-import { CSSProperties, useState } from "react";
-import { getColumnPinningStyles } from "../libs/utils/common";
+} from "../../types/table-options";
+import { DownArrow, UpArrow } from "../../../assets/svg";
+import { useState } from "react";
+import { getColumnPinningStyles } from "../../libs/utils/common";
 import {
   horizontalListSortingStrategy,
   SortableContext,
 } from "@dnd-kit/sortable";
 import DraggableTableHeader from "./table-head-dnd-cell";
 import TableHeadPin from "./table-head-pin";
-import Checkbox from "./inputs/checkbox";
+import Checkbox from "../inputs/checkbox";
+import TableColumnResizeHandle from "./table-head-resizer";
+import {
+  TableHeadCell,
+  TableHeadContent,
+  TableHeadRoot,
+  TableHeadRow,
+  TableHeadSort,
+} from "./table-head.styles";
 
 interface TableHeadProps<T> {
   table: Table<T>;
@@ -49,54 +57,26 @@ function TableHead<T>({
   };
 
   return (
-    <thead className={`ts__head ${stickyHeader ? "ts--sticky" : ""}`.trim()}>
+    <TableHeadRoot sticky={stickyHeader}>
       {table.getHeaderGroups().map((headerGroup) => (
-        <tr className="ts__head__tr" key={headerGroup?.id}>
+        <TableHeadRow striped={featureOptions.striped} key={headerGroup?.id}>
           {enableRowSelection && (
-            <th
-              className="ts__head__th ts__head__checkbox"
-              style={{
-                position: "sticky",
-                left: 0,
-                width: "50px",
-              }}
+            <TableHeadCell
+              sticky
+              compact={featureOptions.compactTable}
+              style={{ width: 50 }}
             >
-              <div className="ts__content">
+              <TableHeadContent>
                 <Checkbox
                   checked={table.getIsAllRowsSelected()}
                   indeterminate={table.getIsSomeRowsSelected()}
                   onChange={() => table.toggleAllRowsSelected()}
                 />
-              </div>
-            </th>
+              </TableHeadContent>
+            </TableHeadCell>
           )}
 
           {headerGroup.headers.map((header) => {
-            let sortProps: {
-              className: string;
-              title?: string;
-              style?: CSSProperties;
-            } = {
-              className: "ts__content",
-              // style: {
-              //   justifyContent: getColumnAlignment(
-              //     (header?.column?.columnDef?.meta as align)?.align
-              //   ),
-              // },
-            };
-
-            // if (header.column.getCanSort()) {
-            //   sortProps = {
-            //     ...sortProps,
-            //     title:
-            //       header.column.getNextSortingOrder() === "asc"
-            //         ? "Sort ascending"
-            //         : header.column.getNextSortingOrder() === "desc"
-            //         ? "Sort descending"
-            //         : "Clear sort",
-            //   };
-            // }
-
             return enableColumnReordering ? (
               <SortableContext
                 key={header?.id}
@@ -113,36 +93,30 @@ function TableHead<T>({
                 />
               </SortableContext>
             ) : (
-              <th
+              <TableHeadCell
                 key={header?.id}
-                className="ts__head__th"
                 colSpan={header.colSpan}
+                compact={featureOptions.compactTable}
+                onClick={handleHover}
                 style={{
                   ...getColumnPinningStyles(header.column),
                   width: `${header.column.getSize()}px`,
                   minWidth: `${header.column.columnDef.minSize}px`,
                   maxWidth: `${header.column.columnDef.maxSize}px`,
                 }}
-                onClick={handleHover}
               >
                 {header.isPlaceholder ? null : (
-                  <div {...sortProps}>
-                    <div
-                      className={`${
-                        header.column.getCanSort() ? "ts__content__sort" : ""
-                      }`.trim()}
-                      // onClick={header.column.getToggleSortingHandler()}
-                    >
+                  <TableHeadContent>
+                    <TableHeadSort sortable={header.column.getCanSort()}>
                       {flexRender(
                         header.column.columnDef.header,
                         header.getContext()
                       )}
 
-                      {{
-                        asc: <UpArrow />,
-                        desc: <DownArrow />,
-                      }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
-                    </div>
+                      {{ asc: <UpArrow />, desc: <DownArrow /> }[
+                        header.column.getIsSorted() as "asc" | "desc"
+                      ] ?? null}
+                    </TableHeadSort>
 
                     {enableColumnPinning && (
                       <TableHeadPin
@@ -151,19 +125,12 @@ function TableHead<T>({
                         tableStates={tableStates}
                       />
                     )}
-                  </div>
+                  </TableHeadContent>
                 )}
 
                 {/* column resizing */}
                 {header.column.getCanResize() ? (
-                  <div
-                    onDoubleClick={() => header.column.resetSize()}
-                    onMouseDown={header.getResizeHandler()}
-                    onTouchStart={header.getResizeHandler()}
-                    className={`column__resize ${
-                      header.column.getIsResizing() ? "is__resizing" : ""
-                    }`}
-                  />
+                  <TableColumnResizeHandle header={header} />
                 ) : null}
 
                 {/* Popover */}
@@ -174,12 +141,12 @@ function TableHead<T>({
                   wrap={wrap}
                   tableStates={tableStates}
                 /> */}
-              </th>
+              </TableHeadCell>
             );
           })}
-        </tr>
+        </TableHeadRow>
       ))}
-    </thead>
+    </TableHeadRoot>
   );
 }
 

package/src/listing/components/table.tsx

@@ -1,7 +1,7 @@
 import { formatClassName } from "../libs/utils/common";
 import { CraftTableComponentProps } from "../types/table";
-import TableBody from "./table-body";
-import TableHead from "./table-head";
+import TableBody from "./table-body/table-body";
+import TableHead from "./table-head/table-head";
 
 function Table<T>({
   table,

package/src/listing/components/tabs/index.tsx

@@ -1,31 +1,28 @@
-import "./index.scss";
-import { Box, CircularProgress, IconButton, Tab, Tabs } from "@mui/material";
+import { Box, CircularProgress, IconButton } from "@mui/material";
 import { CraftTableOptionsProps } from "../../types/table-options";
-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";
+import { TableTab, TableTabCount, TableTabsRoot } from "./tabs.styles";
+import { SettingsOutlined } from "@mui/icons-material";
 
 interface TabDataProps {
   tab_name: string | null;
-  count: string | number;
+  count?: string | number;
 }
 
 interface TableTabsProps {
   loading?: boolean;
   tabsData?: TabDataProps[];
-  activeTab?: any;
+  activeTab?: TabDataProps;
   tableStates: CraftTableOptionsProps;
   onClick: (state: string) => void;
-  columns?: any[];
   settingsOptions?: settingsOptionsProps;
 }
 
 export function TableTabs({
   loading = false,
   tabsData = [],
-  activeTab = "All",
+  activeTab = { tab_name: "All", count: 0 },
   onClick,
   tableStates,
   settingsOptions,
@@ -34,10 +31,12 @@ export function TableTabs({
 
   const handleTabClick = (tab: string) => {
     onClick(tab);
-    tableStates.setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    tableStates.setPagination((prev) => ({
+      ...prev,
+      pageIndex: 0,
+    }));
   };
 
-  // Normalize tab_name to uppercase for display + logic
   const normalizedTabs = useMemo(() => {
     return tabsData
       ?.filter((tab) => tab.tab_name !== null)
@@ -55,64 +54,47 @@ export function TableTabs({
     );
   }, [normalizedTabs]);
 
-  const selectedTab = activeTab || defaultTab;
+  const selectedTab = activeTab?.tab_name || defaultTab;
 
   return (
     <Box display="flex" alignItems="center" justifyContent="flex-start">
-      {/* Layout settings icon */}
+      {/* Settings icon */}
       {settingsOptions?.showIcon && (
-        <IconButton
-          onClick={settingsOptions?.onClick}
-          sx={{ zIndex: 1000, mx: 0 }}
-        >
-          <SettingIcon />
+        <IconButton size="small" onClick={settingsOptions?.onClick}>
+          <SettingsOutlined fontSize="small" />
         </IconButton>
       )}
 
       {/* Tabs */}
-      <Tabs
+      <TableTabsRoot
         value={selectedTab}
-        onChange={(_, newValue) => {
-          handleTabClick(newValue);
-        }}
+        onChange={(_, newValue) => handleTabClick(newValue)}
         variant="scrollable"
         scrollButtons="auto"
-        slotProps={{ indicator: { sx: { display: "none" } } }}
-        sx={tableTabsStyles.tabs}
       >
         {normalizedTabs.map((tab) => {
           const isSelected = activeTab?.tab_name === tab?.tab_name;
 
           return (
-            <Tab
+            <TableTab
               key={tab?.tab_name}
               value={tab}
               label={
                 <Box display="flex" alignItems="center" gap={1}>
-                  <Box>{tab?.tab_name}</Box>
-                  <Box
-                    sx={{
-                      ...tableTabsStyles.tabCount,
-                      ...(isSelected && {
-                        // backgroundColor: "#ced3da",
-                        // borderColor: "#ced3da",
-                        backgroundColor: "#000",
-                        color: "#fff",
-                        fontWeight: "500",
-                      }),
-                    }}
-                  >
+                  <Box sx={{ color: isSelected ? "#000" : "" }}>
+                    {tab?.tab_name}
+                  </Box>
+                  <TableTabCount selected={isSelected}>
                     {tab?.count == 0
                       ? "0"
                       : String(tab?.count).padStart(2, "0")}
-                  </Box>
+                  </TableTabCount>
                 </Box>
               }
-              sx={tableTabsStyles.tab}
             />
           );
         })}
-      </Tabs>
+      </TableTabsRoot>
     </Box>
   );
 }

package/src/listing/components/tabs/tabs.styles.ts

@@ -0,0 +1,49 @@
+// tableTabs.styles.ts
+import { styled } from "@mui/material/styles";
+import Tabs, { tabsClasses } from "@mui/material/Tabs";
+import Tab, { tabClasses } from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+
+export const TableTabsRoot = styled(Tabs)(({ theme }) => ({
+  minHeight: theme.spacing(3.5),
+
+  [`& .${tabsClasses.flexContainer}`]: {
+    minHeight: theme.spacing(3.5),
+  },
+
+  // hide indicator (instead of slotProps every time)
+  [`& .${tabsClasses.indicator}`]: {
+    display: "none",
+  },
+}));
+
+export const TableTab = styled(Tab)(({ theme }) => ({
+  color: theme.palette.grey[600],
+  padding: theme.spacing(1, 1.5),
+  minHeight: theme.spacing(3.5),
+  maxHeight: theme.spacing(3.5),
+  textTransform: "none",
+  minWidth: "unset",
+  whiteSpace: "nowrap",
+
+  [`&.${tabClasses.selected}`]: {
+    color: theme.palette.text.primary,
+    fontWeight: 700,
+  },
+}));
+
+export const TableTabCount = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<{ selected?: boolean }>(({ theme, selected }) => ({
+  padding: theme.spacing(0.25),
+  borderRadius: theme.shape.borderRadius,
+  border: `1px solid ${
+    selected ? theme.palette.text.primary : theme.palette.grey[700]
+  }`,
+  color: selected ? theme.palette.common.white : theme.palette.text.primary,
+  backgroundColor: selected ? theme.palette.text.primary : "transparent",
+  fontWeight: selected ? 500 : 400,
+  lineHeight: 1,
+  minWidth: 20,
+  textAlign: "center",
+}));

package/src/listing/libs/hooks/useEntityTableHooks.ts

@@ -14,11 +14,11 @@ export const useDetailsQueryAPI = (value: string | undefined) => {
   return { detailsQuery };
 };
 
-export const useFetchData = (entity_type: string) => {
+export const useFetchData = (entity_type: string, payload?: any) => {
   // First query to get meta data
   const metaQuery = useQuery({
-    queryKey: ["meta", entity_type],
-    queryFn: () => entityTableFilterMaster(entity_type),
+    queryKey: ["meta", entity_type, payload],
+    queryFn: () => entityTableFilterMaster(entity_type, payload),
   });
 
   return { metaQuery };

package/src/listing/libs/utils/apiColumn.ts

@@ -27,10 +27,14 @@ export const entityTableMetaMaster = async (entity_type: string) => {
   }
 };
 
-export const entityTableFilterMaster = async (entity_type: string) => {
+export const entityTableFilterMaster = async (
+  entity_type: string,
+  payload?: any
+) => {
   try {
     const response = await api.post(
-      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`
+      `/meta/get-table-data?entity_type=${entity_type}&list_type=${entity_type}`,
+      payload
     );
 
     // const filteredData = {
@@ -215,6 +219,6 @@ export const getAttributes = async (entity_type: string) => {
 };
 
 export const getTableTabs = async (payload: any) => {
-  const response = await api.post(`filter/get-tabs-data`, payload);
+  const response = await api.post(`filter/adm/tabs`, payload);
   return response.data;
 };

package/src/listing/libs/utils/common.ts

@@ -111,3 +111,47 @@ api.interceptors.request.use(
     return Promise.reject(error);
   }
 );
+
+export const formatTableHeaders = (columns: any) => {
+  const mapped = columns.map((col: any) => {
+    const meta =
+      col.attribute_key === "status" ||
+      col.attribute_key === "lead_status" ||
+      col.attribute_key === "flag" ||
+      col.attribute_key === "invitation_status"
+        ? { type: "custom", propName: "renderStatus", align: col.align }
+        : col.attribute_key === "profile_image" ||
+          col.attribute_key === "short_logo"
+        ? {
+            type: "custom",
+            propName: "profileImageFetch",
+            align: col.align,
+          }
+        : col.attribute_key === "start_date" || col.attribute_key === "end_date"
+        ? { type: "custom", propName: "dateFormater", align: col.align }
+        : col.attribute_key === "action"
+        ? { type: "custom", propName: "renderAction", align: col.align }
+        : col.attribute_key === "code"
+        ? {
+            type: "custom",
+            propName: "drillCellRenderer",
+            align: col.align,
+          }
+        : col.attribute_key === "primary_mobile"
+        ? {
+            type: "custom",
+            propName: "apiCallonClick",
+            align: col.align,
+          }
+        : undefined;
+
+    return {
+      header: col.name ?? "",
+      accessorKey: col.attribute_key ?? "",
+      size: col.size,
+      meta,
+    };
+  });
+
+  return mapped;
+};

package/src/listing/types/table.ts

@@ -95,7 +95,7 @@ export interface CraftTableProps<T> {
   filterOptions?: FilterOptionsProps;
   settingsOptions?: settingsOptionsProps;
   craftTableFilterSettingsOptions?: craftTableFilterSettingsOptionsProps;
-  activeTab?: string;
+  activeTab?: any;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;
@@ -115,6 +115,6 @@ export interface TableHeaderProps<T> {
   activeTab?: string;
   featureOptions: CraftTableFeatureProps;
   tableStates: CraftTableOptionsProps;
-  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  filterSettingStates?: craftTableFilterSettingsOptionsProps;
   onSaveSettings?: (columnId: string) => void;
 }

package/src/view/ListingView.tsx

@@ -6,7 +6,11 @@ import {
   useDetailsQueryAPI,
   useFetchData,
 } from "../listing/libs/hooks/useEntityTableHooks";
-import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../listing/libs/utils/common";
+import {
+  ENTITY_TYPE,
+  formatTableHeaders,
+  MAPPED_ENTITY_TYPE,
+} from "../listing/libs/utils/common";
 import {
   useCommonFilterDropdownAPI,
   useEntityTableAPI,
@@ -54,8 +58,30 @@ function ListingView() {
     filterSettingStates;
 
   const { defaultColumns } = useDefaultColumns();
+  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
+  const tabsPaylod = {
+    entity_type: ENTITY_TYPE,
+    defaultTabsConfig: {
+      attribute: "status",
+    },
+  };
 
-  const { metaQuery } = useFetchData(ENTITY_TYPE);
+  const { tableTabs } = useGetTableTabs(tabsPaylod);
+  const tabsData = tableTabs;
+
+  const { metaQuery } = useFetchData(ENTITY_TYPE, {
+    tabs: {
+      columnName:
+        getSettingsAPIData?.mapped_json?.quick_tab?.attribute || "status",
+      sortBy: getSettingsAPIData?.mapped_json?.quick_tab?.sorting || "ASC",
+      value:
+        selectedTab?.tab_name?.toLowerCase() === "all"
+          ? tabsData?.find((tab: any) => tab?.tab_name?.toLowerCase() === "all")
+              ?.tab_value
+          : selectedTab?.tab_value,
+      name: selectedTab?.tab_name,
+    },
+  });
 
   const { detailsQuery } = useDetailsQueryAPI(
     filterMaster?.saved_filters?.selectedId
@@ -86,93 +112,14 @@ function ListingView() {
       column: filterSettingStates?.quickTabStates?.attribute,
       sort_by: filterSettingStates?.quickTabStates?.sorting,
     });
-  const tabsPaylod = {
-    entity_type: ENTITY_TYPE,
-    defaultTabsConfig: {
-      attribute: "status",
-    },
-  };
-
-  const { tableTabs } = useGetTableTabs(tabsPaylod);
 
   const queryClient = useQueryClient();
-  const { data: getSettingsAPIData } = useGetNavigationLayoutAPI(ENTITY_TYPE);
 
   const fetchMeta = async () => {
-    try {
-      const { res: allColumns } = await entityTableMetaMaster(ENTITY_TYPE);
-
-      const savedColumnSettings = filterSettingStates.settingsData?.column;
-
-      const getOrderedColumns = (
-        showList: { value: string }[],
-        filteredColumns: any[]
-      ) => {
-        // Build ordered columns using showList and filteredColumns
-        // const orderedColumns = showList
-        //   ?.map((showItem) => {
-        //     return filteredColumns.find(
-        //       (col) => col?.accessorKey === showItem?.value
-        //     );
-        //   })
-        //   ?.filter((col): col is ColumnDef<any> => col !== undefined); // Ensure non-undefined columns are returned
-
-        // didnt know what above code was doing so rewrote it as below
-        // const res = showList.map((item: any) => ({
-        //   id: item.value,
-        //   accessorKey: item.value,
-        //   header: item.label,
-        // }));
-
-        // return res;
-        return allColumns;
-      };
+    const res = formatTableHeaders(metaQuery?.data?.column_list || []);
+    console.log("res", res);
 
-      setColumns(allColumns);
-
-      // if (
-      //   savedColumnSettings &&
-      //   !savedColumnSettings.isDefault &&
-      //   savedColumnSettings.tabs
-      // ) {
-      //   // Tab-wise view: find the active tab and use its show_list
-      //   const activeTabSettings = savedColumnSettings.tabs.find(
-      //     (tab) => tab.tab_name?.value == selectedTab.toLowerCase()
-      //   );
-
-      //   if (activeTabSettings?.show_list) {
-      //     const visibleColumns = new Set(
-      //       activeTabSettings.show_list.map((c) => c.value)
-      //     );
-
-      //     // First, filter columns based on visibleColumns
-      //     const filteredColumns = allColumns.filter((col: any) =>
-      //       visibleColumns.has(col?.accessorKey)
-      //     );
-      //     setColumns(
-      //       getOrderedColumns(activeTabSettings.show_list, filteredColumns)
-      //     );
-      //   } else {
-      //     // Fallback if no specific settings for the active tab are found
-      //     setColumns(allColumns);
-      //   }
-      // } else if (savedColumnSettings && savedColumnSettings.show_list) {
-      //   // Default view: use the main show_list
-      //   const visibleColumns = new Set(
-      //     savedColumnSettings.show_list.map((c) => c.value)
-      //   );
-      //   const filtered = allColumns.filter((col: any) =>
-      //     visibleColumns.has(col?.accessorKey)
-      //   );
-
-      //   setColumns(getOrderedColumns(savedColumnSettings.show_list, filtered));
-      // } else {
-      //   // No settings found, use all columns
-      //   setColumns(allColumns);
-      // }
-    } catch (error) {
-      console.error("Failed to fetch metadata:", error);
-    }
+    setColumns(res);
   };
 
   useEffect(() => {
@@ -208,7 +155,6 @@ function ListingView() {
 
   //For server side sorting
   const enableServerSideSorting = true;
-  const tabsData = tableTabs?.data;
 
   const { tableData, isTableDataPending } = useEntityTableAPI({
     page: 0,
@@ -400,8 +346,8 @@ function ListingView() {
       mapped_json: data,
       type: "filter",
     };
-
     await saveLayoutAPI(payload);
+    queryClient.invalidateQueries({ queryKey: ["tableTabs"] });
   };
 
   const handleSaveSettingsData = (settingsData: SettingsDataProps) => {
@@ -534,7 +480,6 @@ function ListingView() {
         leftSideComponent: (
           <>
             <TableTabs
-              columns={columns}
               settingsOptions={{
                 showIcon: true,
                 onClick: () => setShowListViewSettings(!showListViewSettings),
@@ -573,9 +518,15 @@ function ListingView() {
         ),
         searchValue: searchTerm,
         onSearchChange: (val) => setSearchTerm(val),
-        showFilterToggle: true,
+        showFilterToggle: false,
         onFilterButtonClick: () =>
           tableStates.setShowTableFilter(!tableStates.showTableFilter),
+        showColumnToggle: false,
+        showSearch: false,
+        showChangeLayoutToggle: false,
+        showSortingToggle: false,
+        // viewMoreToggle: true,
+        // showCompactTableToggle: false,
       }}
     />
   );