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

A rez table listing component built on TanStack Table

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

  ...(wrap && {
    wordBreak: "break-all",
    whiteSpace: "normal",
  }),

  ...(isDragging && {
    opacity: 0.85,
    backgroundColor: theme.palette.action.hover,
  }),
}));