rez-table-listing-mui 0.0.0

package/src/components/columm-visibility-modal/column-list-item.tsx

@@ -0,0 +1,44 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { Box, Typography } from "@mui/material";
+import {
+  DragandDrogIcon,
+  VisibilityIcon,
+  VisibilityOffIcon,
+} from "../../assets/svg";
+import { CSS } from "@dnd-kit/utilities";
+
+const DraggableColumn = ({
+  column,
+  onToggle,
+}: {
+  column: any;
+  onToggle: () => void;
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: column.id,
+    });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const isVisible = column.getIsVisible();
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} className="column-row">
+      <Box {...listeners} className="drag-icon">
+        <DragandDrogIcon />
+      </Box>
+      <Typography>
+        {(column.columnDef.meta as any)?.label || column.id}
+      </Typography>
+      <Box onClick={onToggle} className="visibility-icon">
+        {isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+      </Box>
+    </div>
+  );
+};
+
+export default DraggableColumn;

package/src/components/columm-visibility-modal/index.scss

@@ -0,0 +1,72 @@
+.column-manager {
+  width: 320px;
+  padding: 0;
+  background-color: var(--white);
+
+  .header {
+    width: 100%;
+    padding: 10px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 400;
+    font-size: 18px;
+    background-color: #fbfbfc;
+    color: #0c2033;
+    box-sizing: border-box;
+  }
+
+  .content-wrapper {
+    padding: 10px;
+  }
+
+  .list-section {
+    margin-top: 10px;
+
+    .list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 12px;
+      font-weight: 500;
+      color: #888888;
+      margin-bottom: 8px;
+      padding: 10px 4px;
+    }
+
+    .column-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 9px 8px;
+      border-radius: 6px;
+      transition: background-color 0.2s ease;
+      cursor: grab;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+
+      &.hidden {
+        opacity: 0.6;
+      }
+
+      .drag-icon {
+        cursor: grab;
+        margin-right: 14px;
+        color: #888;
+      }
+
+      .visibility-icon {
+        cursor: pointer;
+        color: #505050;
+      }
+
+      .MuiTypography-root {
+        flex-grow: 1;
+        font-size: 14px;
+        font-weight: 400;
+      }
+    }
+  }
+}

