rez-table-listing-mui 0.0.4 → 0.0.6

package/src/components/table-body.tsx

@@ -95,17 +95,17 @@ function TableBody<T>({
 
     if (row.getIsExpanded()) {
       return (
-        console.log("row.getIsExpanded() in table-head", row.getIsExpanded()),
-        (
-          <React.Fragment key={row.id}>
-            {renderedRow}
-            <tr>
-              <td colSpan={table.getAllLeafColumns().length}>
-                {NestedComponent && <NestedComponent {...{ row }} />}
-              </td>
-            </tr>
-          </React.Fragment>
-        )
+        <React.Fragment key={row.id}>
+          {renderedRow}
+          <tr>
+            {" "}
+            {/* // this is for the nested row. Extra line is coming in ui when
+            opening the nested data. */}
+            {/* <td colSpan={table.getAllLeafColumns().length}> */}
+            {NestedComponent && <NestedComponent {...{ row }} />}
+            {/* </td> */}
+          </tr>
+        </React.Fragment>
       );
     } else {
       return renderedRow;

package/src/components/topbar/index.tsx

@@ -3,8 +3,8 @@ import {
   ChangeLayoutIcon,
   SearchIcon,
   SortingIcon,
-  CustomizationIcon,
   HideColumnIcon,
+  FilterIcon,
 } from "../../assets/svg";
 import { Popover } from "@mui/material";
 import LayoutSelector from "../table-change-layout";
@@ -55,7 +55,7 @@ function Topbar<T>({
     table.getAllLeafColumns().map((col) => col.id)
   );
 
-  console.log("showColumnHiding", showColumnHiding); //only for built purpose-> remove it later
+  // console.log("showColumnHiding", showColumnHiding); //only for built purpose-> remove it later
 
   // sync column order with table instance
   useEffect(() => {
@@ -68,9 +68,9 @@ function Topbar<T>({
     showColumnToggle,
     showChangeLayoutToggle,
     viewMoreToggle,
-    showSearch,
-    showFilter,
-    showCustomizationToggle,
+    showSortToggle,
+    // showFilter,
+    showFilterToggle,
   } = topbarOptions ?? {};
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -115,7 +115,7 @@ function Topbar<T>({
           </div>
         )} */}
 
-        {showSearch && (
+        {showSortToggle && (
           <div className="search-wrapper" ref={searchContainerRef}>
             <div
               className="search-icon ts--button"
@@ -183,7 +183,7 @@ function Topbar<T>({
           </>
         )}
 
-        {showFilter && (
+        {showFilterToggle && (
           <>
             <div
               className="filter ts--button"
@@ -204,9 +204,9 @@ function Topbar<T>({
           </>
         )}
 
-        {showCustomizationToggle && (
+        {showFilterToggle && (
           <div className="customization ts--button" title="Filter">
-            <CustomizationIcon />
+            <FilterIcon />
           </div>
         )}
 

package/src/components/viewmore/index.tsx

@@ -135,6 +135,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 +170,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

@@ -10,7 +10,7 @@ import { CraftTableOptionsProps } from "../../types/table-options";
 export function useCraftTable() {
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 25,
+    pageSize: 200,
   });
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

package/src/libs/hooks/useDefaultColumns.tsx

@@ -26,7 +26,9 @@ 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={{
@@ -48,7 +50,8 @@ export const useDefaultColumns = () => {
               ) : (
                 <span style={{ marginRight: "0.8rem" }}></span>
               )}
-              {getValue<boolean>()}
+              {/* {getValue<boolean>()} */}
+              <p style={{ marginTop: "0.5rem" }}>{getValue<boolean>()}</p>
             </div>
           );
         },

package/src/types/table.ts

@@ -33,10 +33,10 @@ export interface TopbarOptionsProps {
   showCompactTableToggle?: boolean;
   showChangeLayoutToggle?: boolean;
   viewMoreToggle?: boolean;
-  showAddNewButton?: boolean;
+  showAddNewButton?: boolean; // Currently not used
   showSearch?: boolean;
-  showFilter?: boolean;
-  showCustomizationToggle?: boolean;
+  showSortToggle?: boolean;
+  showFilterToggle?: boolean;
 }
 
 export interface CraftTableProps<T> {