rez-table-listing-mui 1.3.62 → 2.0.0

package/src/listing/components/table-body/table-body.styles.ts

@@ -0,0 +1,64 @@
+import { styled } from "@mui/material";
+
+export const TableBodyRow = styled("tr", {
+  shouldForwardProp: (prop) =>
+    prop !== "hoverable" &&
+    prop !== "selected" &&
+    prop !== "striped" &&
+    prop !== "expanded",
+})<{
+  hoverable?: boolean;
+  selected?: boolean;
+  striped?: boolean;
+  expanded?: boolean;
+}>(({ theme, hoverable, selected, striped }) => ({
+  backgroundColor: selected
+    ? theme.palette.action.selected
+    : theme.palette.background.paper,
+
+  ...(striped && {
+    "&:nth-of-type(odd)": {
+      backgroundColor:
+        theme.palette.mode === "dark"
+          ? theme.palette.action.hover
+          : theme.palette.grey[50],
+    },
+  }),
+
+  ...(hoverable && {
+    transition: "background-color 0.2s ease, box-shadow 0.2s ease",
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+      boxShadow: `inset 0 2px 2px rgba(0,0,0,0.05),
+                  inset 0 -2px 2px rgba(0,0,0,0.05)`,
+    },
+  }),
+}));
+
+export const TableBodyCell = styled("td", {
+  shouldForwardProp: (prop) =>
+    prop !== "compact" &&
+    prop !== "isDragging" &&
+    prop !== "isPinned" &&
+    prop !== "wrap",
+})<{
+  compact?: boolean;
+  isDragging?: boolean;
+  isPinned?: boolean;
+  wrap?: boolean;
+}>(({ theme, compact, isDragging, wrap }) => ({
+  fontSize: theme.typography.pxToRem(14),
+  padding: compact ? theme.spacing(0.25, 0.5) : theme.spacing(0.5, 1),
+  borderTop: `1px solid ${theme.palette.divider}`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+
+  ...(wrap && {
+    wordBreak: "break-all",
+    whiteSpace: "normal",
+  }),
+
+  ...(isDragging && {
+    opacity: 0.85,
+    backgroundColor: theme.palette.action.hover,
+  }),
+}));

package/src/listing/components/{table-body.tsx → table-body/table-body.tsx}