package/src/components/columm-visibility-modal/index.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import {
+  DndContext,
+  closestCenter,
+  useSensor,
+  useSensors,
+  MouseSensor,
+  TouchSensor,
+  KeyboardSensor,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { Popover, IconButton, Typography, Box } from "@mui/material";
+import { Table } from "@tanstack/react-table";
+import DraggableColumn from "./column-list-item";
+import "./index.scss";
+import { CloseIcon } from "../../assets/svg";
+
+interface ColumnToggleProps<T> {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  table: Table<T>;
+  columnOrder: string[];
+  setColumnOrder: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const ColumnToggle = <T,>({
+  anchorEl,
+  onClose,
+  table,
+  columnOrder,
+  setColumnOrder,
+}: ColumnToggleProps<T>) => {
+  const open = Boolean(anchorEl);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
+
+  const allColumns = table.getAllLeafColumns();
+
+  const shownColumns = columnOrder
+    .map((id) => allColumns.find((col) => col.id === id))
+    .filter((col) => col?.getIsVisible());
+
+  const hiddenColumns = columnOrder
+    .map((id) => allColumns.find((col) => col.id === id))
+    .filter((col) => col && !col.getIsVisible());
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) return;
+
+    const activeCol = table.getColumn(active.id as string);
+    const overCol = table.getColumn(over.id as string);
+    if (!activeCol || !overCol) return;
+
+    const activeVisible = activeCol.getIsVisible();
+    const overVisible = overCol.getIsVisible();
+
+    if (activeVisible !== overVisible) {
+      activeCol.toggleVisibility();
+    }
+
+    const oldIndex = columnOrder.indexOf(active.id as string);
+    const newIndex = columnOrder.indexOf(over.id as string);
+    setColumnOrder(arrayMove(columnOrder, oldIndex, newIndex));
+  };
+
+  const toggleVisibility = (columnId: string) => {
+    const col = table.getColumn(columnId);
+    col?.toggleVisibility();
+  };
+
+  const handleHideAll = () => {
+    allColumns.forEach((col) => col.toggleVisibility(false));
+  };
+
+  const handleShowAll = () => {
+    allColumns.forEach((col) => col.toggleVisibility(true));
+  };
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+      sx={{ width: "600px" }}
+    >
+      <div className="column-manager">
+        <div className="header">
+          <Typography variant="h6">Column</Typography>
+          <IconButton size="small" onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </div>
+
+        <div className="content-wrapper">
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <div className="list-section">
+              <div className="list-header">
+                <Typography variant="subtitle2">Shown in List</Typography>
+                {/* <button onClick={handleHideAll}>Hide All</button> */}
+                <Box
+                  onClick={handleHideAll}
+                  fontStyle={{
+                    cursor: "pointer",
+                    color: "#C5C5C5",
+                    fontSize: "12px",
+                  }}
+                >
+                  Hide All
+                </Box>
+              </div>
+              <SortableContext
+                items={shownColumns.map((col) => col!.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                {shownColumns.map((col) => (
+                  <DraggableColumn
+                    key={col!.id}
+                    column={col!}
+                    onToggle={() => toggleVisibility(col!.id)}
+                  />
+                ))}
+              </SortableContext>
+            </div>
+
+            <div className="list-section">
+              <div className="list-header">
+                <Typography variant="subtitle2">Hidden in List</Typography>
+                {/* <button onClick={handleShowAll}>Show All</button> */}
+                <Box
+                  onClick={handleShowAll}
+                  fontStyle={{
+                    cursor: "pointer",
+                    color: "#C5C5C5",
+                    fontSize: "12px",
+                  }}
+                >
+                  Show All
+                </Box>
+              </div>
+              <SortableContext
+                items={hiddenColumns.map((col) => col!.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                {hiddenColumns.map((col) => (
+                  <DraggableColumn
+                    key={col!.id}
+                    column={col!}
+                    onToggle={() => toggleVisibility(col!.id)}
+                  />
+                ))}
+              </SortableContext>
+            </div>
+          </DndContext>
+        </div>
+      </div>
+    </Popover>
+  );
+};
+
+export default ColumnToggle;

package/src/components/common/index.scss

@@ -0,0 +1,11 @@
+.records-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  h3 {
+    color: var(--grey-900);
+    font-size: 2rem;
+    font-family: var(--fira-700);
+  }
+}

package/src/components/common/index.tsx

@@ -0,0 +1,11 @@
+import "./index.scss";
+
+function ConditionalData() {
+  return (
+    <div className="records-container">
+      <h3>No records</h3>
+    </div>
+  );
+}
+
+export default ConditionalData;

package/src/components/dropdown/index.scss

@@ -0,0 +1,17 @@
+.ts__table__container {
+  .ts-dropdown {
+    cursor: default;
+    position: absolute;
+    z-index: 9;
+    top: 1.5rem;
+
+    .ts-dropdown-content {
+      background-color: #fff;
+      border-radius: 0.25rem;
+      border: 1px solid #e5e7eb;
+      box-shadow: 0 2px 3px 0 rgb(0 0 0 / 0.1), 0 2px 4px 0 rgb(0 0 0 / 0.1);
+      padding: 0.5rem 0.75rem;
+      min-width: 12rem;
+    }
+  }
+}

package/src/components/dropdown/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import "./index.scss";
+
+interface DropdownMenuProps {
+  children: React.ReactNode;
+  position?: "left" | "right";
+}
+
+const DropdownMenu = ({ children, position = "left" }: DropdownMenuProps) => {
+  let props: React.HTMLAttributes<HTMLDivElement> = {
+    className: "ts-dropdown",
+  };
+
+  if (position === "left") {
+    props = { ...props, style: { left: "0rem" } };
+  } else if (position === "right") {
+    props = { ...props, style: { right: "0rem" } };
+  }
+
+  return (
+    <div {...props}>
+      <div className="ts-dropdown-content">{children}</div>
+    </div>
+  );
+};
+
+export default DropdownMenu;

package/src/components/index-table.tsx

@@ -0,0 +1,266 @@
+import {
+  ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import "./index.scss";
+import { useEffect, useRef, useState } from "react";
+import {
+  CraftTablePaginationProps,
+  CraftTableProps,
+  TopbarOptionsProps,
+} from "../types/table";
+import { CraftTableFeatureProps } from "../types/table-options";
+import { LoaderAnimation } from "../assets/svg";
+import Topbar from "./topbar";
+import DefaultPagination from "./pagination/default";
+import TableDND from "./table-dnd";
+import Table from "./table";
+
+function TableWrapper<T>({
+  data = [],
+  columns = [],
+  tableStates,
+  paginationOptions,
+  featureOptions,
+  topbarOptions,
+  nestedComponent,
+  loadingOptions = {
+    isLoading: false,
+  },
+}: 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 [newColumns] = useState<ColumnDef<T>[]>(() =>
+    columns.map((col, index) => ({
+      ...col,
+      id:
+        "accessorKey" in col
+          ? (col as { accessorKey: string }).accessorKey
+          : `col_${index}`,
+    }))
+  );
+
+  const [columnOrder, setColumnOrder] = useState<string[]>(() =>
+    newColumns.map((c) => c.id!)
+  );
+
+  const [isCompactTable, setIsCompactTable] = useState<boolean>(
+    featureOptions?.compactTable ?? false
+  );
+
+  const tableRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setIsCompactTable(featureOptions?.compactTable ?? false);
+  }, [featureOptions?.compactTable]);
+
+  const craftPaginationOptions: CraftTablePaginationProps = {
+    showPagination: true,
+    paginationPosition: "bottom",
+    paginationView: "full",
+
+    ...paginationOptions,
+  };
+
+  const totalRows = craftPaginationOptions?.totalRows ?? data.length;
+  const rowsPerPageArray = craftPaginationOptions?.rowsPerPageArray ?? [
+    25, 50, 100, 150,
+  ];
+  const craftTopbarOptions: TopbarOptionsProps = {
+    showColumnToggle: true,
+    showCompactTableToggle: true,
+    showFullscreenToggle: true,
+    showChangeLayoutToggle: true,
+    viewMoreToggle: true,
+    showAddNewButton: true,
+    showSearch: true,
+    showFilter: true,
+    showCustomizationToggle: true,
+
+    // Add other conditions above topbarOptions
+    ...topbarOptions,
+  };
+
+  const craftFeatureOptions: CraftTableFeatureProps = {
+    enableTopbar: true,
+    enableSorting: true,
+    enableServerSidePagination: false,
+    enableServerSideSorting: false,
+    enableRowSelection: false,
+    enableColumnResizing: true,
+    enableColumnReordering: true,
+    enableColumnPinning: true,
+    enableMultiColumnSorting: true,
+    compactTable: false,
+    stickyHeader: true,
+    enableWordBreakAll: false,
+    striped: false,
+
+    // Add other conditions above featureOptions
+    ...featureOptions,
+  };
+
+  const {
+    enableTopbar,
+    enableRowSelection,
+    enableServerSidePagination,
+    enableServerSideSorting,
+    enableSorting,
+    enableColumnResizing,
+    enableColumnReordering,
+    enableColumnPinning,
+    // enableMultiColumnSorting,
+  } = craftFeatureOptions;
+
+  const {
+    sorting,
+    setSorting,
+    pagination,
+    setPagination,
+    rowSelection,
+    setRowSelection,
+    expanded,
+    setExpanded,
+  } = tableStates;
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      pagination,
+      rowSelection,
+      columnOrder,
+      expanded,
+    },
+
+    getCoreRowModel: getCoreRowModel(),
+
+    /** Sorting options start here */
+    enableSorting: enableSorting,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    manualSorting: enableServerSideSorting,
+    // isMultiSortEvent: () => enableMultiColumnSorting || false,
+    /** Sorting options end here */
+
+    /** Pagination options start here */
+    getPaginationRowModel: getPaginationRowModel(),
+    onPaginationChange: setPagination,
+    rowCount: totalRows,
+    manualPagination: enableServerSidePagination,
+    /** Pagination options end here */
+
+    /** Row selection options start here */
+    enableRowSelection: enableRowSelection,
+    onRowSelectionChange: setRowSelection,
+    /** Row selection options end here */
+
+    /** Column Sizing options start here */
+    enableColumnResizing: enableColumnResizing,
+    columnResizeDirection: "ltr",
+    columnResizeMode: "onChange",
+    /** Column Sizing options end here */
+
+    /** Column Ordering options start here */
+    onColumnOrderChange: setColumnOrder,
+    /** Column Ordering options end here */
+
+    /** Column Pinning options end here */
+    enableColumnPinning: enableColumnPinning,
+    /** Column Pinning options end here */
+
+    /** Row expanding options start here */
+    getExpandedRowModel: getExpandedRowModel(),
+    onExpandedChange: setExpanded,
+    getSubRows: (row) => (row as { subRows?: T[] }).subRows ?? [],
+    /** Row expanding options end here */
+  });
+
+  const { isLoading, loadingComponent, loaderText } = loadingOptions;
+
+  const handleFullscreenToggle = () => {
+    if (!document.fullscreenElement) {
+      tableRef.current?.requestFullscreen().catch((err) => {
+        console.error("Error attempting to enable fullscreen mode:", err);
+      });
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  return (
+    <div className="ts__table__container" ref={tableRef}>
+      {isLoading ? (
+        loadingComponent ?? (
+          <div className="ts__loader">
+            <LoaderAnimation />
+            {loaderText && <p>{loaderText}</p>}
+          </div>
+        )
+      ) : (
+        <>
+          {enableTopbar && (
+            <Topbar
+              table={table}
+              topbarOptions={craftTopbarOptions}
+              isCompactTable={isCompactTable}
+              setIsCompactTable={setIsCompactTable}
+              fullscreenToggle={handleFullscreenToggle}
+              paginationComponent={
+                craftPaginationOptions?.showPagination === true &&
+                craftPaginationOptions?.paginationPosition === "top" ? (
+                  <DefaultPagination
+                    table={table}
+                    rowsPerPageArray={rowsPerPageArray}
+                    paginationOptions={craftPaginationOptions}
+                  />
+                ) : null
+              }
+            />
+          )}
+
+          <div className="ts__table__wrapper">
+            {enableColumnReordering ? (
+              <TableDND
+                table={table}
+                columnOrder={columnOrder}
+                featureOptions={craftFeatureOptions}
+                NestedComponent={nestedComponent}
+                setColumnOrder={setColumnOrder}
+                isCompactTable={isCompactTable}
+              />
+            ) : (
+              <Table
+                table={table}
+                featureOptions={craftFeatureOptions}
+                NestedComponent={nestedComponent}
+                columnOrder={columnOrder}
+                setColumnOrder={setColumnOrder}
+                isCompactTable={isCompactTable}
+              />
+            )}
+          </div>
+
+          {craftPaginationOptions?.showPagination === true &&
+          craftPaginationOptions?.paginationPosition === "bottom" ? (
+            <DefaultPagination
+              table={table}
+              rowsPerPageArray={rowsPerPageArray}
+              paginationOptions={craftPaginationOptions}
+            />
+          ) : null}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default TableWrapper;