rez-table-listing-mui 0.0.0

package/src/components/topbar/index.tsx

@@ -0,0 +1,226 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  ChangeLayoutIcon,
+  SearchIcon,
+  SortingIcon,
+  CustomizationIcon,
+  HideColumnIcon,
+} from "../../assets/svg";
+import { Popover } from "@mui/material";
+import LayoutSelector from "../table-change-layout";
+import useOutsideClick from "../../libs/hooks/useOutsideClick";
+import { Table } from "@tanstack/react-table";
+import { TopbarOptionsProps } from "../../types/table";
+import "./index.scss";
+import ViewMore from "../viewmore";
+import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
+import SortPopover from "../sorting-modal.tsx";
+import ColumnToggle from "../columm-visibility-modal/index.tsx";
+
+interface TopbarProps<T> {
+  table: Table<T>;
+  fullscreenToggle: () => void;
+  isCompactTable: boolean;
+  setIsCompactTable: React.Dispatch<React.SetStateAction<boolean>>;
+  paginationComponent?: React.ReactNode;
+  topbarOptions?: TopbarOptionsProps;
+  columnOrder?: string[];
+  setColumnOrder?: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+function Topbar<T>({
+  table,
+  isCompactTable,
+  fullscreenToggle,
+  setIsCompactTable,
+  paginationComponent,
+  topbarOptions,
+}: TopbarProps<T>) {
+  const [wrapCell, setWrapCell] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
+  const [groupBy, setGroupBy] = useState<string>("None");
+
+  const [showColumnHiding, setShowColumnHiding] = useState(false);
+  const [layoutAnchorEl, setLayoutAnchorEl] = useState<null | HTMLElement>(
+    null
+  );
+  const [selectedLayout, setSelectedLayout] = useState("Table");
+  const [columnAnchorEl, setColumnAnchorEl] = useState<HTMLElement | null>(
+    null
+  );
+  const [columnOrder, setColumnOrder] = useState<string[]>(
+    table.getAllLeafColumns().map((col) => col.id)
+  );
+
+  console.log("showColumnHiding", showColumnHiding); //only for built purpose-> remove it later
+
+  // sync column order with table instance
+  useEffect(() => {
+    table.setColumnOrder(columnOrder);
+  }, [columnOrder]);
+
+  const {
+    leftSideComponent,
+    rightSideComponent,
+    showColumnToggle,
+    showChangeLayoutToggle,
+    viewMoreToggle,
+    showSearch,
+    showFilter,
+    showCustomizationToggle,
+  } = topbarOptions ?? {};
+
+  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  useOutsideClick({
+    ref: dropdownRef,
+    handler: () => setShowColumnHiding(false),
+  });
+
+  const handleLayoutIconClick = (event: React.MouseEvent<HTMLElement>) => {
+    setLayoutAnchorEl(event.currentTarget);
+  };
+
+  const handleLayoutSelect = (layout: string) => {
+    setSelectedLayout(layout);
+    setLayoutAnchorEl(null);
+  };
+
+  return (
+    <div className="ts-topbar">
+      <div className="tabs-section">{leftSideComponent}</div>
+
+      <div className="right-section">
+        {rightSideComponent}
+        {paginationComponent}
+
+        {showSearch && (
+          <div className="search ts--button" title="Search">
+            <SearchIcon />
+          </div>
+        )}
+
+        {showChangeLayoutToggle && (
+          <>
+            <div className="change-layout ts--button" title="Layout">
+              <div onClick={handleLayoutIconClick}>
+                <ChangeLayoutIcon />
+              </div>
+            </div>
+            <Popover
+              open={Boolean(layoutAnchorEl)}
+              anchorEl={layoutAnchorEl}
+              onClose={() => setLayoutAnchorEl(null)}
+              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+              container={fullscreenContainer}
+              // transformOrigin={{ vertical: "top", horizontal: "left" }}
+              // PaperProps={{
+              //   sx: {
+              //     mt: 2,
+              //   },
+              // }}
+              sx={{
+                mt: 2.2,
+              }}
+            >
+              <LayoutSelector
+                onSelect={handleLayoutSelect}
+                selectedLayout={selectedLayout}
+              />
+            </Popover>
+          </>
+        )}
+
+        {showColumnToggle && (
+          <>
+            <div
+              className="hide-column ts--button"
+              onClick={(e) => setColumnAnchorEl(e.currentTarget)}
+              title="Column"
+            >
+              <HideColumnIcon />
+            </div>
+            <ColumnToggle
+              anchorEl={columnAnchorEl}
+              onClose={() => setColumnAnchorEl(null)}
+              table={table}
+              columnOrder={columnOrder}
+              setColumnOrder={setColumnOrder}
+            />
+          </>
+        )}
+
+        {showFilter && (
+          <>
+            <div
+              className="filter ts--button"
+              title="Sort"
+              onClick={(e) => setSortAnchorEl(e.currentTarget)}
+            >
+              <SortingIcon />
+            </div>
+            <SortPopover
+              anchorEl={sortAnchorEl}
+              onClose={() => setSortAnchorEl(null)}
+              columns={table.getAllLeafColumns().map((col) => ({
+                id: col.id,
+                label: (col.columnDef.meta as any)?.label || col.id,
+              }))}
+              onChange={(sortingRules) => table.setSorting(sortingRules)}
+            />
+          </>
+        )}
+
+        {showCustomizationToggle && (
+          <div className="customization ts--button" title="Filter">
+            <CustomizationIcon />
+          </div>
+        )}
+
+        {viewMoreToggle && (
+          <div className="view-more ts--button" title="View More">
+            <ViewMore
+              wrapCell={wrapCell}
+              onWrapCellToggle={() => setWrapCell((prev) => !prev)}
+              compactMode={isCompactTable}
+              onCompactToggle={(value: string) =>
+                setIsCompactTable(value === "Compact")
+              }
+              isFullscreen={isFullscreen}
+              onFullscreenToggle={() => {
+                fullscreenToggle();
+                setIsFullscreen((prev) => !prev);
+              }}
+              groupBy={groupBy}
+              onGroupByChange={(value: string) => setGroupBy(value)}
+            />
+          </div>
+        )}
+
+        {/* {showWrapCell && (
+          <div
+            className="wrap-cell ts--button"
+            onClick={() => setWrapCell((prev) => !prev)}
+            title="Wrap Cell"
+          >
+            <WrapCellIcon />
+          </div>
+        )} */}
+
+        {/* {showAddNewButton && (
+          <div
+            className="add-new-button ts--button"
+            title="Add New"
+            onClick={() => {}}
+          >
+            <AddNewButtonIcon />
+          </div>
+        )} */}
+      </div>
+    </div>
+  );
+}
+
+export default Topbar;

package/src/components/viewmore/index.tsx

@@ -0,0 +1,171 @@
+import React from "react";
+import {
+  Popover,
+  Typography,
+  Box,
+  MenuItem,
+  Select,
+  IconButton,
+  Switch as MUISwitch,
+} from "@mui/material";
+import { CloseIcon, ViewMoreIcon } from "../../assets/svg";
+import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
+
+interface ViewMorePopoverProps {
+  wrapCell: boolean;
+  onWrapCellToggle: () => void;
+  compactMode: boolean;
+  onCompactToggle: (value: string) => void;
+  isFullscreen: boolean;
+  onFullscreenToggle: () => void;
+  groupBy: string;
+  onGroupByChange: (value: string) => void;
+}
+
+const ViewMore = ({
+  wrapCell,
+  onWrapCellToggle,
+  compactMode,
+  onCompactToggle,
+  isFullscreen,
+  onFullscreenToggle,
+  groupBy,
+  onGroupByChange,
+}: ViewMorePopoverProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const open = Boolean(anchorEl);
+  const { container: fullscreenContainer } = useFullscreenPopoverContainer();
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <div onClick={handleClick}>
+        <ViewMoreIcon />
+      </div>
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        container={fullscreenContainer}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        PaperProps={{
+          sx: {
+            mt: 2.3,
+            padding: 3,
+            width: 380,
+            borderRadius: 1,
+            boxShadow: 4,
+          },
+        }}
+      >
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          px={2}
+          py={2}
+          sx={{
+            backgroundColor: "#F9FAFB",
+            // borderBottom: "1px solid #E0E0E0",
+            // borderTopLeftRadius: 4,
+            // borderTopRightRadius: 4,
+            margin: "-24px -24px 24px -24px",
+          }}
+        >
+          <Typography fontSize="18px" fontWeight={400} color="#0C2033">
+            View
+          </Typography>
+          <IconButton size="small" onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+
+        {/* Wrap Cell */}
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={2}
+        >
+          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+            Wrap Cell
+          </Typography>
+          <MUISwitch checked={wrapCell} onChange={onWrapCellToggle} />
+        </Box>
+
+        {/* List View */}
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={2}
+        >
+          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+            List View
+          </Typography>
+          <Select
+            size="small"
+            value={compactMode ? "Compact" : "Comfy"}
+            onChange={(e) => onCompactToggle(e.target.value)}
+            sx={{
+              minWidth: 120,
+              fontWeight: 400,
+              color: "#000",
+              fontSize: "13px",
+            }}
+          >
+            <MenuItem value="Comfy">Comfy</MenuItem>
+            <MenuItem value="Compact">Compact</MenuItem>
+          </Select>
+        </Box>
+
+        {/* Group By */}
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          mb={2}
+        >
+          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+            Group By
+          </Typography>
+          <Select
+            size="small"
+            value={groupBy}
+            onChange={(e) => onGroupByChange(e.target.value)}
+            sx={{
+              minWidth: 120,
+              fontWeight: 400,
+              color: "#000",
+              fontSize: "13px",
+            }}
+          >
+            <MenuItem value="None">None</MenuItem>
+            <MenuItem value="Status">Status</MenuItem>
+            <MenuItem value="Owner">Owner</MenuItem>
+          </Select>
+        </Box>
+
+        {/* Fullscreen */}
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography fontSize="14px" fontWeight={400} color="#000000DE">
+            Fullscreen
+          </Typography>
+          <MUISwitch checked={isFullscreen} onChange={onFullscreenToggle} />
+        </Box>
+      </Popover>
+    </>
+  );
+};
+
+export default ViewMore;

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as TableWrapper } from "./components/index-table";
+export { useCraftTable } from "./libs/hooks/useCraftTable";
+export * from "./types/table";
+export * from "./types/table-options";

