rez-table-listing-mui 1.2.11 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rez-table-listing-mui",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "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}
@@ -338,8 +340,10 @@ function App() {
       <LoginButton />
 
       <TableWrapper
-        data={filteredData}
-        columns={columns && columns.length > 0 ? columns : defaultColumns}
+        // data={filteredData}
+        data={data}
+        columns={defaultColumns}
+        // columns={columns && columns.length > 0 ? columns : defaultColumns}
         tableStates={tableStates}
         featureOptions={{
           striped: true,

package/src/assets/global.css

@@ -0,0 +1,88 @@
+/* Satoshi Font Family */
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi";
+  src: url("./Satoshi/Satoshi-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+}
+
+/* Global font application */
+* {
+  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+body {
+  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-weight: 400;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+input, textarea, select, button {
+  font-family: inherit;
+}

package/src/assets/variable.ts

@@ -0,0 +1,15 @@
+export const headerHeight = "64px";
+export const primarySidebarWidth = "64px";
+export const totalSidebarWidth = "260px";
+export const submenuSidebarWidth = "12.25rem";
+export const primaryfontRegular = "Satoshi-regular";
+export const primaryfontBlack = "Satoshi-Black";
+export const primaryFontBlackItalic = "Satoshi-BlackItalic";
+export const primaryFontBold = "Satoshi-Bold";
+export const primaryFontBoldItalic = "Satoshi-BoldItalic";
+export const primaryFontItalic = "Satoshi-Italic";
+export const primaryLight = "Satoshi-Light";
+export const primaryLightItalic = "Satoshi-LightItalic";
+export const primaryRegular = "Satoshi-Regular";
+export const primaryVariable = "Satoshi-Variable";
+export const primaryVariableItalic = "Satoshi-VariableItalic";

package/src/components/common/index.scss

@@ -6,6 +6,7 @@
   h3 {
     color: var(--grey-900);
     font-size: 2rem;
-    font-family: var(--fira-700);
+    font-family: "Satoshi", sans-serif;
+    font-weight: 700;
   }
 }

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/index.scss

@@ -10,8 +10,7 @@
   --grey-900: #414042;
   --filter-width: 24rem;
 
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: "Satoshi", sans-serif;
 
   // set default styles for all elements
   & * {

package/src/components/table-head-dnd-cell.tsx

@@ -52,11 +52,11 @@ function DraggableTableHeader<T>({
     style?: CSSProperties;
   } = {
     className: "ts__content",
-    style: {
-      justifyContent: getColumnAlignment(
-        (header?.column?.columnDef?.meta as align)?.align
-      ),
-    },
+    // style: {
+    //   justifyContent: getColumnAlignment(
+    //     (header?.column?.columnDef?.meta as align)?.align
+    //   ),
+    // },
   };
 
   // if (header.column.getCanSort()) {

package/src/components/table-head.tsx

@@ -75,11 +75,11 @@ function TableHead<T>({
               style?: CSSProperties;
             } = {
               className: "ts__content",
-              style: {
-                justifyContent: getColumnAlignment(
-                  (header?.column?.columnDef?.meta as align)?.align
-                ),
-              },
+              // style: {
+              //   justifyContent: getColumnAlignment(
+              //     (header?.column?.columnDef?.meta as align)?.align
+              //   ),
+              // },
             };
 
             // if (header.column.getCanSort()) {

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/components/tabs/index.scss

@@ -19,7 +19,8 @@
       cursor: pointer;
       color: var(--grey-900);
       font-size: 0.875rem;
-      font-family: var(--fira-700);
+      font-family: "Satoshi", sans-serif;
+      font-weight: 700;
 
       .tab__label {
         font-family: inherit;

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",
@@ -106,6 +106,7 @@ export const useDefaultColumns = () => {
           label: "Action",
           type: "custom",
           propName: "renderAction",
+          align: "right",
         },
       },
     ],

package/src/libs/utils/common.ts

@@ -78,7 +78,7 @@ export function customDebounce<T extends (...args: any[]) => any>(
 
 //ENTITY TYPE
 const ENVIRONMENT = "uat";
-export const ENTITY_TYPE = "ROL";
+export const ENTITY_TYPE = "UPR";
 
 const environments = {
   adm_dev: "http://localhost:4010/api",

package/src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import "./assets/global.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <QueryClientProvider

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 {