rez-table-listing-mui 1.3.52 → 1.3.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.3.52",
+  "version": "1.3.54",
   "type": "module",
   "description": "A rez table listing component built on TanStack Table",
   "main": "dist/index.js",

package/src/listing/components/common/saved-filter-modal/index.tsx

@@ -304,7 +304,7 @@ const SavedFilterModalView = ({
         />
 
         <Typography sx={{ mb: 1, fontSize: 12, color: "#888" }}>
-          (Max. 300 Characters)
+          (Max. 200 Characters)
         </Typography>
         {/* Sharing Controls */}
         {shouldShowSharingControls &&

package/src/listing/components/table-body.tsx

@@ -15,7 +15,10 @@ import {
   horizontalListSortingStrategy,
   SortableContext,
 } from "@dnd-kit/sortable";
-import { getColumnPinningStylesBody } from "../libs/utils/common";
+import {
+  getColumnPinningStylesBody,
+  getDepthBackground,
+} from "../libs/utils/common";
 import Checkbox from "./inputs/checkbox";
 
 interface TableBodyProps<T> {
@@ -47,6 +50,7 @@ function TableBody<T>({
               position: "sticky",
               left: 0,
               width: "50px",
+              backgroundColor: getDepthBackground(row.depth),
             }}
           >
             <Checkbox
@@ -70,6 +74,7 @@ function TableBody<T>({
               }),
             } as React.CSSProperties,
             align: (cell.column.columnDef.meta as align)?.align || "left",
+            backgroundColor: getDepthBackground(row.depth),
           };
 
           return enableColumnReordering ? (

package/src/listing/components/table-settings/components/column.tsx

@@ -80,6 +80,7 @@ const ColumnTab = ({
 
     const mappedColumns: ColumnItem[] =
       columnTabAttributes?.map((column) => ({
+        ...column,
         label: column?.name,
         value: column?.attribute_key,
       })) || [];

package/src/listing/libs/utils/common.ts

@@ -76,6 +76,12 @@ export function customDebounce<T extends (...args: any[]) => any>(
   };
 }
 
+export const getDepthBackground = (depth: number) => {
+  if (depth === 0) return "white";
+  const shade = 255 - depth * 8; // reduce brightness per level
+  return `rgb(${shade}, ${shade}, ${shade})`;
+};
+
 //ENTITY TYPE
 const ENVIRONMENT = "crm_dev";
 export const ENTITY_TYPE = "LEAD";

package/src/view/ListingView.tsx

@@ -543,7 +543,9 @@ function ListingView() {
               columnsDataLoading={metaQuery.isPending}
               quickTabAttributes={quickTabAttributes?.data}
               quickTabAttributesLoading={quickTabAttributes?.isLoading}
-              columnTabAttributes={settingsColumnAttributes?.data?.slice(0, 25)}
+              columnTabAttributes={settingsColumnAttributes?.data?.filter(
+                (item) => item.attribute_key
+              )}
               columnAttributesLoading={settingsColumnAttributes?.isLoading}
               sortingTabAttributes={sortingTabAttributes?.data}
               sortingTabAttributesLoading={sortingTabAttributes?.isLoading}