rez-table-listing-mui 0.0.24 → 0.0.26

package/src/components/table-body-dnd-cell.tsx

@@ -17,13 +17,13 @@ interface DragAlongCellProps<T> {
 
 function DragAlongCell<T>({
   cell,
-  featureOptions,
+  // featureOptions,
   tableStates,
 }: DragAlongCellProps<T>) {
   const { isDragging, setNodeRef, transform } = useSortable({
     id: cell.column.id,
   });
-  const { enableWordBreakAll } = featureOptions;
+  // const { enableWordBreakAll } = featureOptions;
   const { wrapColumns } = tableStates;
 
   const isPinned = cell.column.getIsPinned();
@@ -34,7 +34,7 @@ function DragAlongCell<T>({
     transition: "width transform 0.2s ease-in-out",
     width: cell.column.getSize(),
     ...getColumnPinningStylesBody(cell.column),
-    ...(wrapColumns[cell.column.id] && {
+    ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
       wordBreak: "break-all",
       // whiteSpace: "normal",
     }),

package/src/components/table-body.tsx

@@ -64,7 +64,7 @@ function TableBody<T>({
             style: {
               ...getColumnPinningStylesBody(cell.column),
               width: cell.column.getSize(),
-              ...(wrapColumns[cell.column.id] && {
+              ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
                 wordBreak: "break-all",
                 // whiteSpace: "normal",
               }),
@@ -97,11 +97,14 @@ function TableBody<T>({
       return (
         <React.Fragment key={row.id}>
           {renderedRow}
-          <tr>
-            <td colSpan={table.getAllLeafColumns().length}>
+          {NestedComponent && (
+            <tr>
+              {/* <td colSpan={table.getAllLeafColumns().length}>//commented out to remove extra line on opening of 
               {NestedComponent && <NestedComponent {...{ row }} />}
-            </td>
-          </tr>
+            </td> */}
+              {<NestedComponent {...{ row }} />}
+            </tr>
+          )}
         </React.Fragment>
       );
     } else {

package/src/components/table-head-popover.tsx

@@ -39,6 +39,7 @@ function TableHeadPopover<T>({
     setWrapColumns((prev: Record<string, boolean>) => ({
       ...prev,
       [columnId]: !prev[columnId],
+      all_wrap: false,
     }));
   };
 
@@ -84,7 +85,7 @@ function TableHeadPopover<T>({
         <ListItemButton>
           <ListItemText primary="Wrap Cell" />
           <Switch
-            checked={wrapColumns[column.id]}
+            checked={wrapColumns.all_wrap || wrapColumns[column.id]}
             onChange={() => toggleWrapForColumn(column.id)}
           />
         </ListItemButton>

package/src/components/table-head.tsx

@@ -17,7 +17,6 @@ import {
 import DraggableTableHeader from "./table-head-dnd-cell";
 import TableHeadPin from "./table-head-pin";
 import Checkbox from "./inputs/checkbox";
-import TableHeadPopover from "./table-head-popover";
 
 interface TableHeadProps<T> {
   table: Table<T>;
@@ -41,15 +40,6 @@ function TableHead<T>({
 
   // Popover
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const [wrap, setWrap] = useState(false);
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const toggleWrap = () => {
-    setWrap((prev) => !prev);
-  };
 
   const handleHover = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl((prev) => (prev ? null : event.currentTarget));

package/src/components/topbar/index.scss

@@ -62,7 +62,7 @@
       }
 
       .change-layout {
-        margin-top: 1rem;
+        margin-top: 0.99rem;
         cursor: pointer;
       }
 
@@ -126,3 +126,8 @@
     }
   }
 }
+
+.MuiDrawer-root {
+  display: block !important;
+  transform: none !important;
+}

package/src/components/topbar/index.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import {
   ChangeLayoutIcon,
-  SearchIcon,
   SortingIcon,
-  CustomizationIcon,
+  FilterationIcon,
   HideColumnIcon,
 } from "../../assets/svg";
 import { Popover } from "@mui/material";
@@ -18,9 +17,11 @@ import SortPopover from "../sorting-modal.tsx";
 import ColumnToggle from "../column-visibility-modal/index.tsx";
 import { CraftTableOptionsProps } from "../../types/table-options.ts";
 import TableSearch from "../search/index.tsx";
+import FilterDrawer from "../filter/index.tsx";
 
 interface TopbarProps<T> {
   table: Table<T>;
+  isFullscreen: boolean;
   fullscreenToggle: () => void;
   isCompactTable: boolean;
   setIsCompactTable: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,7 +29,7 @@ interface TopbarProps<T> {
   topbarOptions?: TopbarOptionsProps;
   columnOrder?: string[];
   setColumnOrder?: React.Dispatch<React.SetStateAction<string[]>>;
-  tableStates?: CraftTableOptionsProps;
+  tableStates: CraftTableOptionsProps;
   searchValue?: string;
   onSearchChange?: (val: string) => void;
 }
@@ -36,15 +37,14 @@ interface TopbarProps<T> {
 function Topbar<T>({
   table,
   isCompactTable,
+  isFullscreen,
   fullscreenToggle,
   setIsCompactTable,
   paginationComponent,
   topbarOptions,
-  searchValue,
-  onSearchChange,
+  tableStates,
 }: TopbarProps<T>) {
-  const [wrapCell, setWrapCell] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isFullscreenState, setIsFullscreenState] = useState(isFullscreen);
   const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
   const [groupBy, setGroupBy] = useState<string>("None");
 
@@ -60,7 +60,12 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  // console.log("showColumnHiding", showColumnHiding); //only for built purpose-> remove it later
+  //Filter
+  const [showFilterInput, setShowFilterInput] = useState(false);
+
+  // search
+  const [showSearchInput, setShowSearchInput] = useState(false);
+  const searchContainerRef = useRef<HTMLDivElement>(null);
 
   // sync column order with table instance
   useEffect(() => {
@@ -73,9 +78,22 @@ function Topbar<T>({
     showColumnToggle,
     showChangeLayoutToggle,
     viewMoreToggle,
+    showSortingToggle,
+    showFilterToggle,
     showSearch,
-    showFilter,
-    showCustomizationToggle,
+    searchValue,
+    onSearchChange,
+    filterOptions = {
+      columnsData: {
+        column_list: [],
+        operation_list: {},
+        saved_filter: [],
+      },
+      onDeleteFilter: () => {},
+      onSaveFilter: () => {},
+      dropdownData: [],
+      onUpdateFilter: () => {},
+    },
   } = topbarOptions ?? {};
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -95,15 +113,15 @@ function Topbar<T>({
     setLayoutAnchorEl(null);
   };
 
-  // search
-  const [showSearchInput, setShowSearchInput] = useState(false);
-  const searchContainerRef = useRef<HTMLDivElement>(null);
-
   useOutsideClick({
     ref: searchContainerRef,
     handler: () => setShowSearchInput(false),
   });
 
+  const handleFilterDrawer = () => {
+    setShowFilterInput((prev) => !prev);
+  };
+
   return (
     <div className="ts-topbar">
       <div className="tabs-section">{leftSideComponent}</div>
@@ -112,18 +130,13 @@ function Topbar<T>({
         {rightSideComponent}
         {paginationComponent}
 
-        {/* {showSearch && (
-          <div className="search ts--button" title="Search">
-            <SearchIcon />
-
-          </div>
-        )} */}
-
         {showSearch && (
-          <TableSearch
-            value={searchValue ?? ""}
-            onChange={onSearchChange ?? (() => {})}
-          />
+          <div title="Search">
+            <TableSearch
+              value={searchValue ?? ""}
+              onChange={onSearchChange ?? (() => {})}
+            />
+          </div>
         )}
 
         {showChangeLayoutToggle && (
@@ -176,7 +189,7 @@ function Topbar<T>({
           </>
         )}
 
-        {showFilter && (
+        {showSortingToggle && (
           <>
             <div
               className="filter ts--button"
@@ -197,28 +210,41 @@ function Topbar<T>({
           </>
         )}
 
-        {showCustomizationToggle && (
-          <div className="customization ts--button" title="Filter">
-            <CustomizationIcon />
+        {showFilterToggle && (
+          <div
+            className="filter ts--button"
+            title="Filter"
+            onClick={() => setShowFilterInput(true)}
+          >
+            <FilterationIcon />
+            <FilterDrawer
+              tableStates={tableStates}
+              open={showFilterInput}
+              onClose={handleFilterDrawer}
+              onDeleteFilter={filterOptions?.onDeleteFilter}
+              columnsData={filterOptions.columnsData} // @ts-ignore
+              onSaveFilter={filterOptions?.onSaveFilter}
+              dropdownData={filterOptions.dropdownData}
+              onUpdateFilter={filterOptions?.onUpdateFilter}
+            />
           </div>
         )}
 
         {viewMoreToggle && (
           <div className="view-more ts--button" title="View More">
             <ViewMore
-              wrapCell={wrapCell}
-              onWrapCellToggle={() => setWrapCell((prev) => !prev)}
               compactMode={isCompactTable}
               onCompactToggle={(value: string) =>
                 setIsCompactTable(value === "Compact")
               }
-              isFullscreen={isFullscreen}
+              isFullscreen={isFullscreenState}
               onFullscreenToggle={() => {
                 fullscreenToggle();
-                setIsFullscreen((prev) => !prev);
+                setIsFullscreenState((prev) => !prev);
               }}
               groupBy={groupBy}
               onGroupByChange={(value: string) => setGroupBy(value)}
+              tableStates={tableStates}
             />
           </div>
         )}

package/src/components/viewmore/index.tsx

@@ -10,28 +10,26 @@ import {
 } from "@mui/material";
 import { CloseIcon, ViewMoreIcon } from "../../assets/svg";
 import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
+import { CraftTableOptionsProps } from "../../types/table-options";
 
 interface ViewMorePopoverProps {
-  wrapCell: boolean;
-  onWrapCellToggle: () => void;
   compactMode: boolean;
   onCompactToggle: (value: string) => void;
   isFullscreen: boolean;
   onFullscreenToggle: () => void;
   groupBy: string;
   onGroupByChange: (value: string) => void;
-  // tableStates: CraftTableOptionsProps;
+  tableStates: CraftTableOptionsProps;
 }
 
 const ViewMore = ({
-  wrapCell,
-  onWrapCellToggle,
   compactMode,
   onCompactToggle,
   isFullscreen,
   onFullscreenToggle,
-  groupBy,
-  onGroupByChange,
+  // groupBy,
+  // onGroupByChange,
+  tableStates,
 }: ViewMorePopoverProps) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
@@ -46,16 +44,13 @@ const ViewMore = ({
     setAnchorEl(null);
   };
 
-  // const { wrapColumns, globalWrapColumns, setGlobalWrapColumns } = tableStates;
+  const { wrapColumns, setWrapColumns } = tableStates;
 
-  // const toggleGlobalWrap = (value: boolean | null) => {
-  //   setGlobalWrapColumns(value); // true = wrap all, false = un-wrap all, null = use wrapState
-  // };
-
-  // const isWrapped =
-  //   globalWrapColumns !== null
-  //     ? globalWrapColumns
-  //     : !!wrapColumns[cell.column.id];
+  const onWrapCellToggle = () => {
+    setWrapColumns((prev: Record<string, boolean>) => ({
+      all_wrap: !prev["all_wrap"],
+    }));
+  };
 
   return (
     <>
@@ -112,7 +107,10 @@ const ViewMore = ({
           <Typography fontSize="14px" fontWeight={400} color="#000000DE">
             Wrap Cell
           </Typography>
-          <MUISwitch checked={wrapCell} onChange={onWrapCellToggle} />
+          <MUISwitch
+            checked={wrapColumns?.all_wrap || false}
+            onChange={onWrapCellToggle}
+          />
         </Box>
 
         {/* List View */}
@@ -135,6 +133,15 @@ const ViewMore = ({
               color: "#000",
               fontSize: "13px",
             }}
+            MenuProps={{
+              container: fullscreenContainer,
+              disablePortal: false,
+              PaperProps: {
+                style: {
+                  zIndex: 1500,
+                },
+              },
+            }}
           >
             <MenuItem value="Comfy">Comfy</MenuItem>
             <MenuItem value="Compact">Compact</MenuItem>
@@ -161,6 +168,15 @@ const ViewMore = ({
               color: "#000",
               fontSize: "13px",
             }}
+            MenuProps={{
+              container: fullscreenContainer,
+              disablePortal: false,
+              PaperProps: {
+                style: {
+                  zIndex: 1500,
+                },
+              },
+            }}
           >
             <MenuItem value="None">None</MenuItem>
             <MenuItem value="Status">Status</MenuItem>

package/src/libs/hooks/useCraftTable.tsx

@@ -6,6 +6,11 @@ import {
 } from "@tanstack/react-table";
 import { useState } from "react";
 import { CraftTableOptionsProps } from "../../types/table-options";
+import {
+  FilterMasterStateProps,
+  FilterOperationListProps,
+  FilterStateProps,
+} from "../../types/filter";
 
 export function useCraftTable(paginationPageSize: number = 25) {
   const [pagination, setPagination] = useState<PaginationState>({
@@ -15,10 +20,23 @@ export function useCraftTable(paginationPageSize: number = 25) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [expanded, setExpanded] = useState<ExpandedState>({});
-  const [wrapColumns, setWrapColumns] = useState<Record<string, boolean>>({});
-  const [globalWrapColumns, setGlobalWrapColumns] = useState<boolean | null>(
-    null
-  );
+  const [wrapColumns, setWrapColumns] = useState<Record<string, boolean>>({
+    all_wrap: true,
+  });
+
+  // Filters to be rendered in form
+  const [filters, setFilters] = useState<FilterStateProps[]>([]);
+  // Saved filter Component - savedFilterEditValue is set on list click
+  const [savedFilterEditValue, setSavedFilterEditValue] = useState<
+    string | number
+  >("");
+  const [filterToDelete, setFilterToDelete] =
+    useState<FilterOperationListProps | null>(null);
+  const [filterSelectedAttributeValue, setFilterSelectedAttributeValue] =
+    useState<string>("");
+
+  const [filterMaster, setFilterMaster] =
+    useState<FilterMasterStateProps | null>(null);
 
   if (pagination.pageIndex < 0 || pagination.pageSize <= 0) {
     throw new Error(
@@ -37,8 +55,16 @@ export function useCraftTable(paginationPageSize: number = 25) {
     setExpanded: setExpanded,
     wrapColumns: wrapColumns,
     setWrapColumns: setWrapColumns,
-    globalWrapColumns: globalWrapColumns,
-    setGlobalWrapColumns: setGlobalWrapColumns,
+    filters: filters,
+    setFilters: setFilters,
+    savedFilterEditValue: savedFilterEditValue,
+    setSavedFilterEditValue: setSavedFilterEditValue,
+    filterToDelete: filterToDelete,
+    setFilterToDelete: setFilterToDelete,
+    filterSelectedAttributeValue: filterSelectedAttributeValue,
+    setFilterSelectedAttributeValue: setFilterSelectedAttributeValue,
+    filterMaster: filterMaster,
+    setFilterMaster: setFilterMaster,
   };
 
   return craftTableOptions;

package/src/libs/hooks/useDefaultColumns.tsx

@@ -11,7 +11,7 @@ export const useDefaultColumns = () => {
         header: "First Name",
         id: "firstName",
         accessorKey: "firstName",
-        // meta: { label: "First Name" },
+        meta: { label: "First Name" },
         // header: ({ table }) => (
         //   <>
         //     <button
@@ -26,11 +26,12 @@ export const useDefaultColumns = () => {
         // ),
         cell: ({ row, getValue }) => {
           return (
-            <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+            <div
+              style={{ paddingLeft: `${row.depth * 2}rem`, display: "flex" }}
+            >
               {row.getCanExpand() ? (
                 <button
                   style={{
-                    // marginRight: "0.8rem",
                     cursor: "pointer",
                     background: "none",
                     border: "none",
@@ -48,7 +49,7 @@ export const useDefaultColumns = () => {
               ) : (
                 <span style={{ marginRight: "0.8rem" }}></span>
               )}
-              {getValue<boolean>()}
+              <span style={{ marginTop: "0.2rem" }}>{getValue<boolean>()}</span>
             </div>
           );
         },
@@ -57,7 +58,7 @@ export const useDefaultColumns = () => {
         header: "Last Name",
         accessorKey: "lastName",
         size: 100,
-        meta: { wrap: true },
+        meta: { label: "Last Name" },
       },
       {
         header: "Email Id",

package/src/libs/hooks/useEntityTableAPI.tsx

@@ -0,0 +1,183 @@
+import {
+  useMutation,
+  useQueries,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { api, ENTITY_TYPE } from "../utils/common";
+import {
+  APIParamsProps,
+  EntityListingResponse,
+  EntityTableAPIProps,
+} from "../../types/common";
+import {
+  commonGetDropdownDataAPI,
+  createSavedFilter,
+  deleteSavedFilter,
+  updateSavedFilter,
+} from "../utils/apiColumn";
+import { FilterColumnsDataProps } from "../../types/filter";
+
+const entityListingCall = async ({
+  page,
+  size,
+  entity_type = ENTITY_TYPE,
+  tabs = {
+    columnName: "status",
+    sortBy: "ASC",
+    value: "",
+  },
+  sortby = [
+    {
+      sortColum: "name",
+      sortType: "ASC",
+    },
+    {
+      sortColum: "status",
+      sortType: "DSC",
+    },
+  ],
+  quickFilter = [],
+  attributeFilter = [],
+}: EntityTableAPIProps): Promise<{
+  responseStatus: number;
+  data: EntityListingResponse;
+}> => {
+  const url = `filter`;
+
+  const body = {
+    entity_type,
+    tabs,
+    sortby,
+    quickFilter,
+    attributeFilter,
+  };
+
+  const params: APIParamsProps = {
+    page,
+    size,
+  };
+
+  const response = await api.post(url, body, { params });
+
+  return { responseStatus: response.status, data: response.data };
+};
+
+export const useEntityTableAPI = ({
+  page = 0,
+  size = 50,
+  quickFilter,
+}: EntityTableAPIProps) => {
+  const { data, isPending: isTableDataPending } = useQuery({
+    queryKey: [page, size, quickFilter],
+    queryFn: () =>
+      entityListingCall({
+        page,
+        size,
+        quickFilter,
+      }),
+  });
+
+  return {
+    tableData: data?.data.data,
+    status: data?.responseStatus,
+    isTableDataPending,
+  };
+};
+
+//for saved filter API
+export const useSavedFilterAPI = () => {
+  const queryClient = useQueryClient();
+  const savedMutation = useMutation({
+    mutationKey: ["savedFilter"],
+    mutationFn: ({
+      entity_type,
+      payload,
+    }: {
+      entity_type: string;
+      payload: any;
+    }) => {
+      return createSavedFilter(entity_type, payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["meta"] });
+    },
+  });
+
+  return { savedMutation };
+};
+
+//for delete filter API
+export const useDeleteFilterAPI = () => {
+  const queryClient = useQueryClient();
+  const deleteMutation = useMutation({
+    mutationKey: ["deleteFilter"],
+    mutationFn: ({
+      entity_type,
+      payload,
+    }: {
+      entity_type: string;
+      payload: any;
+    }) => {
+      return deleteSavedFilter(entity_type, payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["meta"] });
+    },
+  });
+
+  return { deleteMutation };
+};
+
+// for updating saved filter API
+export const useUpdateFilterAPI = () => {
+  const queryClient = useQueryClient();
+
+  const updateMutation = useMutation({
+    mutationKey: ["updateFilter"],
+    mutationFn: ({
+      entity_type,
+      payload,
+    }: {
+      entity_type: string;
+      payload: any;
+    }) => {
+      return updateSavedFilter(entity_type, payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["meta"] });
+    },
+  });
+
+  return { updateMutation };
+};
+
+export const useCommonDropdownAPI = (
+  metaData?: FilterColumnsDataProps,
+  value?: string
+) => {
+  // Step 1: Extract all keys and query types
+  const dropdownConfigs = (metaData?.column_list || [])
+    .filter((col) => col?.datasource_list)
+    .map((col) => ({
+      key: col.attribute_key,
+      dataSourceType: value ?? col.datasource_list ?? "STS",
+    }));
+
+  // Step 2: Use useQueries to fetch them all in parallel
+  const dropdownResults = useQueries({
+    queries: dropdownConfigs.map((cfg) => ({
+      queryKey: ["commonDropdown", cfg.dataSourceType],
+      queryFn: () => commonGetDropdownDataAPI(cfg.dataSourceType, null),
+      enabled: !!cfg.dataSourceType,
+    })),
+  });
+
+  // Step 3: Map results to keys
+  const dropdownData: Record<string, any> = {};
+  dropdownConfigs.forEach((cfg, idx) => {
+    dropdownData[cfg.key] = dropdownResults[idx].data;
+  });
+
+  return { dropdownData };
+};