rez-table-listing-mui/src/listing/components/table-head/table-head.styles.ts

A rez table listing component built on TanStack Table

// 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[50],
}));

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.5, 0.75) : theme.spacing(0.75, 1.25),
  border: `0.5px solid ${theme.palette.grey[200]}`,
  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,
  }),
}));