@crispy-seed/data-table 0.14.0 → 0.14.1

package/dist/index.cjs

@@ -1668,6 +1668,11 @@ const ROOT_MARGIN = "160px";
     const elementRef = React.useRef(null);
     const [scrolledStart, setScrolledStart] = React.useState(false);
     const [scrolledEnd, setScrolledEnd] = React.useState(false);
+    // The scroll container's own content-box width (0 until first measured). The
+    // styled layer reads it to cap how much of a narrow viewport the sticky-left
+    // pinned group may occupy (`useEffectiveColumns`) -- without a cap, a pinned
+    // group wider than the container covers every scrolling column for good.
+    const [viewportWidth, setViewportWidth] = React.useState(0);
     const [viewport, setViewport] = React.useState({
         scrollTop: 0,
         viewportHeight: 0
@@ -1688,6 +1693,7 @@ const ROOT_MARGIN = "160px";
                     viewportHeight
                 });
         }
+        setViewportWidth(element.clientWidth);
         setScrolledStart(element.scrollLeft > 0);
         // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
         // short of `scrollWidth` even when fully scrolled, which would otherwise leave
@@ -1697,16 +1703,16 @@ const ROOT_MARGIN = "160px";
         virtualized,
         rowHeight
     ]);
-    // The container can resize without scrolling (window resize, a bounded parent
-    // changing height) -- the viewport height feeds the window, so re-measure then too.
+    // The container can resize without scrolling (window resize, rotating a phone, a
+    // bounded parent changing height) -- the viewport height feeds the virtual window
+    // and the width feeds the pinned-group cap, so re-measure then too.
     React.useEffect(()=>{
         const element = elementRef.current;
-        if (!virtualized || !element || typeof ResizeObserver === "undefined") return;
+        if (!element || typeof ResizeObserver === "undefined") return;
         const observer = new ResizeObserver(()=>remeasure());
         observer.observe(element);
         return ()=>observer.disconnect();
     }, [
-        virtualized,
         remeasure
     ]);
     const scrollAreaRef = React.useCallback((node)=>{
@@ -1722,6 +1728,7 @@ const ROOT_MARGIN = "160px";
         scrollAreaRef,
         scrolledStart,
         scrolledEnd,
+        viewportWidth,
         onScroll,
         remeasure,
         /** Row-virtualization state; `enabled: false` (the default) means render every row. */ virtual: {
@@ -3658,6 +3665,13 @@ function RatingCell({ value, maxRating = 5 }) {
     });
 }
 
+/** Share of the scroll container's width the sticky-left pinned group may occupy
+ *  before FURTHER pinned columns stop sticking and scroll like any other column. A
+ *  pinned group at or past the container's width pins every pixel of it: the
+ *  scrolling columns slide in underneath the sticky cells and can never be seen (a
+ *  375px phone with Serial + one more pinned column showed nothing else, ever). The
+ *  FIRST pinned column always sticks regardless -- the entity/name column staying
+ *  frozen is the whole point of pinning. */ const MAX_PINNED_VIEWPORT_SHARE = 0.6;
 /** Fallback width (px) used to compute a pinned column's cumulative sticky offset when
  *  it has no explicit `width` and hasn't been drag-resized -- pinning needs a STATIC
  *  number to put in an inline `insetInlineStart`, and `table-layout: fixed` only
@@ -3677,7 +3691,7 @@ function RatingCell({ value, maxRating = 5 }) {
  * one and a header row built from the other drift out of sync under `table-layout:
  * fixed`'s own column-to-cell matching.
  */ function useEffectiveColumns(columns, options) {
-    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys } = useDataTableContext();
+    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys, viewportWidth } = useDataTableContext();
     const { selectable, stickyFirst } = options;
     return React__namespace.useMemo(()=>{
         const byKey = new Map(columns.map((column)=>[
@@ -3703,11 +3717,14 @@ function RatingCell({ value, maxRating = 5 }) {
             const bPinned = pinnedSet.has(b) ? 0 : 1;
             return aPinned - bPinned;
         });
+        // 0 = not measured yet (first paint / jsdom) -- no cap rather than a guess.
+        const pinBudget = viewportWidth ? viewportWidth * MAX_PINNED_VIEWPORT_SHARE : Number.POSITIVE_INFINITY;
         let cursor = selectable ? 40 : 0;
         let pinnedCount = 0;
+        let budgetSpent = false;
         const entries = ordered.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>{
             const rawWidth = getColumnWidth(column.key) ?? column.width;
-            const pinned = pinnedSet.has(column.key);
+            const inPinnedSet = pinnedSet.has(column.key);
             // Fix (0.10.4, screenshot-confirmed pinned-column overlay): a pinned column
             // with no explicit/resized width used to keep `width` as `undefined` here,
             // which `DataTableColGroup` (DataTable.tsx) renders as an AUTO `<col>` --
@@ -3727,7 +3744,15 @@ function RatingCell({ value, maxRating = 5 }) {
             // without its own width now always renders at exactly
             // `DEFAULT_PINNED_COLUMN_WIDTH`, matching what every other pinned column's
             // offset already assumed it would be.
-            const width = pinned && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
+            const width = inPinnedSet && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
+            // Sticks only while the group still fits the pin budget (see
+            // MAX_PINNED_VIEWPORT_SHARE); the first pinned column always sticks.
+            // Once one pinned column overflows, every later one scrolls too -- a narrower
+            // late column must not stick past a gap.
+            if (inPinnedSet && pinnedCount > 0 && cursor + (width ?? DEFAULT_PINNED_COLUMN_WIDTH) > pinBudget) {
+                budgetSpent = true;
+            }
+            const pinned = inPinnedSet && !budgetSpent;
             const pinOffset = pinned ? cursor : 0;
             if (pinned) {
                 cursor += width ?? DEFAULT_PINNED_COLUMN_WIDTH;
@@ -3766,7 +3791,8 @@ function RatingCell({ value, maxRating = 5 }) {
         getColumnWidth,
         pinnedColumnKeys,
         selectable,
-        stickyFirst
+        stickyFirst,
+        viewportWidth
     ]);
 }
 /** The 40px selection column's own sticky-left state -- `stickyFirst` (the table-wide

package/dist/index.js

@@ -1649,6 +1649,11 @@ const ROOT_MARGIN = "160px";
     const elementRef = useRef(null);
     const [scrolledStart, setScrolledStart] = useState(false);
     const [scrolledEnd, setScrolledEnd] = useState(false);
+    // The scroll container's own content-box width (0 until first measured). The
+    // styled layer reads it to cap how much of a narrow viewport the sticky-left
+    // pinned group may occupy (`useEffectiveColumns`) -- without a cap, a pinned
+    // group wider than the container covers every scrolling column for good.
+    const [viewportWidth, setViewportWidth] = useState(0);
     const [viewport, setViewport] = useState({
         scrollTop: 0,
         viewportHeight: 0
@@ -1669,6 +1674,7 @@ const ROOT_MARGIN = "160px";
                     viewportHeight
                 });
         }
+        setViewportWidth(element.clientWidth);
         setScrolledStart(element.scrollLeft > 0);
         // A 1px slop: sub-pixel layout can leave `scrollLeft + clientWidth` a fraction
         // short of `scrollWidth` even when fully scrolled, which would otherwise leave
@@ -1678,16 +1684,16 @@ const ROOT_MARGIN = "160px";
         virtualized,
         rowHeight
     ]);
-    // The container can resize without scrolling (window resize, a bounded parent
-    // changing height) -- the viewport height feeds the window, so re-measure then too.
+    // The container can resize without scrolling (window resize, rotating a phone, a
+    // bounded parent changing height) -- the viewport height feeds the virtual window
+    // and the width feeds the pinned-group cap, so re-measure then too.
     useEffect(()=>{
         const element = elementRef.current;
-        if (!virtualized || !element || typeof ResizeObserver === "undefined") return;
+        if (!element || typeof ResizeObserver === "undefined") return;
         const observer = new ResizeObserver(()=>remeasure());
         observer.observe(element);
         return ()=>observer.disconnect();
     }, [
-        virtualized,
         remeasure
     ]);
     const scrollAreaRef = useCallback((node)=>{
@@ -1703,6 +1709,7 @@ const ROOT_MARGIN = "160px";
         scrollAreaRef,
         scrolledStart,
         scrolledEnd,
+        viewportWidth,
         onScroll,
         remeasure,
         /** Row-virtualization state; `enabled: false` (the default) means render every row. */ virtual: {
@@ -3639,6 +3646,13 @@ function RatingCell({ value, maxRating = 5 }) {
     });
 }
 
+/** Share of the scroll container's width the sticky-left pinned group may occupy
+ *  before FURTHER pinned columns stop sticking and scroll like any other column. A
+ *  pinned group at or past the container's width pins every pixel of it: the
+ *  scrolling columns slide in underneath the sticky cells and can never be seen (a
+ *  375px phone with Serial + one more pinned column showed nothing else, ever). The
+ *  FIRST pinned column always sticks regardless -- the entity/name column staying
+ *  frozen is the whole point of pinning. */ const MAX_PINNED_VIEWPORT_SHARE = 0.6;
 /** Fallback width (px) used to compute a pinned column's cumulative sticky offset when
  *  it has no explicit `width` and hasn't been drag-resized -- pinning needs a STATIC
  *  number to put in an inline `insetInlineStart`, and `table-layout: fixed` only
@@ -3658,7 +3672,7 @@ function RatingCell({ value, maxRating = 5 }) {
  * one and a header row built from the other drift out of sync under `table-layout:
  * fixed`'s own column-to-cell matching.
  */ function useEffectiveColumns(columns, options) {
-    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys } = useDataTableContext();
+    const { visibleColumnOrder, getColumnLabel, getColumnWidth, pinnedColumnKeys, viewportWidth } = useDataTableContext();
     const { selectable, stickyFirst } = options;
     return React.useMemo(()=>{
         const byKey = new Map(columns.map((column)=>[
@@ -3684,11 +3698,14 @@ function RatingCell({ value, maxRating = 5 }) {
             const bPinned = pinnedSet.has(b) ? 0 : 1;
             return aPinned - bPinned;
         });
+        // 0 = not measured yet (first paint / jsdom) -- no cap rather than a guess.
+        const pinBudget = viewportWidth ? viewportWidth * MAX_PINNED_VIEWPORT_SHARE : Number.POSITIVE_INFINITY;
         let cursor = selectable ? 40 : 0;
         let pinnedCount = 0;
+        let budgetSpent = false;
         const entries = ordered.map((key)=>byKey.get(key)).filter((column)=>Boolean(column)).map((column)=>{
             const rawWidth = getColumnWidth(column.key) ?? column.width;
-            const pinned = pinnedSet.has(column.key);
+            const inPinnedSet = pinnedSet.has(column.key);
             // Fix (0.10.4, screenshot-confirmed pinned-column overlay): a pinned column
             // with no explicit/resized width used to keep `width` as `undefined` here,
             // which `DataTableColGroup` (DataTable.tsx) renders as an AUTO `<col>` --
@@ -3708,7 +3725,15 @@ function RatingCell({ value, maxRating = 5 }) {
             // without its own width now always renders at exactly
             // `DEFAULT_PINNED_COLUMN_WIDTH`, matching what every other pinned column's
             // offset already assumed it would be.
-            const width = pinned && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
+            const width = inPinnedSet && rawWidth === undefined ? DEFAULT_PINNED_COLUMN_WIDTH : rawWidth;
+            // Sticks only while the group still fits the pin budget (see
+            // MAX_PINNED_VIEWPORT_SHARE); the first pinned column always sticks.
+            // Once one pinned column overflows, every later one scrolls too -- a narrower
+            // late column must not stick past a gap.
+            if (inPinnedSet && pinnedCount > 0 && cursor + (width ?? DEFAULT_PINNED_COLUMN_WIDTH) > pinBudget) {
+                budgetSpent = true;
+            }
+            const pinned = inPinnedSet && !budgetSpent;
             const pinOffset = pinned ? cursor : 0;
             if (pinned) {
                 cursor += width ?? DEFAULT_PINNED_COLUMN_WIDTH;
@@ -3747,7 +3772,8 @@ function RatingCell({ value, maxRating = 5 }) {
         getColumnWidth,
         pinnedColumnKeys,
         selectable,
-        stickyFirst
+        stickyFirst,
+        viewportWidth
     ]);
 }
 /** The 40px selection column's own sticky-left state -- `stickyFirst` (the table-wide

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispy-seed/data-table",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
   "repository": {
     "type": "git",