rez-table-listing-mui 1.2.11 → 1.2.12

package/package.json

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

package/src/App.tsx

@@ -26,13 +26,14 @@ import { SettingsDataProps } from "./types/filter-settings";
 import { FilterMasterStateProps } from "./types/filter";
 import { ColumnDef } from "@tanstack/react-table";
 import { ENTITY_TYPE } from "./libs/utils/common";
+import { makeData, Person } from "./libs/utils/make-hierar-data";
 
 function App() {
   // const [mockLoading, setMockLoading] = useState<boolean>(true);
   // const [jsonData] = useState<any[]>([]);
   const [columns, setColumns] = useState<any[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
-  // const [data, setData] = useState<Person[]>(() => makeData(50, 3, 2));
+  const [data, setData] = useState<Person[]>(() => makeData(200, 3, 2));
 
   const [selectedTab, setSelectedTab] = useState("All");
 
@@ -225,6 +226,7 @@ function App() {
           fontWeight: 500,
           borderRadius: "4px",
           padding: "4px",
+          width: "fit-content",
         }}
       >
         {statusValue}
@@ -339,6 +341,8 @@ function App() {
 
       <TableWrapper
         data={filteredData}
+        // data={data}
+        // columns={defaultColumns}
         columns={columns && columns.length > 0 ? columns : defaultColumns}
         tableStates={tableStates}
         featureOptions={{

package/src/components/index-table.tsx

@@ -1,5 +1,6 @@
 import {
   ColumnDef,
+  ColumnMeta,
   getCoreRowModel,
   getExpandedRowModel,
   getPaginationRowModel,
@@ -21,6 +22,10 @@ import TableDND from "./table-dnd";
 import Table from "./table";
 import { useFullscreenPopoverContainer } from "../libs/hooks/useFullScreen";
 
+interface CustomColumnMeta<T> extends ColumnMeta<T, unknown> {
+  defaultPinned?: "left" | "right" | undefined;
+}
+
 function TableWrapper<T>({
   data = [],
   columns = [],
@@ -85,6 +90,17 @@ function TableWrapper<T>({
     }
   }, [columns]);
 
+  //For Default Column Pinning to work
+  useEffect(() => {
+    table.getAllLeafColumns().forEach((col) => {
+      const where = (col.columnDef.meta as CustomColumnMeta<T>)
+        ?.defaultPinned as "left" | "right" | undefined;
+      if (where && !col.getIsPinned()) {
+        col.pin(where);
+      }
+    });
+  }, [tableStates?.columnPinning?.left, metaColumns]);
+
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     metaColumns.map((c) => c.id!)
   );

package/src/components/table-settings/components/quick-tab.tsx

@@ -108,31 +108,33 @@ const QuickTab = ({
         );
 
         // Update the error state
-        setSaveButtonError((prev) => {
-          const otherMessages =
-            prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
-            [];
-
-          return {
-            ...prev,
-            hasError: true,
-            messages: hasQuickTabError
-              ? [...prev?.messages]
-              : [...otherMessages, errorMessage],
-          };
-        });
+
+        // Later we can use this to show error message when we will make error logic more simple
+        // setSaveButtonError((prev) => {
+        //   const otherMessages =
+        //     prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
+        //     [];
+
+        //   return {
+        //     ...prev,
+        //     hasError: true,
+        //     messages: hasQuickTabError
+        //       ? [...prev?.messages]
+        //       : [...otherMessages, errorMessage],
+        //   };
+        // });
       } else {
         const hasOtherMessages = saveButtonError?.messages?.some(
           (message) => message.type !== ERROR_CODE
         );
         // Reset error state if the list is valid
-        setSaveButtonError((prev) => ({
-          ...prev,
-          hasError: hasOtherMessages,
-          messages:
-            prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
-            [],
-        }));
+        // setSaveButtonError((prev) => ({
+        //   ...prev,
+        //   hasError: hasOtherMessages,
+        //   messages:
+        //     prev?.messages?.filter((message) => message.type !== ERROR_CODE) ||
+        //     [],
+        // }));
       }
     }
   }, [quickTabStates?.hide_list, quickTabStates?.show_list]);

package/src/components/table-settings/index.tsx

@@ -149,6 +149,7 @@ export function QuickFilterSettings({
         <DialogActions>
           <CustomButton
             // disabled={saveButtonError?.hasError}
+            disabled={saveButtonError?.hasError}
             onClick={handleSaveSetSettingsData}
           >
             Save Quick Filter

package/src/libs/hooks/useCraftTable.tsx

@@ -1,4 +1,5 @@
 import {
+  ColumnPinningState,
   ExpandedState,
   PaginationState,
   RowSelectionState,
@@ -49,6 +50,12 @@ export function useCraftTable(paginationPageSize: number = 25) {
     );
   }
 
+  // For Default Column Pinning
+  const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
+    left: [],
+    right: [],
+  });
+
   const craftTableOptions: CraftTableOptionsProps = {
     sorting: sorting,
     setSorting: setSorting,
@@ -74,6 +81,8 @@ export function useCraftTable(paginationPageSize: number = 25) {
     setShowTableFilter: setShowTableFilter,
     showFilterOptions: showFilterOptions,
     setShowFilterOption: setShowFilterOption,
+    columnPinning: columnPinning,
+    setColumnPinning: setColumnPinning,
   };
 
   return craftTableOptions;

package/src/libs/hooks/useDefaultColumns.tsx

@@ -58,7 +58,7 @@ export const useDefaultColumns = () => {
         header: "Last Name",
         accessorKey: "lastName",
         size: 100,
-        meta: { label: "Last Name" },
+        meta: { label: "Last Name", defaultPinned: "left" },
       },
       {
         header: "Email Id",
@@ -97,6 +97,7 @@ export const useDefaultColumns = () => {
           label: "Status",
           type: "custom",
           propName: "renderStatus",
+          align: "right",
         },
       },
       {
@@ -106,6 +107,7 @@ export const useDefaultColumns = () => {
           label: "Action",
           type: "custom",
           propName: "renderAction",
+          align: "right",
         },
       },
     ],

package/src/types/table-options.ts

@@ -3,6 +3,7 @@ import {
   RowSelectionState,
   SortingState,
   ExpandedState,
+  ColumnPinningState,
 } from "@tanstack/react-table";
 import { Dispatch, SetStateAction } from "react";
 import {
@@ -45,6 +46,8 @@ export interface CraftTableOptionsProps {
   setShowTableFilter: Dispatch<SetStateAction<boolean>>;
   showFilterOptions: boolean;
   setShowFilterOption: Dispatch<SetStateAction<boolean>>;
+  columnPinning: ColumnPinningState;
+  setColumnPinning: Dispatch<SetStateAction<ColumnPinningState>>;
 }
 
 export interface craftTableFilterSettingsOptionsProps {