rez-table-listing-mui 1.0.49 → 1.2.1

package/src/components/index-table.tsx

@@ -42,46 +42,48 @@ function TableWrapper<T>({
   const [metaColumns, setMetaColumns] = useState<ColumnDef<T>[]>([]);
 
   useEffect(() => {
-    const updatedColumns = columns
-      .filter((col) => {
-        const accessorKey =
-          "accessorKey" in col
-            ? (col as { accessorKey: string }).accessorKey
-            : undefined;
-        return typeof shouldHideColumn === "function"
-          ? !shouldHideColumn(accessorKey)
-          : true;
-      })
-      .map((col, index) => {
-        const id =
-          "accessorKey" in col
-            ? (col as { accessorKey: string }).accessorKey
-            : `col_${index}`;
-
-        const cell = (ctx: any) => {
-          if (col.meta?.type === "custom" && col?.meta?.propName) {
-            const customFn = customRenderFn?.[col.meta.propName];
-            return typeof customFn === "function"
-              ? customFn({
-                  value: ctx.getValue(),
-                  row: ctx.row,
-                  table: ctx.table.getRowModel().rows,
-                })
-              : ctx.getValue();
-          }
-
-          if (typeof col.cell === "function") {
-            return col.cell(ctx);
-          }
-
-          return ctx.getValue();
-        };
-
-        return { ...col, id, cell };
-      });
-
-    setMetaColumns(updatedColumns);
-  }, [columns, tableStates]);
+    if (columns?.length > 0) {
+      const updatedColumns = columns
+        ?.filter((col) => {
+          const accessorKey =
+            "accessorKey" in col
+              ? (col as { accessorKey: string })?.accessorKey
+              : undefined;
+          return typeof shouldHideColumn === "function"
+            ? !shouldHideColumn(accessorKey)
+            : true;
+        })
+        ?.map((col, index) => {
+          const id =
+            "accessorKey" in col
+              ? (col as { accessorKey: string })?.accessorKey
+              : `col_${index}`;
+
+          const cell = (ctx: any) => {
+            if (col?.meta?.type === "custom" && col?.meta?.propName) {
+              const customFn = customRenderFn?.[col?.meta?.propName];
+              return typeof customFn === "function"
+                ? customFn({
+                    value: ctx?.getValue(),
+                    row: ctx?.row,
+                    table: ctx?.table?.getRowModel()?.rows,
+                  })
+                : ctx?.getValue();
+            }
+
+            if (typeof col?.cell === "function") {
+              return col?.cell(ctx);
+            }
+
+            return ctx?.getValue();
+          };
+
+          return { ...col, id, cell };
+        });
+
+      setMetaColumns(updatedColumns);
+    }
+  }, [columns]);
 
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     metaColumns.map((c) => c.id!)

package/src/components/index.scss

@@ -46,7 +46,7 @@
   }
 
   .ts__table__main {
-    flex-grow: 1;
+    flex: 1;
     min-width: 0;
   }
 

package/src/components/login/index.tsx