package/src/libs/hooks/useCraftTable.tsx

@@ -0,0 +1,37 @@
+import {
+  ExpandedState,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import { useState } from "react";
+import { CraftTableOptionsProps } from "../../types/table-options";
+
+export function useCraftTable() {
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 25,
+  });
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [expanded, setExpanded] = useState<ExpandedState>({});
+
+  if (pagination.pageIndex < 0 || pagination.pageSize <= 0) {
+    throw new Error(
+      "Invalid pagination values: pageIndex and pageSize must be positive."
+    );
+  }
+
+  const craftTableOptions: CraftTableOptionsProps = {
+    sorting: sorting,
+    setSorting: setSorting,
+    pagination: pagination,
+    setPagination: setPagination,
+    rowSelection: rowSelection,
+    setRowSelection: setRowSelection,
+    expanded: expanded,
+    setExpanded: setExpanded,
+  };
+
+  return craftTableOptions;
+}

package/src/libs/hooks/useDefaultColumns.tsx

@@ -0,0 +1,96 @@
+import { ColumnDef } from "@tanstack/react-table";
+import React from "react";
+import { Person } from "../utils/make-hierar-data";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+export const useDefaultColumns = () => {
+  const defaultColumns = React.useMemo<ColumnDef<Person>[]>(
+    () => [
+      {
+        header: "First Name",
+        id: "firstName",
+        accessorKey: "firstName",
+        meta: { label: "First Name" },
+        // header: ({ table }) => (
+        //   <>
+        //     <button
+        //       {...{
+        //         onClick: table.getToggleAllRowsExpandedHandler(),
+        //       }}
+        //     >
+        //       {table.getIsAllRowsExpanded() ? "👇" : "👉"}
+        //     </button>{" "}
+        //     First Name
+        //   </>
+        // ),
+        cell: ({ row, getValue }) => {
+          return (
+            <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+              {row.getCanExpand() ? (
+                <button
+                  style={{
+                    // marginRight: "0.8rem",
+                    cursor: "pointer",
+                    background: "none",
+                    border: "none",
+                  }}
+                  onClick={() => {
+                    row.getToggleExpandedHandler()();
+                  }}
+                >
+                  {row.getIsExpanded() ? (
+                    <ExpandMoreIcon />
+                  ) : (
+                    <ChevronRightIcon />
+                  )}{" "}
+                </button>
+              ) : (
+                <span style={{ marginRight: "0.8rem" }}></span>
+              )}
+              {getValue<boolean>()}
+            </div>
+          );
+        },
+      },
+      {
+        header: "Last Name",
+        accessorKey: "lastName",
+        size: 100,
+        meta: { label: "Last Name" },
+      },
+      {
+        header: "Age",
+        accessorKey: "age",
+        size: 100,
+        meta: { label: "Age" },
+      },
+      {
+        header: "Visits",
+        accessorKey: "visits",
+        size: 150,
+        meta: { label: "Visits" },
+      },
+      {
+        header: "Progress",
+        accessorKey: "progress",
+        size: 150,
+        meta: { label: "Progress" },
+      },
+      {
+        header: "Status",
+        accessorKey: "status",
+        meta: { label: "Status" },
+      },
+      {
+        header: "Department",
+        accessorKey: "department",
+        size: 150,
+        meta: { label: "Department" },
+      },
+    ],
+    []
+  );
+
+  return { defaultColumns };
+};

