rez-table-listing-mui 0.0.0

package/src/libs/utils/common.ts

@@ -0,0 +1,62 @@
+import { Column } from "@tanstack/react-table";
+import { alignProps } from "../../types/common";
+import { CSSProperties } from "react";
+
+export const formatClassName = (className: string): string => {
+  return className.replace(/\s+/g, " ").trim();
+};
+
+export const getColumnAlignment = (align: string) => {
+  const contentAlignment = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+  };
+
+  const alignment = contentAlignment[(align as alignProps) || "left"];
+  return alignment;
+};
+
+export const getColumnPinningStyles = <T>(column: Column<T>): CSSProperties => {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn =
+    isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn =
+    isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    boxShadow: isLastLeftPinnedColumn
+      ? "-4px 0 4px -4px gray inset"
+      : isFirstRightPinnedColumn
+      ? "4px 0 4px -4px gray inset"
+      : undefined,
+    background: "inherit",
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+  };
+};
+
+export const getColumnPinningStylesBody = <T>(
+  column: Column<T>
+): CSSProperties => {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn =
+    isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn =
+    isPinned === "right" && column.getIsFirstColumn("right");
+
+  return {
+    boxShadow: isLastLeftPinnedColumn
+      ? "-4px 0 4px -4px gray inset"
+      : isFirstRightPinnedColumn
+      ? "4px 0 4px -4px gray inset"
+      : undefined,
+    background: "inherit",
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    position: isPinned ? "sticky" : "relative",
+    width: column.getSize(),
+  };
+};

package/src/libs/utils/date-format.ts

@@ -0,0 +1,6 @@
+import moment from "moment";
+import { formatDateProps } from "../../types/common";
+
+export const formatDate = ({ date, style }: formatDateProps) => {
+  return moment(date).format(style);
+};

package/src/libs/utils/make-data.ts

@@ -0,0 +1,79 @@
+export const generateTableData = () => {
+  const records = [];
+
+  // Adding a few specific records
+  records.push(
+    {
+      id: 1,
+      name: "Employee 1",
+      department: "Marketing",
+      position: "Senior Manager",
+      email: "employee1@example.com",
+      phone: "+1-202-555-0101",
+      dateOfJoining: "2018-05-21",
+      salary: 75000,
+      performanceRating: "A",
+      location: "New York",
+      status: "Active",
+    },
+    {
+      id: 2,
+      name: "Employee 2",
+      department: "Finance",
+      position: "Accountant",
+      email: "employee2@example.com",
+      phone: "+1-202-555-0112",
+      dateOfJoining: "2020-09-15",
+      salary: 60000,
+      performanceRating: "B",
+      location: "Chicago",
+      status: "Inactive",
+    },
+    {
+      id: 3,
+      name: "Employee 3",
+      department: "HR",
+      position: "HR Specialist",
+      email: "employee3@example.com",
+      phone: "+1-202-555-0133",
+      dateOfJoining: "2017-03-12",
+      salary: 58000,
+      performanceRating: "A",
+      location: "Boston",
+      status: "Pending",
+    }
+  );
+
+  // Adding dynamically generated records for variety
+  for (let i = 4; i <= 200; i++) {
+    records.push({
+      id: i,
+      name: `Employee ${i}`,
+      department: ["IT", "Marketing", "Finance", "HR", "Operations"][
+        Math.floor(Math.random() * 5)
+      ],
+      position: ["Specialist", "Manager", "Analyst", "Consultant", "Director"][
+        Math.floor(Math.random() * 5)
+      ],
+      email: `employee${i}@example.com`,
+      phone: `+1-202-555-${(i + 10).toString().padStart(4, "0")}`,
+      dateOfJoining: new Date(
+        2015 + Math.floor(Math.random() * 8),
+        Math.floor(Math.random() * 12),
+        Math.floor(Math.random() * 28) + 1
+      )
+        .toISOString()
+        .split("T")[0],
+      salary: Math.floor(Math.random() * 40000) + 50000,
+      performanceRating: ["A", "B", "C"][Math.floor(Math.random() * 3)],
+      location: ["New York", "Chicago", "Boston", "Seattle", "Austin"][
+        Math.floor(Math.random() * 5)
+      ],
+      status: ["Active", "Inactive", "Pending", "Hold"][
+        Math.floor(Math.random() * 4)
+      ],
+    });
+  }
+
+  return records;
+};