@@ -9,7 +9,7 @@ const LoginButton = () => {
     setLoading(true);
     try {
       const response = await axios.post(
-        "http://localhost:4010/api/auth/login",
+        "http://localhost:6010/api/auth/login",
         {
           email_id: "darshil@rezolut.in",
           password: "Admin@123",

package/src/components/table-settings/common/info-alert.tsx

@@ -0,0 +1,37 @@
+import { Alert, Box } from "@mui/material";
+
+interface InfoAlertProps {
+  message: string;
+  width?: string | number;
+  top?: number | string;
+  color?: string;
+  zIndex?: number;
+  position?: "absolute" | "relative" | "fixed" | "sticky";
+}
+
+const InfoAlert = ({
+  message,
+  width = "100%",
+  top = 10,
+  color = "#088AB2",
+  zIndex = 0,
+  position = "absolute",
+}: InfoAlertProps) => {
+  return (
+    <Box
+      sx={{
+        fontSize: "12px",
+        color,
+        width,
+        height: "fit-content",
+        position,
+        zIndex,
+        top,
+      }}
+    >
+      <Alert severity="info">{message}</Alert>
+    </Box>
+  );
+};
+
+export default InfoAlert;

package/src/components/table-settings/common/listing-values.tsx

@@ -1,4 +1,11 @@
-import { Box, Button, Grid, IconButton, Typography } from "@mui/material";
+import {
+  Alert,
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  Typography,
+} from "@mui/material";
 import CustomSearch from "../../filter/components/search/index.tsx";
 import {
   SortableContext,
@@ -9,6 +16,8 @@ import DraggableListItem from "./draggable-listitem.tsx";
 import { listingValuesStyles } from "../style.ts";
 import Loader from "../../common/loader/loader.tsx";
 import { ClosedEyeIcon, EyeIcon } from "../../../assets/svg.tsx";
+import InfoAlert from "./info-alert.tsx";
+import React from "react";
 ``;
 
 interface FilterValue {
@@ -27,6 +36,8 @@ interface ListingValuesProps {
   tabsApiDataLoading?: boolean;
   onItemToggle: (itemId: string, fromContainerId: string) => void;
   enableDragAndDrop?: boolean;
+  isQuickTabActive?: boolean;
+  AlertComponenet?: React.ReactNode;
 }
 
 const ListingValuesContent = ({
@@ -71,6 +82,7 @@ const ListingValues = ({
   tabsApiDataLoading,
   onItemToggle,
   enableDragAndDrop = true,
+  AlertComponenet,
 }: ListingValuesProps) => {
   const { setNodeRef } = useDroppable({
     id: containerId,
@@ -85,62 +97,65 @@ const ListingValues = ({
       {tabsApiDataLoading ? (
         <Loader />
       ) : (
-        <Box sx={{ p: 2 }}>
-          <Box sx={listingValuesStyles.headerContainer}>
-            <Typography variant="h6" sx={listingValuesStyles.heading}>
-              {headerText}
-            </Typography>
-            <Button
-              onClick={onClick}
-              variant="text"
-              size="small"
-              sx={listingValuesStyles.button}
-              disabled={filteredValues.length === 0}
-            >
-              {buttonText}
-            </Button>
-          </Box>
+        <>
+          <Box sx={{ p: 2, zIndex: 10 }}>
+            <Box sx={listingValuesStyles.headerContainer}>
+              <Typography variant="h6" sx={listingValuesStyles.heading}>
+                {headerText}
+              </Typography>
+              <Button
+                onClick={onClick}
+                variant="text"
+                size="small"
+                sx={listingValuesStyles.button}
+                disabled={filteredValues.length === 0}
+              >
+                {buttonText}
+              </Button>
+            </Box>
 
-          {searchTerm !== undefined && setSearchTerm !== undefined && (
-            <CustomSearch value={searchTerm} onChange={setSearchTerm} />
-          )}
+            {searchTerm !== undefined && setSearchTerm !== undefined && (
+              <CustomSearch value={searchTerm} onChange={setSearchTerm} />
+            )}
 
-          <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
-            {enableDragAndDrop ? (
-              <SortableContext
-                items={filteredValues.map((item) => item.id)}
-                strategy={verticalListSortingStrategy}
-              >
+            <Box ref={setNodeRef} sx={listingValuesStyles.draggableContainer}>
+              {enableDragAndDrop ? (
+                <SortableContext
+                  items={filteredValues.map((item) => item.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <Box sx={listingValuesStyles.draggableCover}>
+                    {filteredValues.map((item) => (
+                      <DraggableListItem
+                        key={item.id}
+                        id={item.id}
+                        containerId={containerId}
+                      >
+                        <ListingValuesContent
+                          item={item}
+                          containerId={containerId}
+                          onItemToggle={onItemToggle}
+                        />
+                      </DraggableListItem>
+                    ))}
+                  </Box>
+                </SortableContext>
+              ) : (
                 <Box sx={listingValuesStyles.draggableCover}>
                   {filteredValues.map((item) => (
-                    <DraggableListItem
+                    <ListingValuesContent
                       key={item.id}
-                      id={item.id}
+                      item={item}
                       containerId={containerId}
-                    >
-                      <ListingValuesContent
-                        item={item}
-                        containerId={containerId}
-                        onItemToggle={onItemToggle}
-                      />
-                    </DraggableListItem>
+                      onItemToggle={onItemToggle}
+                    />
                   ))}
                 </Box>
-              </SortableContext>
-            ) : (
-              <Box sx={listingValuesStyles.draggableCover}>
-                {filteredValues.map((item) => (
-                  <ListingValuesContent
-                    key={item.id}
-                    item={item}
-                    containerId={containerId}
-                    onItemToggle={onItemToggle}
-                  />
-                ))}
-              </Box>
-            )}
+              )}
+            </Box>
           </Box>
-        </Box>
+          {AlertComponenet && AlertComponenet}
+        </>
       )}
     </Grid>
   );