package/src/libs/hooks/useFullScreen.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+export function useFullscreenPopoverContainer() {
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(
+    !!document.fullscreenElement
+  );
+  const [container, setContainer] = useState<Element | undefined>(
+    document.fullscreenElement ?? undefined
+  );
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      const el = document.fullscreenElement ?? undefined;
+      setIsFullscreen(!!el);
+      setContainer(el);
+    };
+
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, []);
+
+  return { isFullscreen, container };
+}

package/src/libs/hooks/useOutsideClick.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from "react";
+
+interface OutsideClickHandlerProps {
+  ref: React.RefObject<HTMLElement>;
+  handler: () => void;
+}
+
+const useOutsideClick = ({ ref, handler }: OutsideClickHandlerProps) => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, handler]);
+};
+
+export default useOutsideClick;

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

@@ -0,0 +1,18 @@
+import { formatAmount } from "./amount-format";
+import { formatDate } from "./date-format";
+
+export const DataFormat = (value: any, type: string) => {
+  if (!value) return "";
+
+  switch (type) {
+    case "date":
+      return formatDate({ date: value, style: "DD-MMM-YYYY" });
+    case "amount":
+      return formatAmount({
+        amount: value,
+        decimal: false,
+      });
+    default:
+      return value;
+  }
+};

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