package/src/libs/utils/make-hierar-data.ts

@@ -0,0 +1,51 @@
+import { faker } from "@faker-js/faker";
+
+export type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  progress: number;
+  status: "Active" | "Inactive";
+  department?: string;
+  subRows?: Person[];
+};
+
+const range = (len: number) => {
+  const arr: number[] = [];
+  for (let i = 0; i < len; i++) {
+    arr.push(i);
+  }
+  return arr;
+};
+
+const newPerson = (): Person => {
+  return {
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    department: faker.helpers.shuffle<string>([
+      "HR",
+      "Engineering",
+      "Marketing",
+      "Sales",
+    ])[0]!,
+    status: faker.helpers.shuffle<Person["status"]>(["Active", "Inactive"])[0]!,
+  };
+};
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!;
+    return range(len).map((): Person => {
+      return {
+        ...newPerson(),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      };
+    });
+  };
+
+  return makeDataLevel();
+}

package/src/libs/utils/make-nested-data.ts

@@ -0,0 +1,86 @@
+export const generateRickAndMortyData = (count: number) => {
+  const names = [
+    "Rick Sanchez",
+    "Morty Smith",
+    "Summer Smith",
+    "Beth Smith",
+    "Jerry Smith",
+    "Birdperson",
+    "Squanchy",
+    "Tammy Guetermann",
+    "Evil Morty",
+    "Pickle Rick",
+    "Snowball",
+    "Abradolf Lincler",
+  ];
+
+  const statuses = ["Alive", "Dead", "Unknown"];
+  const speciesList = ["Human", "Alien", "Humanoid", "Robot", "Cronenberg"];
+  const genders = ["Male", "Female", "unknown"];
+  const locations = [
+    "Earth (C-137)",
+    "Citadel of Ricks",
+    "Anatomy Park",
+    "Interdimensional Cable",
+    "Planet Squanch",
+    "Venzenulon 7",
+    "Nuptia 4",
+    "Immortality Field Resort",
+  ];
+  const types = ["Genetic experiment", "Superhuman", "Parasite", "Ghost"];
+  const origins = [...locations, "unknown"];
+
+  const formatDate = (date: Date) => {
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2);
+    const year = String(date.getFullYear());
+    return `${day}/${month}/${year}`;
+  };
+
+  const records = [];
+
+  for (let i = 1; i <= count; i++) {
+    const name = names[Math.floor(Math.random() * names.length)];
+    const status = statuses[Math.floor(Math.random() * statuses.length)];
+    const species = speciesList[Math.floor(Math.random() * speciesList.length)];
+    const gender = genders[Math.floor(Math.random() * genders.length)];
+    const originName = origins[Math.floor(Math.random() * origins.length)];
+    const locationName =
+      locations[Math.floor(Math.random() * locations.length)];
+    const type = types[Math.floor(Math.random() * types.length)];
+
+    const randomDate = new Date(
+      Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000
+    );
+    const joiningDate = formatDate(randomDate);
+    const salary = Math.floor(Math.random() * 1000000);
+
+    records.push({
+      id: i,
+      name,
+      status,
+      species,
+      type,
+      gender,
+      joiningDate,
+      salary,
+      origin: {
+        name: originName,
+        url: `https://rickandmortyapi.com/api/location/${
+          Math.floor(Math.random() * 30) + 1
+        }`,
+      },
+      location: {
+        name: locationName,
+        url: `https://rickandmortyapi.com/api/location/${
+          Math.floor(Math.random() * 30) + 1
+        }`,
+      },
+      image: `https://rickandmortyapi.com/api/character/avatar/${i}.jpeg`,
+      url: `https://rickandmortyapi.com/api/character/${i}`,
+      created: joiningDate,
+    });
+  }
+
+  return records;
+};

