rez-table-listing-mui 0.0.5 → 0.0.7

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";
@@ -68,9 +68,9 @@ function Topbar<T>({
     showColumnToggle,
     showChangeLayoutToggle,
     viewMoreToggle,
-    showSearch,
-    showFilter,
-    showCustomizationToggle,
+    showSearchToggle,
+    // showFilter,
+    showFilterToggle,
   } = topbarOptions ?? {};
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -115,7 +115,7 @@ function Topbar<T>({
           </div>
         )} */}
 
-        {showSearch && (
+        {showSearchToggle && (
           <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: 500,
   });
   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

@@ -28,15 +28,15 @@ interface LoadingOptionsProps {
 export interface TopbarOptionsProps {
   leftSideComponent?: React.ReactNode;
   rightSideComponent?: React.ReactNode;
-  showFullscreenToggle?: boolean;
+  // showFullscreenToggle?: boolean;
   showColumnToggle?: boolean;
   showCompactTableToggle?: boolean;
   showChangeLayoutToggle?: boolean;
   viewMoreToggle?: boolean;
-  showAddNewButton?: boolean;
-  showSearch?: boolean;
-  showFilter?: boolean;
-  showCustomizationToggle?: boolean;
+  showAddNewButton?: boolean; // Currently not used
+  // showSearch?: boolean;
+  showSearchToggle?: boolean;
+  showFilterToggle?: boolean;
 }
 
 export interface CraftTableProps<T> {