rez-table-listing-mui 0.0.0

package/src/components/sorting-modal.tsx/index.tsx

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import {
+  Popover,
+  Box,
+  IconButton,
+  MenuItem,
+  Select,
+  Typography,
+  Button,
+} from "@mui/material";
+import {
+  DndContext,
+  closestCenter,
+  useSensor,
+  useSensors,
+  MouseSensor,
+  TouchSensor,
+  KeyboardSensor,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import SortableItem from "./sorting-item";
+import { AddIcon, CloseIcon } from "../../assets/svg";
+
+interface SortItem {
+  id: string;
+  field: string;
+  direction: "asc" | "desc";
+}
+
+type SortPopoverProps = {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  columns: { id: string; label: string }[];
+  onChange: (sorting: { id: string; desc: boolean }[]) => void;
+};
+
+const SortPopover = ({
+  anchorEl,
+  onClose,
+  columns,
+  onChange,
+}: SortPopoverProps) => {
+  const [sorts, setSorts] = useState<SortItem[]>([]);
+
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor)
+  );
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event;
+    if (active.id !== over.id) {
+      const oldIndex = sorts.findIndex((item) => item.id === active.id);
+      const newIndex = sorts.findIndex((item) => item.id === over.id);
+      const updated = arrayMove(sorts, oldIndex, newIndex);
+      setSorts(updated);
+      triggerTableSortUpdate(updated);
+    }
+  };
+
+  const handleChange = (id: string, field: keyof SortItem, value: any) => {
+    const updated = sorts.map((item) =>
+      item.id === id ? { ...item, [field]: value } : item
+    );
+    setSorts(updated);
+    triggerTableSortUpdate(updated);
+  };
+
+  const handleAddSort = () => {
+    const newSort: SortItem = {
+      id: Date.now().toString(),
+      field: columns[0]?.id ?? "",
+      direction: "asc",
+    };
+    const updated = [...sorts, newSort];
+    setSorts(updated);
+    triggerTableSortUpdate(updated);
+  };
+
+  const handleRemove = (id: string) => {
+    const updated = sorts.filter((item) => item.id !== id);
+    setSorts(updated);
+    triggerTableSortUpdate(updated);
+  };
+
+  const triggerTableSortUpdate = (sortItems: SortItem[]) => {
+    const sortingPayload = sortItems.map((item) => ({
+      id: item.field,
+      desc: item.direction === "desc",
+    }));
+    onChange(sortingPayload);
+  };
+
+  return (
+    <Popover
+      open={Boolean(anchorEl)}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+    >
+      <Box p={2} minWidth={300}>
+        <Box
+          display="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          px={2}
+          py={1}
+          sx={{
+            backgroundColor: "#F9FAFB",
+            // borderBottom: "1px solid #E0E0E0",
+            margin: "-16px -16px 16px -16px",
+          }}
+        >
+          <Typography fontSize="18px" fontWeight={600} color="#0C2033">
+            Sort By
+          </Typography>
+          <IconButton size="small" onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+
+        {sorts.length > 0 && (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={sorts.map((s) => s.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              {sorts.map((sort) => (
+                <SortableItem key={sort.id} id={sort.id}>
+                  <Box display="flex" gap={1} alignItems="center" mb={1}>
+                    <Select
+                      value={sort.field}
+                      onChange={(e) =>
+                        handleChange(sort.id, "field", e.target.value)
+                      }
+                      size="small"
+                      fullWidth
+                      sx={{ fontWeight: 400, fontSize: 14, color: "#000" }}
+                    >
+                      {columns.map((col) => (
+                        <MenuItem key={col.id} value={col.id}>
+                          {col.label}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                    <Select
+                      value={sort.direction}
+                      onChange={(e) =>
+                        handleChange(sort.id, "direction", e.target.value)
+                      }
+                      size="small"
+                      sx={{ fontWeight: 400, fontSize: 14, color: "#000" }}
+                    >
+                      <MenuItem value="asc">Ascending</MenuItem>
+                      <MenuItem value="desc">Descending</MenuItem>
+                    </Select>
+                    <IconButton
+                      size="small"
+                      onClick={() => handleRemove(sort.id)}
+                    >
+                      <CloseIcon />
+                    </IconButton>
+                  </Box>
+                </SortableItem>
+              ))}
+            </SortableContext>
+          </DndContext>
+        )}
+
+        <Button
+          onClick={handleAddSort}
+          startIcon={
+            <span>
+              <AddIcon />
+            </span>
+          }
+          size="small"
+          sx={{
+            fontWeight: 400,
+            fontSize: 12,
+            color: "#888888",
+          }}
+        >
+          Add Sort
+        </Button>
+      </Box>
+    </Popover>
+  );
+};
+
+export default SortPopover;

package/src/components/sorting-modal.tsx/sorting-item.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { DragHandleIcon } from "../../assets/svg";
+
+const SortableItem = ({
+  id,
+  children,
+}: {
+  id: string;
+  children: React.ReactNode;
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+      }}
+    >
+      <span {...attributes} {...listeners} style={{ cursor: "grab" }}>
+        <DragHandleIcon />
+      </span>
+      <div style={{ flexGrow: 1 }}>{children}</div>
+    </div>
+  );
+};
+
+export default SortableItem;

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

@@ -0,0 +1,50 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Cell, flexRender } from "@tanstack/react-table";
+import { CSSProperties } from "react";
+import { align } from "../types/common";
+import { getColumnPinningStylesBody } from "../libs/utils/common";
+import { CraftTableFeatureProps } from "../types/table-options";
+
+interface DragAlongCellProps<T> {
+  cell: Cell<T, unknown>;
+  featureOptions: CraftTableFeatureProps;
+}
+
+function DragAlongCell<T>({ cell, featureOptions }: DragAlongCellProps<T>) {
+  const { isDragging, setNodeRef, transform } = useSortable({
+    id: cell.column.id,
+  });
+  const { enableWordBreakAll } = featureOptions;
+
+  const isPinned = cell.column.getIsPinned();
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    width: cell.column.getSize(),
+    ...getColumnPinningStylesBody(cell.column),
+    ...(enableWordBreakAll && { wordBreak: "break-all" }),
+  };
+
+  return (
+    <td
+      ref={setNodeRef}
+      {...{
+        style: {
+          ...style,
+          zIndex: isPinned ? 2 : isDragging ? 1 : 0,
+        },
+        align: (cell.column.columnDef.meta as align)?.align || "left",
+        className: "ts__body__td",
+      }}
+    >
+      {cell.getIsPlaceholder()
+        ? null
+        : flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </td>
+  );
+}
+
+export default DragAlongCell;

package/src/components/table-body.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import {
+  ColumnOrderState,
+  flexRender,
+  Row,
+  Table,
+} from "@tanstack/react-table";
+import { CraftTableFeatureProps } from "../types/table-options";
+import { align } from "../types/common";
+import DragAlongCell from "./table-body-dnd-cell";
+import {
+  horizontalListSortingStrategy,
+  SortableContext,
+} from "@dnd-kit/sortable";
+import { getColumnPinningStylesBody } from "../libs/utils/common";
+import Checkbox from "./inputs/checkbox";
+
+interface TableBodyProps<T> {
+  table: Table<T>;
+  featureOptions: CraftTableFeatureProps;
+  NestedComponent?: React.ComponentType<{ row: Row<T> }>;
+  columnOrder: ColumnOrderState;
+}
+
+function TableBody<T>({
+  table,
+  featureOptions,
+  NestedComponent,
+  columnOrder,
+}: TableBodyProps<T>) {
+  const { enableWordBreakAll, enableColumnReordering, enableRowSelection } =
+    featureOptions;
+
+  const renderRow = (row: Row<T>) => {
+    const renderedRow = (
+      <tr key={row.id} className="ts__body__tr">
+        {enableRowSelection && (
+          <td
+            className="ts__body__td ts__body__checkbox"
+            style={{
+              position: "sticky",
+              left: 0,
+              width: "50px",
+            }}
+          >
+            <Checkbox
+              checked={row.getIsSelected()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+              className="checkbox__input"
+            />
+          </td>
+        )}
+
+        {row?.getVisibleCells()?.map((cell) => {
+          const tdProps = {
+            className: "ts__body__td",
+            style: {
+              ...getColumnPinningStylesBody(cell.column),
+              width: cell.column.getSize(),
+              ...(enableWordBreakAll && { wordBreak: "break-all" }),
+            } as React.CSSProperties,
+            align: (cell.column.columnDef.meta as align)?.align || "left",
+          };
+
+          return enableColumnReordering ? (
+            <SortableContext
+              key={cell.id}
+              items={columnOrder}
+              strategy={horizontalListSortingStrategy}
+            >
+              <DragAlongCell cell={cell} featureOptions={featureOptions} />
+            </SortableContext>
+          ) : (
+            <td key={cell?.id} {...tdProps}>
+              {flexRender(cell?.column?.columnDef?.cell, cell?.getContext())}
+            </td>
+          );
+        })}
+      </tr>
+    );
+
+    if (row.getIsExpanded()) {
+      return (
+        console.log("row.getIsExpanded() in table-head", row.getIsExpanded()),
+        (
+          <React.Fragment key={row.id}>
+            {renderedRow}
+            <tr>
+              <td colSpan={table.getAllLeafColumns().length}>
+                {NestedComponent && <NestedComponent {...{ row }} />}
+              </td>
+            </tr>
+          </React.Fragment>
+        )
+      );
+    } else {
+      return renderedRow;
+    }
+  };
+
+  return (
+    <tbody className="ts__body">
+      {table?.getRowModel()?.rows?.map((row) => renderRow(row))}
+    </tbody>
+  );
+}
+
+export default TableBody;

package/src/components/table-change-layout.tsx

@@ -0,0 +1,106 @@
+import {
+  BoardIcon,
+  CalendarIcon,
+  ChartsIcon,
+  CloseIcon,
+  GalleryIcon,
+  ListIcon,
+  TableIcon,
+  TimeLineIcon,
+} from "../assets/svg";
+import { Box, Typography, ButtonBase, Grid, IconButton } from "@mui/material";
+
+interface LayoutSelectorProps {
+  onSelect: (layout: string) => void;
+  selectedLayout?: string;
+}
+
+const layoutIcons: Record<string, JSX.Element> = {
+  Board: <BoardIcon />,
+  Table: <TableIcon />,
+  Timeline: <TimeLineIcon />,
+  List: <ListIcon />,
+  Calendar: <CalendarIcon />,
+  Gallery: <GalleryIcon />,
+  Charts: <ChartsIcon />,
+};
+
+const LayoutSelector = ({ onSelect, selectedLayout }: LayoutSelectorProps) => {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        maxWidth: "500px",
+        height: "330px",
+        // backgroundColor: "#fff",
+        // borderRadius: 2,
+        // overflow: "hidden",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          px: 3,
+          py: 2,
+          // borderBottom: "1px solid #eee",
+          backgroundColor: "#FBFBFC",
+        }}
+      >
+        <Typography
+          variant="h5"
+          sx={{ fontWeight: 400, fontSize: 18, color: "#0C2033" }}
+        >
+          Layouts
+        </Typography>
+        <IconButton onClick={() => onSelect("close")}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+
+      {/* Layout Grid */}
+      <Grid container spacing={2} sx={{ p: 3 }}>
+        {Object.keys(layoutIcons).map((layout) => {
+          const isSelected = layout === selectedLayout;
+          return (
+            <Grid size={3} key={layout}>
+              <ButtonBase
+                onClick={() => onSelect(layout)}
+                sx={{
+                  border: isSelected
+                    ? "1.5px solid #1E1E1E"
+                    : "1.5px solid #E5E7EB",
+                  borderRadius: 2,
+                  p: 2,
+                  width: "100%",
+                  height: "100%",
+                  flexDirection: "column",
+                  backgroundColor: isSelected ? "#fff" : "",
+                  transition: "0.3s",
+                  boxShadow: isSelected
+                    ? "0px 2px 6px rgba(0,0,0,0.06)"
+                    : "none",
+                }}
+              >
+                <Box mb={1}>{layoutIcons[layout]}</Box>
+                <Typography
+                  variant="subtitle1"
+                  sx={{
+                    color: "#1E1E1E",
+                    fontWeight: isSelected ? 400 : 200,
+                    opacity: isSelected ? 1 : 0.5,
+                  }}
+                >
+                  {layout}
+                </Typography>
+              </ButtonBase>
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Box>
+  );
+};
+
+export default LayoutSelector;

package/src/components/table-dnd.tsx

@@ -0,0 +1,62 @@
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  SensorDescriptor,
+  SensorOptions,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { CraftTableComponentProps } from "../types/table";
+import Table from "./table";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import { arrayMove } from "@dnd-kit/sortable";
+
+function TableDND<T>({
+  table,
+  featureOptions,
+  NestedComponent,
+  columnOrder,
+  setColumnOrder,
+  isCompactTable,
+}: CraftTableComponentProps<T>) {
+  const sensors: SensorDescriptor<SensorOptions>[] = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setColumnOrder((columnOrder) => {
+        const oldIndex = columnOrder.indexOf(active.id as string);
+        const newIndex = columnOrder.indexOf(over.id as string);
+        return arrayMove(columnOrder, oldIndex, newIndex);
+      });
+    }
+  };
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      modifiers={[restrictToHorizontalAxis]}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+    >
+      <Table
+        table={table}
+        featureOptions={featureOptions}
+        NestedComponent={NestedComponent}
+        columnOrder={columnOrder}
+        setColumnOrder={setColumnOrder}
+        isCompactTable={isCompactTable}
+      />
+    </DndContext>
+  );
+}
+
+export default TableDND;

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

@@ -0,0 +1,144 @@
+import { flexRender } from "@tanstack/react-table";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSSProperties, useState } from "react";
+import { CSS } from "@dnd-kit/utilities";
+import { DownArrow, DragHandleIcon, UpArrow } from "../assets/svg";
+import {
+  getColumnAlignment,
+  getColumnPinningStyles,
+} from "../libs/utils/common";
+import { align } from "../types/common";
+import { TableHeaderProps } from "../types/table";
+import TableHeadPin from "./table-head-pin";
+import TableHeadPopover from "./table-head-popover";
+
+function DraggableTableHeader<T>({
+  header,
+  featureOptions,
+}: TableHeaderProps<T>) {
+  const { enableColumnPinning } = featureOptions;
+
+  // Popover
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [wrap, setWrap] = useState(false);
+
+  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl((prev) => (prev ? null : event.currentTarget));
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const toggleWrap = () => {
+    setWrap((prev) => !prev);
+  };
+
+  const { isDragging, transform, attributes, listeners } = useSortable({
+    id: header.column.id,
+  });
+
+  const isPinned = header.column.getIsPinned();
+
+  const styles: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    width: header.column.getSize(),
+    minWidth: `${header.column.columnDef.minSize ?? 180}px`,
+    maxWidth: `${header.column.columnDef.maxSize}px`,
+  };
+
+  let sortProps: {
+    className: string;
+    title?: string;
+    style?: CSSProperties;
+  } = {
+    className: "ts__content",
+    style: {
+      justifyContent: getColumnAlignment(
+        (header?.column?.columnDef?.meta as align)?.align
+      ),
+    },
+  };
+
+  // if (header.column.getCanSort()) {
+  //   sortProps = {
+  //     ...sortProps,
+  //     title:
+  //       header.column.getNextSortingOrder() === "asc"
+  //         ? "Sort ascending"
+  //         : header.column.getNextSortingOrder() === "desc"
+  //         ? "Sort descending"
+  //         : "Clear sort",
+  //   };
+  // }
+
+  return (
+    <th
+      onMouseLeave={handleClose}
+      key={header?.id}
+      className="ts__head__th"
+      colSpan={header.colSpan}
+      onClick={handleHover}
+      style={{
+        width: `${header.column.getSize()}px `,
+        minWidth: `${header.column.columnDef.minSize}px`,
+        maxWidth: `${header.column.columnDef.maxSize}px`,
+        ...styles,
+        ...getColumnPinningStyles(header.column),
+        zIndex: isPinned ? 3 : isDragging ? 1 : 0,
+      }}
+    >
+      {header.isPlaceholder ? null : (
+        <div {...sortProps}>
+          <div
+            className={`${
+              header.column.getCanSort() ? "ts__content__sort" : ""
+            }`.trim()}
+            // onClick={header.column.getToggleSortingHandler()}
+          >
+            {flexRender(header.column.columnDef.header, header.getContext())}
+
+            {{
+              asc: <UpArrow />,
+              desc: <DownArrow />,
+            }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
+          </div>
+
+          {enableColumnPinning && (
+            <TableHeadPin header={header} featureOptions={featureOptions} />
+          )}
+
+          <div {...attributes} {...listeners} className="ts__dnd__button">
+            <DragHandleIcon />
+          </div>
+        </div>
+      )}
+
+      {/* column resizing */}
+      {header.column.getCanResize() ? (
+        <div
+          onDoubleClick={() => header.column.resetSize()}
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+          className={`column__resize ${
+            header.column.getIsResizing() ? "is__resizing" : ""
+          }`}
+        />
+      ) : null}
+
+      {/* Popover */}
+      <TableHeadPopover
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        header={header}
+        wrap={wrap}
+        onToggleWrap={toggleWrap}
+      />
+    </th>
+  );
+}
+
+export default DraggableTableHeader;