rez-table-listing-mui 0.0.8 → 0.0.10

package/src/components/index-table.tsx

@@ -19,7 +19,6 @@ import Topbar from "./topbar";
 import DefaultPagination from "./pagination/default";
 import TableDND from "./table-dnd";
 import Table from "./table";
-import { useFullscreenPopoverContainer } from "../libs/hooks/useFullScreen";
 
 function TableWrapper<T>({
   data = [],
@@ -29,27 +28,57 @@ function TableWrapper<T>({
   featureOptions,
   topbarOptions,
   nestedComponent,
-  loadingOptions = {
-    isLoading: false,
-  },
+  loadingOptions = { isLoading: false },
+  customRenderFn = {},
+  shouldHideColumn,
 }: CraftTableProps<T>) {
-  // Throw an error if data is not an array
   if (!Array.isArray(data)) {
     throw new Error("data must be an array of objects.");
   }
+  const [metaColumns, setMetaColumns] = useState<ColumnDef<T>[]>([]);
 
-  const [newColumns] = useState<ColumnDef<T>[]>(() =>
-    columns.map((col, index) => ({
-      ...col,
-      id:
-        "accessorKey" in col
-          ? (col as { accessorKey: string }).accessorKey
-          : `col_${index}`,
-    }))
-  );
+  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]);
 
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
-    newColumns.map((c) => c.id!)
+    metaColumns.map((c) => c.id!)
   );
 
   const [isCompactTable, setIsCompactTable] = useState<boolean>(
@@ -57,7 +86,6 @@ function TableWrapper<T>({
   );
 
   const tableRef = useRef<HTMLDivElement>(null);
-  const { isFullscreen } = useFullscreenPopoverContainer();
 
   useEffect(() => {
     setIsCompactTable(featureOptions?.compactTable ?? false);
@@ -78,13 +106,13 @@ function TableWrapper<T>({
   const craftTopbarOptions: TopbarOptionsProps = {
     showColumnToggle: true,
     showCompactTableToggle: true,
-    // showFullscreenToggle: true,
+    showFullscreenToggle: true,
     showChangeLayoutToggle: true,
     viewMoreToggle: true,
     showAddNewButton: true,
-    // showSearch: true,
-    showFilterToggle: true,
-    showSearchToggle: true,
+    showSearch: true,
+    showFilter: true,
+    showCustomizationToggle: true,
 
     // Add other conditions above topbarOptions
     ...topbarOptions,
@@ -134,7 +162,7 @@ function TableWrapper<T>({
 
   const table = useReactTable({
     data,
-    columns,
+    columns: metaColumns,
     state: {
       sorting,
       pagination,
@@ -229,11 +257,7 @@ function TableWrapper<T>({
             />
           )}
 
-          <div
-            className={`ts__table__wrapper ${
-              isFullscreen ? "is-fullscreen" : ""
-            }`}
-          >
+          <div className="ts__table__wrapper">
             {enableColumnReordering ? (
               <TableDND
                 table={table}

package/src/components/index.scss

@@ -29,11 +29,7 @@
 
   .ts__table__wrapper {
     overflow-x: auto;
-    // max-height: calc(100vh - 106px);
-
-    &.is-fullscreen {
-      max-height: calc(100vh - 10px); // override in fullscreen
-    }
+    max-height: calc(100vh - 106px);
 
     .ts__table.ts--striped > .ts__body > .ts__body__tr:nth-of-type(odd) {
       background-color: var(--grey-200);

package/src/components/table-body.tsx

@@ -98,12 +98,9 @@ function TableBody<T>({
         <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> */}
+            <td colSpan={table.getAllLeafColumns().length}>
+              {NestedComponent && <NestedComponent {...{ row }} />}
+            </td>
           </tr>
         </React.Fragment>
       );

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,
-    showSearchToggle,
-    // showFilter,
-    showFilterToggle,
+    showSearch,
+    showFilter,
+    showCustomizationToggle,
   } = topbarOptions ?? {};
 
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
@@ -115,7 +115,7 @@ function Topbar<T>({
           </div>
         )} */}
 
-        {showSearchToggle && (
+        {showSearch && (
           <div className="search-wrapper" ref={searchContainerRef}>
             <div
               className="search-icon ts--button"
@@ -183,7 +183,7 @@ function Topbar<T>({
           </>
         )}
 
-        {showFilterToggle && (
+        {showFilter && (
           <>
             <div
               className="filter ts--button"
@@ -204,9 +204,9 @@ function Topbar<T>({
           </>
         )}
 
-        {showFilterToggle && (
+        {showCustomizationToggle && (
           <div className="customization ts--button" title="Filter">
-            <FilterIcon />
+            <CustomizationIcon />
           </div>
         )}
 

package/src/components/viewmore/index.tsx

@@ -135,15 +135,6 @@ 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>
@@ -170,15 +161,6 @@ 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: 500,
+    pageSize: 25,
   });
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

package/src/libs/hooks/useDefaultColumns.tsx

@@ -26,9 +26,7 @@ export const useDefaultColumns = () => {
         // ),
         cell: ({ row, getValue }) => {
           return (
-            <div
-              style={{ paddingLeft: `${row.depth * 2}rem`, display: "flex" }}
-            >
+            <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
               {row.getCanExpand() ? (
                 <button
                   style={{
@@ -50,8 +48,7 @@ export const useDefaultColumns = () => {
               ) : (
                 <span style={{ marginRight: "0.8rem" }}></span>
               )}
-              {/* {getValue<boolean>()} */}
-              <p style={{ marginTop: "0.5rem" }}>{getValue<boolean>()}</p>
+              {getValue<boolean>()}
             </div>
           );
         },
@@ -86,17 +83,30 @@ export const useDefaultColumns = () => {
         size: 150,
         meta: { label: "Progress" },
       },
-      {
-        header: "Status",
-        accessorKey: "status",
-        meta: { label: "Status" },
-      },
       {
         header: "Department",
         accessorKey: "department",
         size: 150,
         meta: { label: "Department" },
       },
+      {
+        header: "Status",
+        accessorKey: "status",
+        meta: {
+          label: "Status",
+          type: "custom",
+          propName: "renderStatus",
+        },
+      },
+      {
+        header: "Action",
+        accessorKey: "action",
+        meta: {
+          label: "Action",
+          type: "custom",
+          propName: "renderAction",
+        },
+      },
     ],
     []
   );

package/src/types/table.ts

@@ -28,28 +28,49 @@ 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; // Currently not used
-  // showSearch?: boolean;
-  showSearchToggle?: boolean;
-  showFilterToggle?: boolean;
+  showAddNewButton?: boolean;
+  showSearch?: boolean;
+  showFilter?: boolean;
+  showCustomizationToggle?: boolean;
 }
 
+export interface CustomRenderContext<T> {
+  value: unknown;
+  row: Row<T>;
+  table: Row<T>[];
+}
+
+export type CustomRenderFnMap<T> = {
+  [key: string]: (ctx: CustomRenderContext<T>) => React.ReactNode;
+};
+
+type CustomColumnMeta = {
+  type?: "custom";
+  propName?: string;
+  [key: string]: any;
+};
+
+type CustomColumnDef<T> = ColumnDef<T> & {
+  meta?: CustomColumnMeta;
+};
+
 export interface CraftTableProps<T> {
   data: T[];
-  columns: ColumnDef<T>[];
+  columns: CustomColumnDef<T>[];
   tableStates: CraftTableOptionsProps;
   paginationOptions?: CraftTablePaginationProps;
   featureOptions?: CraftTableFeatureProps;
   nestedComponent?: React.ComponentType<{ row: Row<T> }>;
   loadingOptions?: LoadingOptionsProps;
   topbarOptions?: TopbarOptionsProps;
+  customRenderFn?: CustomRenderFnMap<T>;
+  shouldHideColumn?: (accessorKey?: string) => boolean;
 }
-
 export interface CraftTableComponentProps<T> {
   table: Table<T>;
   featureOptions: CraftTableFeatureProps;