package/src/libs/utils/rows-data.ts

@@ -0,0 +1,251 @@
+export const getRowsData = [
+  {
+    id: 1,
+    name: "Employee 1",
+    department: "Marketing",
+    position: "Senior Manager",
+    email: "employee1@example.com",
+    phone: "+1-202-555-0101",
+    dateOfJoining: "2018-05-21",
+    salary: 75000,
+    performanceRating: "A",
+    location: "New York",
+    action: "Edit",
+    subRows: [
+      {
+        id: 1,
+        name: "Employee 1",
+        department: "Marketing",
+        position: "Senior Manager",
+        email: "employee1@example.com",
+        phone: "+1-202-555-0101",
+        dateOfJoining: "2018-05-21",
+        salary: 75000,
+        performanceRating: "A",
+        location: "New York",
+      },
+      {
+        id: 2,
+        name: "Employee 2",
+        department: "Finance",
+        position: "Accountant",
+        email: "employee2@example.com",
+        phone: "+1-202-555-0112",
+        dateOfJoining: "2020-09-15",
+        salary: 60000,
+        performanceRating: "B",
+        location: "Chicago",
+      },
+      {
+        id: 3,
+        name: "Employee 3",
+        department: "HR",
+        position: "HR Specialist",
+        email: "employee3@example.com",
+        phone: "+1-202-555-0133",
+        dateOfJoining: "2017-03-12",
+        salary: 58000,
+        performanceRating: "A",
+        location: "Boston",
+      },
+      {
+        id: 4,
+        name: "Employee 4",
+        department: "HR",
+        position: "Manager",
+        email: "employee4@example.com",
+        phone: "+1-202-555-0014",
+        dateOfJoining: "2022-02-18",
+        salary: 52740,
+        performanceRating: "C",
+        location: "Boston",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "Employee 2",
+    department: "Finance",
+    position: "Accountant",
+    email: "employee2@example.com",
+    phone: "+1-202-555-0112",
+    dateOfJoining: "2020-09-15",
+    salary: 60000,
+    performanceRating: "B",
+    location: "Chicago",
+    subRows: [
+      {
+        id: 1,
+        name: "Employee 1",
+        department: "Marketing",
+        position: "Senior Manager",
+        email: "employee1@example.com",
+        phone: "+1-202-555-0101",
+        dateOfJoining: "2018-05-21",
+        salary: 75000,
+        performanceRating: "A",
+        location: "New York",
+      },
+      {
+        id: 2,
+        name: "Employee 2",
+        department: "Finance",
+        position: "Accountant",
+        email: "employee2@example.com",
+        phone: "+1-202-555-0112",
+        dateOfJoining: "2020-09-15",
+        salary: 60000,
+        performanceRating: "B",
+        location: "Chicago",
+      },
+      {
+        id: 3,
+        name: "Employee 3",
+        department: "HR",
+        position: "HR Specialist",
+        email: "employee3@example.com",
+        phone: "+1-202-555-0133",
+        dateOfJoining: "2017-03-12",
+        salary: 58000,
+        performanceRating: "A",
+        location: "Boston",
+      },
+      {
+        id: 4,
+        name: "Employee 4",
+        department: "HR",
+        position: "Manager",
+        email: "employee4@example.com",
+        phone: "+1-202-555-0014",
+        dateOfJoining: "2022-02-18",
+        salary: 52740,
+        performanceRating: "C",
+        location: "Boston",
+      },
+    ],
+  },
+  {
+    id: 3,
+    name: "Employee 3",
+    department: "HR",
+    position: "HR Specialist",
+    email: "employee3@example.com",
+    phone: "+1-202-555-0133",
+    dateOfJoining: "2017-03-12",
+    salary: 58000,
+    performanceRating: "A",
+    location: "Boston",
+    subRows: [
+      {
+        id: 1,
+        name: "Employee 1",
+        department: "Marketing",
+        position: "Senior Manager",
+        email: "employee1@example.com",
+        phone: "+1-202-555-0101",
+        dateOfJoining: "2018-05-21",
+        salary: 75000,
+        performanceRating: "A",
+        location: "New York",
+      },
+      {
+        id: 2,
+        name: "Employee 2",
+        department: "Finance",
+        position: "Accountant",
+        email: "employee2@example.com",
+        phone: "+1-202-555-0112",
+        dateOfJoining: "2020-09-15",
+        salary: 60000,
+        performanceRating: "B",
+        location: "Chicago",
+      },
+      {
+        id: 3,
+        name: "Employee 3",
+        department: "HR",
+        position: "HR Specialist",
+        email: "employee3@example.com",
+        phone: "+1-202-555-0133",
+        dateOfJoining: "2017-03-12",
+        salary: 58000,
+        performanceRating: "A",
+        location: "Boston",
+      },
+      {
+        id: 4,
+        name: "Employee 4",
+        department: "HR",
+        position: "Manager",
+        email: "employee4@example.com",
+        phone: "+1-202-555-0014",
+        dateOfJoining: "2022-02-18",
+        salary: 52740,
+        performanceRating: "C",
+        location: "Boston",
+      },
+    ],
+  },
+  {
+    id: 4,
+    name: "Employee 4",
+    department: "HR",
+    position: "Manager",
+    email: "employee4@example.com",
+    phone: "+1-202-555-0014",
+    dateOfJoining: "2022-02-18",
+    salary: 52740,
+    performanceRating: "C",
+    location: "Boston",
+    subRows: [
+      {
+        id: 1,
+        name: "Employee 1",
+        department: "Marketing",
+        position: "Senior Manager",
+        email: "employee1@example.com",
+        phone: "+1-202-555-0101",
+        dateOfJoining: "2018-05-21",
+        salary: 75000,
+        performanceRating: "A",
+        location: "New York",
+      },
+      {
+        id: 2,
+        name: "Employee 2",
+        department: "Finance",
+        position: "Accountant",
+        email: "employee2@example.com",
+        phone: "+1-202-555-0112",
+        dateOfJoining: "2020-09-15",
+        salary: 60000,
+        performanceRating: "B",
+        location: "Chicago",
+      },
+      {
+        id: 3,
+        name: "Employee 3",
+        department: "HR",
+        position: "HR Specialist",
+        email: "employee3@example.com",
+        phone: "+1-202-555-0133",
+        dateOfJoining: "2017-03-12",
+        salary: 58000,
+        performanceRating: "A",
+        location: "Boston",
+      },
+      {
+        id: 4,
+        name: "Employee 4",
+        department: "HR",
+        position: "Manager",
+        email: "employee4@example.com",
+        phone: "+1-202-555-0014",
+        dateOfJoining: "2022-02-18",
+        salary: 52740,
+        performanceRating: "C",
+        location: "Boston",
+      },
+    ],
+  },
+];

package/src/main.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/types/common.ts

@@ -0,0 +1,30 @@
+export interface defaultColumnsProps {
+  id: number;
+  name: string;
+  department: string;
+  position: string;
+  email: string;
+  location: string;
+  phone: string;
+  dateOfJoining: string;
+  salary: number;
+  performanceRating: string;
+  subRows?: any;
+}
+
+export interface amountFormatProps {
+  amount: number;
+  decimal?: boolean;
+  removeFloat?: boolean;
+  compactFormat?: "crore" | "10lakh" | "lakh";
+}
+
+export interface formatDateProps {
+  date: string;
+  style: string;
+}
+
+export type alignProps = "left" | "center" | "right";
+export interface align {
+  align: alignProps;
+}

package/src/types/table-options.ts

@@ -0,0 +1,38 @@
+import {
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+  ExpandedState,
+} from "@tanstack/react-table";
+import { Dispatch, SetStateAction } from "react";
+
+export interface CraftTableOptionsProps {
+  sorting: SortingState;
+  setSorting: Dispatch<SetStateAction<SortingState>>;
+  pagination: PaginationState;
+  setPagination: Dispatch<SetStateAction<PaginationState>>;
+  rowSelection: RowSelectionState;
+  setRowSelection: Dispatch<SetStateAction<RowSelectionState>>;
+  isCompactTable?: boolean;
+  setIsCompactTable?: Dispatch<SetStateAction<boolean>>;
+  expanded: ExpandedState;
+  setExpanded: Dispatch<SetStateAction<ExpandedState>>;
+}
+
+export interface CraftTableFeatureProps {
+  enableSorting?: boolean;
+  enableServerSidePagination?: boolean;
+  enableServerSideSorting?: boolean;
+  enableRowSelection?: boolean;
+  enableColumnResizing?: boolean;
+  enableColumnReordering?: boolean;
+  enableColumnPinning?: boolean;
+  enableMultiColumnSorting?: boolean;
+
+  // custom features not provided by react table
+  enableTopbar?: boolean;
+  enableWordBreakAll?: boolean;
+  stickyHeader?: boolean;
+  compactTable?: boolean;
+  striped?: boolean;
+}

package/src/types/table.ts

@@ -0,0 +1,65 @@
+import {
+  ColumnDef,
+  ColumnOrderState,
+  Header,
+  Row,
+  Table,
+} from "@tanstack/react-table";
+import {
+  CraftTableFeatureProps,
+  CraftTableOptionsProps,
+} from "./table-options";
+import React from "react";
+
+export interface CraftTablePaginationProps {
+  totalRows?: number;
+  rowsPerPageArray?: number[];
+  showPagination?: boolean;
+  paginationPosition?: "top" | "bottom";
+  paginationView?: "full" | "compact";
+}
+
+interface LoadingOptionsProps {
+  isLoading: boolean;
+  loaderText?: string;
+  loadingComponent?: React.ReactNode;
+}
+
+export interface TopbarOptionsProps {
+  leftSideComponent?: React.ReactNode;
+  rightSideComponent?: React.ReactNode;
+  showFullscreenToggle?: boolean;
+  showColumnToggle?: boolean;
+  showCompactTableToggle?: boolean;
+  showChangeLayoutToggle?: boolean;
+  viewMoreToggle?: boolean;
+  showAddNewButton?: boolean;
+  showSearch?: boolean;
+  showFilter?: boolean;
+  showCustomizationToggle?: boolean;
+}
+
+export interface CraftTableProps<T> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  tableStates: CraftTableOptionsProps;
+  paginationOptions?: CraftTablePaginationProps;
+  featureOptions?: CraftTableFeatureProps;
+  nestedComponent?: React.ComponentType<{ row: Row<T> }>;
+  loadingOptions?: LoadingOptionsProps;
+  topbarOptions?: TopbarOptionsProps;
+}
+
+export interface CraftTableComponentProps<T> {
+  table: Table<T>;
+  featureOptions: CraftTableFeatureProps;
+  NestedComponent?: React.ComponentType<{ row: Row<T> }>;
+  columnOrder: ColumnOrderState;
+  setColumnOrder: React.Dispatch<React.SetStateAction<ColumnOrderState>>;
+  isCompactTable: boolean;
+}
+
+export interface TableHeaderProps<T> {
+  header: Header<T, unknown>;
+  featureOptions: CraftTableFeatureProps;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />