@undevy-org/tablewright 0.9.0 → 0.10.0

package/dist/es/components/data-table/ColumnHeaderMenu.js

@@ -1,14 +1,17 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../ui/dropdown-menu.js";
-import { ChevronDown, ListFilter, EyeOff, ArrowUp, ArrowDown, Check } from "lucide-react";
+import { ChevronDown, ListFilter, EyeOff, Pin, Check, PinOff, ArrowUp, ArrowDown } from "lucide-react";
 const DEFAULT_LABELS = {
   sort: "Sort",
   sortByColumn: (label) => `Sort by ${label}`,
   ascending: "Ascending",
   descending: "Descending",
   filterByColumn: "Filter by this column",
-  hideColumn: "Hide column"
+  hideColumn: "Hide column",
+  pinLeft: "Pin left",
+  pinRight: "Pin right",
+  unpin: "Unpin"
 };
 const sectionLabelClass = "px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-tertiary)] first:pt-1";
 const itemClass = "gap-2.5 rounded-md px-2.5 py-2";
@@ -60,6 +63,10 @@ function ColumnHeaderMenu({
   hasFilter,
   onFilterClick,
   onHide,
+  pinSide = false,
+  onPinLeft,
+  onPinRight,
+  onUnpin,
   labels: labelOverrides,
   menuWidth = "w-[200px]"
 }) {
@@ -68,7 +75,15 @@ function ColumnHeaderMenu({
   const isStacked = !!primaryLabel;
   const isSingleSortable = !!label && !!onSort;
   const isSortable = isStacked || isSingleSortable;
-  const hasActions = hasFilter || !!onHide;
+  const showFilterItem = Boolean(hasFilter && onFilterClick);
+  const showHideItem = Boolean(onHide);
+  const showPinLeftItem = Boolean(onPinLeft);
+  const showPinRightItem = Boolean(onPinRight);
+  const showUnpinItem = Boolean(onUnpin && pinSide);
+  const hasPinSection = showPinLeftItem || showPinRightItem || showUnpinItem;
+  const hasFilterOrHide = showFilterItem || showHideItem;
+  const showSeparatorAfterSort = isSortable && (hasFilterOrHide || hasPinSection);
+  const showSeparatorBeforePin = hasPinSection && hasFilterOrHide;
   const labelContent = isStacked ? /* @__PURE__ */ jsxs("span", { className: "flex flex-col leading-none", children: [
     /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: [
       primaryLabel,
@@ -127,14 +142,29 @@ function ColumnHeaderMenu({
           labels
         }
       ),
-      isSortable && hasActions && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
-      hasFilter && onFilterClick && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onFilterClick, children: [
+      showSeparatorAfterSort && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+      showFilterItem && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onFilterClick, children: [
         /* @__PURE__ */ jsx(ListFilter, { className: iconClass }),
         labels.filterByColumn
       ] }),
-      onHide && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onHide, children: [
+      showHideItem && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onHide, children: [
         /* @__PURE__ */ jsx(EyeOff, { className: iconClass }),
         labels.hideColumn
+      ] }),
+      showSeparatorBeforePin && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+      showPinLeftItem && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onPinLeft, children: [
+        /* @__PURE__ */ jsx(Pin, { className: iconClass }),
+        labels.pinLeft,
+        pinSide === "left" && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3 w-3 text-[var(--text-tertiary)]" })
+      ] }),
+      showPinRightItem && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onPinRight, children: [
+        /* @__PURE__ */ jsx(Pin, { className: `${iconClass} rotate-90` }),
+        labels.pinRight,
+        pinSide === "right" && /* @__PURE__ */ jsx(Check, { className: "ml-auto h-3 w-3 text-[var(--text-tertiary)]" })
+      ] }),
+      showUnpinItem && /* @__PURE__ */ jsxs(DropdownMenuItem, { className: itemClass, onClick: onUnpin, children: [
+        /* @__PURE__ */ jsx(PinOff, { className: iconClass }),
+        labels.unpin
       ] })
     ] })
   ] });

