rez-table-listing-mui 0.0.24 → 0.0.25

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/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>
@@ -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

@@ -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>;