rez-table-listing-mui 0.0.23 → 0.0.25

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",
               }),
@@ -98,9 +98,10 @@ function TableBody<T>({
         <React.Fragment key={row.id}>
           {renderedRow}
           <tr>
-            <td colSpan={table.getAllLeafColumns().length}>
+            {/* <td colSpan={table.getAllLeafColumns().length}>//commented out to remove extra line on opening of nested row
               {NestedComponent && <NestedComponent {...{ row }} />}
-            </td>
+            </td> */}
+            {NestedComponent && <NestedComponent {...{ row }} />}
           </tr>
         </React.Fragment>
       );

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/tabs/index.tsx

@@ -1,73 +1,31 @@
-import { useEffect, useMemo, useState } from "react";
 import "./index.scss";
 import { formatClassName } from "../../libs/utils/common";
-import {
-  Popover,
-  Box,
-  Typography,
-  List,
-  ListItemButton,
-  ListItemText,
-  CircularProgress,
-} from "@mui/material";
-import { useCraftTable } from "../../libs/hooks/useCraftTable";
+import { CircularProgress } from "@mui/material";
+import { CraftTableOptionsProps } from "../../types/table-options";
 
-interface TabStat {
-  tab_value: string;
-  tab_value_count: number | string;
+interface TabDataProps {
+  tab_value: string | null;
+  tab_value_count: string | number;
 }
 
-interface TableTabsProps<T> {
-  data: T[];
-  state: string;
-  statusKey: string;
-  onClick: (state: string) => void;
-  tabStats?: TabStat[];
+interface TableTabsProps {
   loading?: boolean;
+  tabsData: TabDataProps[] | undefined;
+  activeTab?: string;
+  tableStates: CraftTableOptionsProps;
+  onClick: (state: string) => void;
 }
 
-export function TableTabs<T>({
-  data = [],
-  state = "ALL",
-  statusKey,
+export function TableTabs({
+  loading = false,
+  tabsData = [],
+  activeTab = "ALL",
   onClick,
-  tabStats,
-  loading,
-}: TableTabsProps<T>) {
-  const [activeTab, setActiveTab] = useState<string>(state || "ALL");
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [selectedColumn, setSelectedColumn] = useState<string | null>(null);
-  const { pagination, setPagination, ...tableOptions } = useCraftTable();
-  useEffect(() => {
-    if (tabStats?.length && activeTab === "ALL") {
-      onClick("ALL");
-    }
-  }, [tabStats, activeTab, onClick]);
-
-  const columns = useMemo(() => {
-    if (!data.length) return [];
-    return Object.entries(data[0] as Record<string, any>)
-      .filter(([, value]) => typeof value !== "object" && !Array.isArray(value))
-      .map(([key]) => ({
-        accessorKey: key,
-        header: key
-          .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
-          .replace(/^./, (str) => str.toUpperCase()),
-      }));
-  }, [data]);
-
-  const tabsData = useMemo(() => {
-    if (!tabStats || !tabStats.length) return [];
-    return tabStats.map(({ tab_value, tab_value_count }) => ({
-      label: tab_value,
-      count: tab_value_count,
-    }));
-  }, [tabStats]);
-
-  const handleColumnSelect = (columnKey: string) => {
-    setSelectedColumn(columnKey);
-    setActiveTab("ALL");
-    setAnchorEl(null);
+  tableStates,
+}: TableTabsProps) {
+  const handleTabClick = (tab: string) => {
+    onClick && onClick(tab);
+    tableStates.setPagination((prev) => ({ ...prev, pageIndex: 0 }));
   };
 
   return (
@@ -78,51 +36,27 @@ export function TableTabs<T>({
         </div>
       ) : (
         <ul className="tabs">
-          {tabStats && tabStats.length > 0 && (
-            <>
+          {tabsData?.length > 0 &&
+            tabsData.map(({ tab_value, tab_value_count }) => (
               <li
+                key={tab_value}
                 className={formatClassName(
-                  `tab ${activeTab === "ALL" ? "active" : ""}`
+                  `tab ${activeTab === tab_value ? "active" : ""}`
                 )}
-                onClick={() => {
-                  setActiveTab("ALL");
-                  setPagination((prev) => ({ ...prev, pageIndex: 0 }));
-                  onClick("ALL");
-                }}
+                onClick={() => handleTabClick(tab_value || "ALL")}
               >
-                <span className="tab__label">ALL</span>
-                <span className="count">
-                  {tabsData.find((tab) => tab.label === "ALL")?.count ?? 0}
+                <span className="tab__label">
+                  {typeof tab_value === "string"
+                    ? tab_value.toUpperCase()
+                    : "UNKNOWN"}
                 </span>
+                <span className="count">{tab_value_count}</span>
               </li>
-              {tabsData
-                .filter(({ label }) => label !== "ALL")
-                .map(({ label, count }) => (
-                  <li
-                    key={label}
-                    className={formatClassName(
-                      `tab ${activeTab === label ? "active" : ""}`
-                    )}
-                    onClick={() => {
-                      setActiveTab(label);
-                      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
-                      onClick(label);
-                    }}
-                  >
-                    <span className="tab__label">
-                      {typeof label === "string"
-                        ? label.toUpperCase()
-                        : "UNKNOWN"}
-                    </span>
-                    <span className="count">{count}</span>
-                  </li>
-                ))}
-            </>
-          )}
+            ))}
         </ul>
       )}
 
-      <Popover
+      {/* <Popover
         open={Boolean(anchorEl)}
         anchorEl={anchorEl}
         onClose={() => setAnchorEl(null)}
@@ -143,7 +77,7 @@ export function TableTabs<T>({
             ))}
           </List>
         </Box>
-      </Popover>
+      </Popover> */}
     </div>
   );
 }

package/src/components/topbar/index.scss

@@ -62,7 +62,7 @@
       }
 
       .change-layout {
-        margin-top: 1rem;
+        margin-top: 0.99rem;
         cursor: pointer;
       }
 

package/src/components/topbar/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import {
   ChangeLayoutIcon,
-  SearchIcon,
   SortingIcon,
   CustomizationIcon,
   HideColumnIcon,
@@ -28,7 +27,7 @@ interface TopbarProps<T> {
   topbarOptions?: TopbarOptionsProps;
   columnOrder?: string[];
   setColumnOrder?: React.Dispatch<React.SetStateAction<string[]>>;
-  tableStates?: CraftTableOptionsProps;
+  tableStates: CraftTableOptionsProps;
   searchValue?: string;
   onSearchChange?: (val: string) => void;
 }
@@ -40,10 +39,8 @@ function Topbar<T>({
   setIsCompactTable,
   paginationComponent,
   topbarOptions,
-  searchValue,
-  onSearchChange,
+  tableStates,
 }: TopbarProps<T>) {
-  const [wrapCell, setWrapCell] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
   const [groupBy, setGroupBy] = useState<string>("None");
@@ -76,6 +73,8 @@ function Topbar<T>({
     showSearch,
     showFilter,
     showCustomizationToggle,
+    searchValue,
+    onSearchChange,
   } = topbarOptions ?? {};
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -112,13 +111,6 @@ function Topbar<T>({
         {rightSideComponent}
         {paginationComponent}
 
-        {/* {showSearch && (
-          <div className="search ts--button" title="Search">
-            <SearchIcon />
-
-          </div>
-        )} */}
-
         {showSearch && (
           <TableSearch
             value={searchValue ?? ""}
@@ -206,8 +198,6 @@ function Topbar<T>({
         {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")
@@ -219,6 +209,7 @@ function Topbar<T>({
               }}
               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,
+  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>
@@ -142,7 +149,7 @@ const ViewMore = ({
         </Box>
 
         {/* Group By */}
-        <Box
+        {/* <Box
           display="flex"
           justifyContent="space-between"
           alignItems="center"
@@ -161,12 +168,21 @@ 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>
             <MenuItem value="Owner">Owner</MenuItem>
           </Select>
-        </Box>
+        </Box> */}
 
         {/* Fullscreen */}
         <Box display="flex" justifyContent="space-between" alignItems="center">

package/src/libs/hooks/useCraftTable.tsx

@@ -15,7 +15,9 @@ 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 [wrapColumns, setWrapColumns] = useState<Record<string, boolean>>({
+    all_wrap: true,
+  });
   const [globalWrapColumns, setGlobalWrapColumns] = useState<boolean | null>(
     null
   );

package/src/libs/hooks/useDefaultColumns.tsx

@@ -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>
           );
         },

package/src/types/table.ts

@@ -37,6 +37,9 @@ export interface TopbarOptionsProps {
   showSearch?: boolean;
   showFilter?: boolean;
   showCustomizationToggle?: boolean;
+  tableStates: CraftTableOptionsProps;
+  searchValue?: string;
+  onSearchChange?: (val: string) => void;
 }
 
 export interface CustomRenderContext<T> {
@@ -75,8 +78,6 @@ export interface CraftTableProps<T> {
   customRenderFn?: CustomRenderFnMap<T>;
   shouldHideColumn?: (accessorKey?: string) => boolean;
   styleOptions?: CraftTableStyleProps;
-  searchValue?: string;
-  onSearchChange?: (val: string) => void;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;