package/dist/es/components/data-table/sticky-utils.js

@@ -19,15 +19,25 @@ function applyColumnPinningToMeta(baseMeta, pinning, options) {
   for (const id of order) {
     const meta = result[id];
     if (meta?.sticky !== "left") continue;
-    result[id] = { ...meta, stickyOffset: leftOffset };
-    leftOffset += columnWidthPx(id, baseMeta, options?.columnWidths);
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedLeft.has(id)) {
+      result[id] = { ...meta, stickyOffset: leftOffset };
+      leftOffset += width;
+    } else {
+      leftOffset = (meta.stickyOffset ?? 0) + width;
+    }
   }
   let rightOffset = 0;
   for (const id of [...order].reverse()) {
     const meta = result[id];
     if (meta?.sticky !== "right") continue;
-    result[id] = { ...meta, stickyOffset: rightOffset };
-    rightOffset += columnWidthPx(id, baseMeta, options?.columnWidths);
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedRight.has(id)) {
+      result[id] = { ...meta, stickyOffset: rightOffset };
+      rightOffset += width;
+    } else {
+      rightOffset = (meta.stickyOffset ?? 0) + width;
+    }
   }
   return result;
 }

package/dist/styles.css

@@ -402,6 +402,9 @@
 .collapse {
     visibility: collapse
 }
+.static {
+    position: static
+}
 .fixed {
     position: fixed
 }
@@ -784,6 +787,10 @@
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
+.rotate-90 {
+    --tw-rotate: 90deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
 .cursor-col-resize {
     cursor: col-resize
 }

package/dist/tablewright.cjs

@@ -952,15 +952,25 @@ function applyColumnPinningToMeta(baseMeta, pinning, options) {
   for (const id of order) {
     const meta = result[id];
     if (meta?.sticky !== "left") continue;
-    result[id] = { ...meta, stickyOffset: leftOffset };
-    leftOffset += columnWidthPx(id, baseMeta, options?.columnWidths);
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedLeft.has(id)) {
+      result[id] = { ...meta, stickyOffset: leftOffset };
+      leftOffset += width;
+    } else {
+      leftOffset = (meta.stickyOffset ?? 0) + width;
+    }
   }
   let rightOffset = 0;
   for (const id of [...order].reverse()) {
     const meta = result[id];
     if (meta?.sticky !== "right") continue;
-    result[id] = { ...meta, stickyOffset: rightOffset };
-    rightOffset += columnWidthPx(id, baseMeta, options?.columnWidths);
+    const width = columnWidthPx(id, baseMeta, options?.columnWidths);
+    if (pinnedRight.has(id)) {
+      result[id] = { ...meta, stickyOffset: rightOffset };
+      rightOffset += width;
+    } else {
+      rightOffset = (meta.stickyOffset ?? 0) + width;
+    }
   }
   return result;
 }
@@ -2672,7 +2682,10 @@ const DEFAULT_LABELS$4 = {
   ascending: "Ascending",
   descending: "Descending",
   filterByColumn: "Filter by this column",
-  hideColumn: "Hide column"
+  hideColumn: "Hide column",
+  pinLeft: "Pin left",
+  pinRight: "Pin right",
+  unpin: "Unpin"
 };
 const sectionLabelClass = "px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-tertiary)] first:pt-1";
 const itemClass = "gap-2.5 rounded-md px-2.5 py-2";
