rez-table-listing-mui 0.0.9 → 0.0.11

package/src/components/index-table.tsx

@@ -28,27 +28,60 @@ function TableWrapper<T>({
   featureOptions,
   topbarOptions,
   nestedComponent,
-  loadingOptions = {
-    isLoading: false,
-  },
+  loadingOptions = { isLoading: false },
+  customRenderFn = {},
+  shouldHideColumn,
+  styleOptions,
 }: 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>(
@@ -132,7 +165,7 @@ function TableWrapper<T>({
 
   const table = useReactTable({
     data,
-    columns,
+    columns: metaColumns,
     state: {
       sorting,
       pagination,
@@ -196,6 +229,11 @@ function TableWrapper<T>({
     }
   };
 
+  const tableWrapperProps = {
+    ...(styleOptions?.wrapperStyle && { style: styleOptions.wrapperStyle }),
+    className: "ts__table__wrapper",
+  };
+
   return (
     <div className="ts__table__container" ref={tableRef}>
       {isLoading ? (
@@ -227,7 +265,7 @@ function TableWrapper<T>({
             />
           )}
 
-          <div className="ts__table__wrapper">
+          <div {...tableWrapperProps}>
             {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 - 110px);
 
     .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/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

@@ -7,10 +7,10 @@ import {
 import { useState } from "react";
 import { CraftTableOptionsProps } from "../../types/table-options";
 
-export function useCraftTable() {
+export function useCraftTable(paginationPageSize: number = 25) {
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
-    pageSize: 500,
+    pageSize: paginationPageSize,
   });
   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

@@ -39,17 +39,43 @@ export interface TopbarOptionsProps {
   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;
+};
+
+interface CraftTableStyleProps {
+  wrapperStyle?: React.CSSProperties;
+}
+
 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;
+  styleOptions?: CraftTableStyleProps;
 }
-
 export interface CraftTableComponentProps<T> {
   table: Table<T>;
   featureOptions: CraftTableFeatureProps;