@@ -0,0 +1,70 @@
+import { amountFormatProps } from "../../types/common";
+
+interface compactAmountProps {
+  finalAmount: number;
+  format: string;
+}
+
+export const formatAmount = ({
+  amount,
+  decimal,
+  removeFloat,
+  compactFormat,
+}: amountFormatProps) => {
+  let Amt = typeof amount === "string" ? parseFloat(amount) : amount;
+
+  if (isNaN(Amt || amount)) return decimal ? "0" : "₹0.00";
+
+  const isCompactAmount = ({ finalAmount, format }: compactAmountProps) => {
+    const options: Intl.NumberFormatOptions = {
+      style: decimal ? "decimal" : "currency",
+      minimumFractionDigits: decimal && !removeFloat ? 2 : undefined,
+      currency: !decimal ? "INR" : undefined,
+    };
+
+    if (format) {
+      let croreCondition =
+        (format === "crore" || "10lakh" || "lakh") && amount >= 10000000;
+      let tenlakhCondition =
+        (format === "10lakh" || "lakh") && amount >= 1000000;
+      let lakhCondition = format === "lakh" && amount >= 100000;
+
+      if (croreCondition) {
+        // Convert to Crores
+        amount /= 10000000;
+        return decimal
+          ? Math.floor(amount * 100) / 100 + " Cr"
+          : "₹" + Math.floor(amount * 100) / 100 + " Cr";
+      } else if (tenlakhCondition) {
+        // Convert to Lakhs if more than 10 Lakhs
+        amount /= 1000000;
+        return decimal
+          ? Math.floor(amount * 1000) / 100 + " L"
+          : "₹" + Math.floor(amount * 1000) / 100 + " L";
+      } else if (lakhCondition) {
+        // Convert to Lakhs if more than 1 Lakh
+        amount /= 100000;
+        return decimal
+          ? Math.floor(amount * 100) / 100 + " L"
+          : "₹" + Math.floor(amount * 100) / 100 + " L";
+      }
+    }
+
+    if (decimal) return finalAmount?.toLocaleString("en-IN", options);
+
+    return finalAmount?.toLocaleString("en-IN", options);
+  };
+
+  // Two options for more control when to use compact amount
+  if (compactFormat) {
+    return isCompactAmount({
+      finalAmount: Amt,
+      format: compactFormat,
+    });
+  } else {
+    return isCompactAmount({
+      finalAmount: Amt,
+      format: "",
+    });
+  }
+};