@@ -2724,6 +2737,10 @@ function ColumnHeaderMenu({
   hasFilter,
   onFilterClick,
   onHide,
+  pinSide = false,
+  onPinLeft,
+  onPinRight,
+  onUnpin,
   labels: labelOverrides,
   menuWidth = "w-[200px]"
 }) {
@@ -2732,7 +2749,15 @@ function ColumnHeaderMenu({
   const isStacked = !!primaryLabel;
   const isSingleSortable = !!label && !!onSort;
   const isSortable = isStacked || isSingleSortable;
-  const hasActions = hasFilter || !!onHide;
+  const showFilterItem = Boolean(hasFilter && onFilterClick);
+  const showHideItem = Boolean(onHide);
+  const showPinLeftItem = Boolean(onPinLeft);
+  const showPinRightItem = Boolean(onPinRight);
+  const showUnpinItem = Boolean(onUnpin && pinSide);
+  const hasPinSection = showPinLeftItem || showPinRightItem || showUnpinItem;
+  const hasFilterOrHide = showFilterItem || showHideItem;
+  const showSeparatorAfterSort = isSortable && (hasFilterOrHide || hasPinSection);
+  const showSeparatorBeforePin = hasPinSection && hasFilterOrHide;
   const labelContent = isStacked ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col leading-none", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-[var(--text-primary)]", children: [
       primaryLabel,
@@ -2791,14 +2816,29 @@ function ColumnHeaderMenu({
           labels
         }
       ),
-      isSortable && hasActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
-      hasFilter && onFilterClick && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: itemClass, onClick: onFilterClick, children: [
+      showSeparatorAfterSort && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+      showFilterItem && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: itemClass, onClick: onFilterClick, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilter, { className: iconClass }),
         labels.filterByColumn
       ] }),
-      onHide && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: itemClass, onClick: onHide, children: [
+      showHideItem && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: itemClass, onClick: onHide, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: iconClass }),
         labels.hideColumn
+      ] }),
+      showSeparatorBeforePin && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+      showPinLeftItem && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: itemClass, onClick: onPinLeft, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: iconClass }),
+        labels.pinLeft,
+        pinSide === "left" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "ml-auto h-3 w-3 text-[var(--text-tertiary)]" })
+      ] }),
+      showPinRightItem && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: itemClass, onClick: onPinRight, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: `${iconClass} rotate-90` }),
+        labels.pinRight,
+        pinSide === "right" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "ml-auto h-3 w-3 text-[var(--text-tertiary)]" })
+      ] }),
+      showUnpinItem && /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuItem, { className: itemClass, onClick: onUnpin, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PinOff, { className: iconClass }),
+        labels.unpin
       ] })
     ] })
   ] });

package/dist/tablewright.css

@@ -250,6 +250,9 @@
 .collapse {
     visibility: collapse
 }
+.static {
+    position: static
+}
 .fixed {
     position: fixed
 }
@@ -632,6 +635,10 @@
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
+.rotate-90 {
+    --tw-rotate: 90deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
 .cursor-col-resize {
     cursor: col-resize
 }

package/dist/types/components/data-table/ColumnHeaderMenu.d.ts

@@ -6,6 +6,9 @@ export interface ColumnHeaderMenuLabels {
     descending: string;
     filterByColumn: string;
     hideColumn: string;
+    pinLeft: string;
+    pinRight: string;
+    unpin: string;
 }
 interface ColumnHeaderMenuProps {
     label?: string;
@@ -20,8 +23,12 @@ interface ColumnHeaderMenuProps {
     hasFilter?: boolean;
     onFilterClick?: () => void;
     onHide?: () => void;
+    pinSide?: "left" | "right" | false;
+    onPinLeft?: () => void;
+    onPinRight?: () => void;
+    onUnpin?: () => void;
     labels?: Partial<ColumnHeaderMenuLabels>;
     menuWidth?: string;
 }
-export declare function ColumnHeaderMenu({ label, primaryLabel, secondaryLabel, sorted, onSort, primarySorted, onPrimarySort, secondarySorted, onSecondarySort, hasFilter, onFilterClick, onHide, labels: labelOverrides, menuWidth, }: ColumnHeaderMenuProps): import("react").JSX.Element;
+export declare function ColumnHeaderMenu({ label, primaryLabel, secondaryLabel, sorted, onSort, primarySorted, onPrimarySort, secondarySorted, onSecondarySort, hasFilter, onFilterClick, onHide, pinSide, onPinLeft, onPinRight, onUnpin, labels: labelOverrides, menuWidth, }: ColumnHeaderMenuProps): import("react").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
   "license": "MIT",
   "repository": {