@flanksource/clicky-ui/dist/data/MatrixTable.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../lib/utils.js";
function MatrixTable({
  columns,
  rows,
  corner,
  emptyMessage = "No data",
  angledHeaders = false,
  density = "default",
  columnWidth = 48,
  headerHeight = 120,
  className,
  columnClassName,
  rowLabelClassName,
  cellClassName
}) {
  if (rows.length === 0 || columns.length === 0) {
    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: emptyMessage });
  }
  const textWidth = Math.round(headerHeight * 1.41);
  const diagonalOverhang = Math.round(headerHeight * 0.71);
  const compact = density === "compact";
  const headerCellPadding = compact ? "px-density-2 py-density-1" : "px-density-3 py-density-2";
  const rowLabelPadding = compact ? "px-density-2 py-1" : "px-density-3 py-density-2";
  const bodyCellPadding = compact ? "px-density-2 py-1" : "px-density-3 py-density-2";
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn("overflow-auto rounded-md border border-border", className),
      style: angledHeaders ? { paddingRight: diagonalOverhang } : void 0,
      children: /* @__PURE__ */ jsxs("table", { className: cn("w-max border-collapse", compact ? "text-xs" : "text-sm"), children: [
        angledHeaders && /* @__PURE__ */ jsxs("colgroup", { children: [
          /* @__PURE__ */ jsx("col", {}),
          columns.map((_, index) => /* @__PURE__ */ jsx("col", { style: { width: columnWidth } }, index))
        ] }),
        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: cn("bg-muted/40", !angledHeaders && "border-b border-border"), children: [
          /* @__PURE__ */ jsx(
            "th",
            {
              scope: "col",
              className: cn(
                "sticky left-0 z-10 min-w-44 border-r border-border bg-muted/40 text-left font-medium",
                headerCellPadding,
                angledHeaders ? "align-bottom" : columnClassName
              ),
              children: corner
            }
          ),
          columns.map(
            (column, index) => angledHeaders ? /* @__PURE__ */ jsxs(
              "th",
              {
                scope: "col",
                title: columnTitle(column),
                className: cn(
                  "relative overflow-visible border-b border-border p-0 align-bottom",
                  columnClassName
                ),
                style: {
                  width: columnWidth,
                  minWidth: columnWidth,
                  maxWidth: columnWidth,
                  height: headerHeight
                },
                children: [
                  /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: "absolute bottom-0 border-b border-border",
                      style: {
                        left: columnWidth,
                        width: textWidth,
                        transform: "rotate(-45deg)",
                        transformOrigin: "0 100%"
                      }
                    }
                  ),
                  index === 0 && /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: "absolute bottom-0 border-b border-border",
                      style: {
                        left: 0,
                        width: textWidth,
                        transform: "rotate(-45deg)",
                        transformOrigin: "0 100%"
                      }
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: "absolute bottom-2 overflow-hidden text-ellipsis whitespace-nowrap pl-1 text-left text-xs font-medium leading-none text-muted-foreground",
                      style: {
                        left: columnWidth / 2,
                        width: textWidth,
                        transform: "rotate(-45deg)",
                        transformOrigin: "0 100%"
                      },
                      children: column
                    }
                  )
                ]
              },
              index
            ) : /* @__PURE__ */ jsx(
              "th",
              {
                scope: "col",
                className: cn(
                  "min-w-24 whitespace-nowrap text-center text-xs font-medium text-muted-foreground",
                  headerCellPadding,
                  columnClassName
                ),
                children: column
              },
              index
            )
          )
        ] }) }),
        /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-border last:border-b-0", children: [
          /* @__PURE__ */ jsx(
            "th",
            {
              scope: "row",
              className: cn(
                "sticky left-0 z-10 border-r border-border bg-background text-left font-medium",
                rowLabelPadding,
                rowLabelClassName
              ),
              children: row.label
            }
          ),
          columns.map((_, index) => /* @__PURE__ */ jsx(
            "td",
            {
              className: cn(
                angledHeaders ? "p-0 text-center align-middle" : cn(bodyCellPadding, "text-center align-middle"),
                cellClassName
              ),
              style: angledHeaders ? {
                width: columnWidth,
                minWidth: columnWidth,
                maxWidth: columnWidth
              } : void 0,
              children: row.cells[index] ?? null
            },
            index
          ))
        ] }, row.key)) })
      ] })
    }
  );
}
function columnTitle(column) {
  if (typeof column === "string" || typeof column === "number") {
    return String(column);
  }
  return void 0;
}
export {
  MatrixTable
};
//# sourceMappingURL=MatrixTable.js.map