@@ -8,15 +8,16 @@ import {
 import {
   CraftTableFeatureProps,
   CraftTableOptionsProps,
-} from "../types/table-options";
-import { align } from "../types/common";
+} 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";
+import { getColumnPinningStylesBody } from "../../libs/utils/common";
+import Checkbox from "../inputs/checkbox";
+import { TableBodyCell, TableBodyRow } from "./table-body.styles";
 
 interface TableBodyProps<T> {
   table: Table<T>;
@@ -39,10 +40,15 @@ function TableBody<T>({
 
   const renderRow = (row: Row<T>) => {
     const renderedRow = (
-      <tr key={row.id} className="ts__body__tr">
+      <TableBodyRow
+        key={row?.id}
+        hoverable
+        striped={featureOptions.striped}
+        selected={row.getIsSelected()}
+        expanded={row.getIsExpanded()}
+      >
         {enableRowSelection && (
-          <td
-            className="ts__body__td ts__body__checkbox"
+          <TableBodyCell
             style={{
               position: "sticky",
               left: 0,
@@ -55,23 +61,10 @@ function TableBody<T>({
               onChange={row.getToggleSelectedHandler()}
               className="checkbox__input"
             />
-          </td>
+          </TableBodyCell>
         )}
 
         {row?.getVisibleCells()?.map((cell) => {
-          const tdProps = {
-            className: "ts__body__td",
-            style: {
-              ...getColumnPinningStylesBody(cell.column),
-              width: cell.column.getSize(),
-              ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
-                wordBreak: "break-all",
-                // whiteSpace: "normal",
-              }),
-            } as React.CSSProperties,
-            align: (cell.column.columnDef.meta as align)?.align || "left",
-          };
-
           return enableColumnReordering ? (
             <SortableContext
               key={cell.id}
@@ -85,12 +78,22 @@ function TableBody<T>({
               />
             </SortableContext>
           ) : (
-            <td key={cell?.id} {...tdProps}>
+            <TableBodyCell
+              style={{
+                ...getColumnPinningStylesBody(cell.column),
+                width: cell.column.getSize(),
+                ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
+                  wordBreak: "break-all",
+                  whiteSpace: "normal",
+                }),
+              }}
+              align={(cell.column.columnDef.meta as align)?.align || "left"}
+            >
               {flexRender(cell?.column?.columnDef?.cell, cell?.getContext())}
-            </td>
+            </TableBodyCell>
           );
         })}
-      </tr>
+      </TableBodyRow>
     );
 
     if (row.getIsExpanded()) {
@@ -98,12 +101,14 @@ function TableBody<T>({
         <React.Fragment key={row.id}>
           {renderedRow}
           {NestedComponent && (
-            <tr>
-              {/* <td colSpan={table.getAllLeafColumns().length}>//commented out to remove extra line on opening of 
-              {NestedComponent && <NestedComponent {...{ row }} />}
-            </td> */}
+            <TableBodyRow
+              hoverable
+              striped={featureOptions.striped}
+              selected={row.getIsSelected()}
+              expanded={row.getIsExpanded()}
+            >
               {<NestedComponent {...{ row }} />}
-            </tr>
+            </TableBodyRow>
           )}
         </React.Fragment>
       );
@@ -113,9 +118,7 @@ function TableBody<T>({
   };
 
   return (
-    <tbody className="ts__body">
-      {table?.getRowModel()?.rows?.map((row) => renderRow(row))}
-    </tbody>
+    <tbody>{table?.getRowModel()?.rows?.map((row) => renderRow(row))}</tbody>
   );
 }
 

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

@@ -0,0 +1,112 @@
+import { flexRender } from "@tanstack/react-table";
+import { useSortable } from "@dnd-kit/sortable";
+import { useState } from "react";
+import { CSS } from "@dnd-kit/utilities";
+import { DownArrow, DragHandleIcon, UpArrow } from "../../../assets/svg";
+import { getColumnPinningStyles } from "../../libs/utils/common";
+import { TableHeaderProps } from "../../types/table";
+import TableHeadPin from "./table-head-pin";
+import TableHeadPopover from "./table-head-popover";
+import TableColumnResizeHandle from "./table-head-resizer";
+import {
+  TableDndButton,
+  TableHeadCell,
+  TableHeadContent,
+  TableHeadSort,
+} from "./table-head.styles";
+import { Box } from "@mui/material";
+
+function DraggableTableHeader<T>({
+  header,
+  activeTab,
+  featureOptions,
+  tableStates,
+  onSaveSettings,
+}: TableHeaderProps<T>) {
+  const { enableColumnPinning } = featureOptions;
+
+  // Popover
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl((prev) => (prev ? null : event.currentTarget));
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const { isDragging, transform, attributes, listeners } = useSortable({
+    id: header.column.id,
+  });
+
+  const isPinned = header.column.getIsPinned();
+
+  return (
+    <TableHeadCell
+      onMouseLeave={handleClose}
+      colSpan={header.colSpan}
+      onClick={handleHover}
+      compact={featureOptions?.compactTable}
+      isDragging={isDragging}
+      isPinned={Boolean(isPinned)}
+      style={{
+        width: `${header.column.getSize()}px`,
+        minWidth: `${header.column.columnDef.minSize ?? 180}px`,
+        maxWidth: `${header.column.columnDef.maxSize}px`,
+        transform: CSS.Translate.toString(transform),
+        transition: "width transform 0.2s ease-in-out",
+        ...getColumnPinningStyles(header.column),
+      }}
+    >
+      {header.isPlaceholder ? null : (
+        <TableHeadContent>
+          <TableHeadSort sortable={header.column.getCanSort()}>
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </TableHeadSort>
+
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+            gap={0.5}
+          >
+            {{
+              asc: <UpArrow />,
+              desc: <DownArrow />,
+            }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
+
+            {enableColumnPinning && (
+              <TableHeadPin
+                header={header}
+                featureOptions={featureOptions}
+                tableStates={tableStates}
+              />
+            )}
+
+            <TableDndButton {...attributes} {...listeners}>
+              <DragHandleIcon />
+            </TableDndButton>
+          </Box>
+        </TableHeadContent>
+      )}
+
+      {/* column resizing */}
+      {header.column.getCanResize() ? (
+        <TableColumnResizeHandle header={header} />
+      ) : null}
+
+      {/* Popover */}
+      <TableHeadPopover
+        anchorEl={anchorEl}
+        activeTab={activeTab}
+        onClose={handleClose}
+        header={header}
+        tableStates={tableStates}
+        onSaveSettings={onSaveSettings}
+      />
+    </TableHeadCell>
+  );
+}
+
+export default DraggableTableHeader;

package/src/listing/components/table-head/table-head-pin.tsx

@@ -0,0 +1,29 @@
+import { IconPinOffOutline } from "../../../assets/svg";
+import { TableHeaderProps } from "../../types/table";
+import { TableHeadButton } from "./table-head.styles";
+
+function TableHeadPin<T>({ header }: TableHeaderProps<T>) {
+  // ! Header now is pinned via dropdown on table head
+  // if (header.column.getIsPinned() !== "left") {
+  //   return (
+  //     <TableHeadButton onClick={() => header.column.pin("left")}>
+  //       {/* <IconPinOutline /> */}
+  //     </TableHeadButton>
+  //   );
+  // }
+
+  return (
+    header.column.getIsPinned() && (
+      <TableHeadButton
+        onClick={(e) => {
+          e.stopPropagation();
+          header.column.pin(false);
+        }}
+      >
+        <IconPinOffOutline />
+      </TableHeadButton>
+    )
+  );
+}
+
+export default TableHeadPin;

package/src/listing/components/{table-head-popover.tsx → table-head/table-head-popover.tsx}

@@ -13,21 +13,12 @@ import {
   HideIcon,
   IconPinOffOutline,
   IconPinOutline,
-} from "../../assets/svg";
+} from "../../../assets/svg";
 import {
   craftTableFilterSettingsOptionsProps,
   CraftTableOptionsProps,
-} from "../types/table-options";
-import { useFullscreenPopoverContainer } from "../libs/hooks/useFullScreen";
-import { ENTITY_TYPE, MAPPED_ENTITY_TYPE } from "../libs/utils/common";
-import {
-  ColumnTabConfigProps,
-  SettingsDataProps,
-} from "../types/filter-settings";
-import { useSaveSettingsDataAPI } from "../libs/hooks/useEntityTableAPI";
-import { useQueryClient } from "@tanstack/react-query";
-import { useCraftTableFilterSettings } from "../libs/hooks/useCraftTableFilterSettings";
-import { ColumnItem } from "./table-settings/components/column";
+} from "../../types/table-options";
+import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
 
 type Props<T> = {
   anchorEl: HTMLElement | null;
@@ -35,24 +26,21 @@ type Props<T> = {
   onClose: () => void;
   header: Header<T, unknown>;
   tableStates: CraftTableOptionsProps;
-  filterSettingStates: craftTableFilterSettingsOptionsProps;
+  filterSettingStates?: craftTableFilterSettingsOptionsProps;
   onSaveSettings?: (columnId: string) => void;
 };
 
 function TableHeadPopover<T>({
   anchorEl,
-  activeTab,
   onClose,
   header,
   tableStates,
-  filterSettingStates,
   onSaveSettings,
 }: Props<T>) {
   const open = Boolean(anchorEl);
   const column = header.column;
   const isPinned = column.getIsPinned() === "left";
   const { container: fullscreenContainer } = useFullscreenPopoverContainer();
-  const queryClient = useQueryClient();
   const { wrapColumns, setWrapColumns } = tableStates;
 
   const toggleWrapForColumn = (columnId: string) => {

package/src/listing/components/table-head/table-head-resizer.tsx

@@ -0,0 +1,22 @@
+import { Header } from "@tanstack/react-table";
+import { ColumnResizeHandle } from "./table-head.styles";
+
+interface Props<T> {
+  header: Header<T, unknown>;
+}
+
+function TableColumnResizeHandle<T>({ header }: Props<T>) {
+  return (
+    <ColumnResizeHandle
+      isResizing={header.column.getIsResizing()}
+      onDoubleClick={() => header.column.resetSize()}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+      className={`column__resize ${
+        header.column.getIsResizing() ? "is__resizing" : ""
+      }`}
+    />
+  );
+}
+
+export default TableColumnResizeHandle;

package/src/listing/components/table-head/table-head.styles.ts

@@ -0,0 +1,115 @@
+// columnResize.styles.ts
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+export const ColumnResizeHandle = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "isResizing",
+})<{ isResizing?: boolean }>(({ theme, isResizing }) => ({
+  position: "absolute",
+  top: 0,
+  right: 0,
+  height: "100%",
+  width: theme.spacing(0.5),
+  cursor: "col-resize",
+  userSelect: "none",
+  touchAction: "none",
+  opacity: isResizing ? 1 : 0,
+  background: isResizing ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.5)",
+
+  "&:hover": {
+    opacity: 1,
+  },
+}));
+
+export const TableHeadButton = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  cursor: "pointer",
+  transition: "transform 0.15s ease",
+
+  "&:hover": {
+    transform: "scale(1.1)",
+  },
+
+  "& svg": {
+    color: theme.palette.grey[700],
+  },
+}));
+
+export const TableHeadSort = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "sortable",
+})<{ sortable?: boolean }>(({ theme, sortable }) => ({
+  userSelect: sortable ? "none" : "auto",
+  fontSize: theme.typography.pxToRem(14),
+
+  "& svg": {
+    marginLeft: "0.25rem",
+  },
+}));
+
+export const TableDndButton = styled(Box)(({ theme }) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.grey[600],
+  cursor: "grab",
+  transition: "transform 0.15s ease, color 0.15s ease",
+
+  "&:hover": {
+    transform: "scale(1.1)",
+    color: theme.palette.grey[900],
+    cursor: "grabbing",
+  },
+}));
+
+export const TableHeadContent = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(1),
+}));
+
+export const TableHeadRoot = styled("thead", {
+  shouldForwardProp: (prop) => prop !== "sticky",
+})<{ sticky?: boolean }>(({ sticky }) => ({
+  position: sticky ? "sticky" : "relative",
+  top: sticky ? 0 : "auto",
+  zIndex: sticky ? 3 : "auto",
+}));
+
+export const TableHeadRow = styled("tr", {
+  shouldForwardProp: (prop) => prop !== "striped",
+})<{ striped?: boolean }>(({ theme, striped }) => ({
+  backgroundColor: striped
+    ? theme.palette.common.white
+    : theme.palette.grey[100],
+}));
+
+export const TableHeadCell = styled("th", {
+  shouldForwardProp: (prop) =>
+    prop !== "compact" && prop !== "isDragging" && prop !== "isPinned",
+})<{
+  compact?: boolean;
+  isDragging?: boolean;
+  isPinned?: boolean;
+  sticky?: boolean;
+}>(({ theme, compact, isDragging, isPinned, sticky }) => ({
+  position: "relative",
+  padding: compact ? theme.spacing(0.375, 0.675) : theme.spacing(0.75, 1),
+  borderWidth: "0.5px",
+  borderStyle: "solid",
+  borderColor: theme.palette.grey[500],
+  cursor: "pointer",
+  backgroundColor: theme.palette.common.white,
+  userSelect: "none",
+  // smoother drag feedback
+  opacity: isDragging ? 0.8 : 1,
+  zIndex: isPinned ? 3 : isDragging ? 1 : 0,
+
+  ...(sticky && {
+    position: "sticky",
+    left: 0,
+    zIndex: 4,
+  }),
+}));