@lensui/lens-table 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -1622,6 +1622,7 @@ function TableInner({
   const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
   const [resizedColumnWidths, setResizedColumnWidths] = (0, import_react5.useState)({});
   const leafSourceColumns = (0, import_react5.useMemo)(() => flattenDataColumns(sourceColumns), [sourceColumns]);
+  const sourceColumnWidthsRef = (0, import_react5.useRef)(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
   (0, import_react5.useEffect)(() => {
     if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
@@ -1697,7 +1698,8 @@ function TableInner({
   const hoveredRowIndexRef = (0, import_react5.useRef)(null);
   const [viewport, setViewport] = (0, import_react5.useState)({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
   const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = (0, import_react5.useState)(0);
-  const resolvedHeight = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
+  const [availableHeight, setAvailableHeight] = (0, import_react5.useState)(FALLBACK_HEIGHT);
+  const resolvedHeight = typeof height === "number" ? height : availableHeight;
   const [scrollPosition, setScrollPosition] = (0, import_react5.useState)({ left: 0, top: 0 });
   const scrollRef = (0, import_react5.useRef)({ left: 0, top: 0 });
   const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
@@ -1734,6 +1736,9 @@ function TableInner({
     setSelectionRange(null);
   }, [rangeSelection]);
   (0, import_react5.useEffect)(() => {
+    const previousSourceWidths = sourceColumnWidthsRef.current;
+    const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
+    sourceColumnWidthsRef.current = nextSourceWidths;
     setResizedColumnWidths((current) => {
       const sourceColumnByKey = new Map(leafSourceColumns.map((column) => [column.key, column]));
       let changed = false;
@@ -1744,7 +1749,8 @@ function TableInner({
           changed = true;
           return;
         }
-        if (sourceColumn.width !== void 0 && sourceColumn.width !== value) {
+        const sourceWidthChanged = previousSourceWidths.get(key) !== sourceColumn.width;
+        if (sourceWidthChanged && sourceColumn.width !== void 0 && sourceColumn.width !== value) {
           changed = true;
           return;
         }
@@ -1981,7 +1987,11 @@ function TableInner({
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
   }, [editing, selection]);
-  const metrics = (0, import_react5.useMemo)(() => buildColumnMetrics(columns, { columnDraggable, viewportWidth: viewport.width }), [columnDraggable, columns, viewport.width]);
+  const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
+  const metrics = (0, import_react5.useMemo)(() => buildColumnMetrics(columns, {
+    columnDraggable,
+    viewportWidth: hasManualColumnWidths ? 0 : viewport.width
+  }), [columnDraggable, columns, hasManualColumnWidths, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
   const fixedWidth = (0, import_react5.useMemo)(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
@@ -2366,7 +2376,15 @@ function TableInner({
   (0, import_react5.useLayoutEffect)(() => {
     const element = scrollerRef.current;
     if (!element) return;
+    const root = element.parentElement;
     const update = () => {
+      if (root && typeof height !== "number") {
+        const renderedHeight = root.style.height;
+        root.style.height = height;
+        const nextAvailableHeight = root.clientHeight || FALLBACK_HEIGHT;
+        root.style.height = renderedHeight;
+        setAvailableHeight(nextAvailableHeight);
+      }
       const measuredHeight = element.clientHeight || (typeof height === "number" ? height : FALLBACK_HEIGHT);
       setViewport({ width: element.clientWidth, height: measuredHeight });
       setHorizontalScrollbarHeight(Math.max(0, element.offsetHeight - element.clientHeight));
@@ -2378,6 +2396,7 @@ function TableInner({
     }
     const observer = new ResizeObserver(update);
     observer.observe(element);
+    if (root?.parentElement) observer.observe(root.parentElement);
     return () => observer.disconnect();
   }, [height]);
   (0, import_react5.useEffect)(() => {
@@ -2485,7 +2504,8 @@ function TableInner({
     const horizontalThumb = horizontalScrollbarThumbRef.current;
     if (!scroller || !verticalTrack || !verticalThumb || !horizontalTrack || !horizontalThumb) return;
     const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-    if (maxScrollTop <= 1 || renderHeight <= 0) {
+    const contentFitsAutoHeight = autoHeight && effectiveHeight >= realContentHeight - 1;
+    if (contentFitsAutoHeight || maxScrollTop <= 1 || renderHeight <= 0) {
       verticalTrack.style.display = "none";
     } else {
       const top = fixedHeader ? bodyTop : 0;
@@ -2525,7 +2545,7 @@ function TableInner({
     horizontalTrack.style.bottom = `${bottomSummaryHeight + 2}px`;
     horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
     horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
-  }, [bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, renderHeight, rightFixedWidth, viewport.width]);
+  }, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
   (0, import_react5.useLayoutEffect)(() => {
     updateCustomScrollbars();
   }, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
@@ -3578,6 +3598,18 @@ function TableInner({
       const { cell: resizeCell, edge: resizeEdge } = resizeHit;
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
+      setResizedColumnWidths((current) => {
+        let changed = false;
+        const next = { ...current };
+        columns.forEach((column, index) => {
+          if (column.rowSelection || column.rowDragHandle || column.rowNumber) return;
+          const displayedWidth = metrics[index]?.width;
+          if (displayedWidth === void 0 || next[column.key] === displayedWidth) return;
+          next[column.key] = displayedWidth;
+          changed = true;
+        });
+        return changed ? next : current;
+      });
       const resizeIndex = resizeCell.endIndex;
       const resizeIndices = resizeCell.leaf ? [resizeIndex] : Array.from({ length: resizeCell.endIndex - resizeCell.startIndex + 1 }, (_, index) => resizeCell.startIndex + index);
       const startWidths = resizeIndices.map((index) => metrics[index].width);
@@ -3610,7 +3642,7 @@ function TableInner({
     const setGuideFromWidths = (nextWidths) => {
       const widthByIndex = new Map(drag.resizeIndices.map((columnIndex, index) => [columnIndex, nextWidths[index]]));
       const nextColumns = columns.map((column2, index) => widthByIndex.has(index) ? { ...column2, width: widthByIndex.get(index) } : column2);
-      const nextMetrics = buildColumnMetrics(nextColumns, { columnDraggable, viewportWidth: viewport.width });
+      const nextMetrics = buildColumnMetrics(nextColumns, { columnDraggable, viewportWidth: 0 });
       setResizeGuideX(getHeaderCellEdgeFromMetrics(drag.resizeStartIndex, drag.resizeEndIndex, drag.resizeEdge, nextMetrics));
     };
     if (drag.resizeIndices.length > 1) {

package/dist/index.js

@@ -1592,6 +1592,7 @@ function TableInner({
   const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
   const [resizedColumnWidths, setResizedColumnWidths] = useState4({});
   const leafSourceColumns = useMemo(() => flattenDataColumns(sourceColumns), [sourceColumns]);
+  const sourceColumnWidthsRef = useRef2(new Map(leafSourceColumns.map((column) => [column.key, column.width])));
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
   useEffect2(() => {
     if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
@@ -1667,7 +1668,8 @@ function TableInner({
   const hoveredRowIndexRef = useRef2(null);
   const [viewport, setViewport] = useState4({ width: 0, height: typeof height === "number" ? height : FALLBACK_HEIGHT });
   const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = useState4(0);
-  const resolvedHeight = typeof height === "number" ? height : viewport.height || FALLBACK_HEIGHT;
+  const [availableHeight, setAvailableHeight] = useState4(FALLBACK_HEIGHT);
+  const resolvedHeight = typeof height === "number" ? height : availableHeight;
   const [scrollPosition, setScrollPosition] = useState4({ left: 0, top: 0 });
   const scrollRef = useRef2({ left: 0, top: 0 });
   const [rowKeys, setRowKeys] = useControllableKeys(selectedRowKeys, defaultSelectedRowKeys, (keys) => {
@@ -1704,6 +1706,9 @@ function TableInner({
     setSelectionRange(null);
   }, [rangeSelection]);
   useEffect2(() => {
+    const previousSourceWidths = sourceColumnWidthsRef.current;
+    const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
+    sourceColumnWidthsRef.current = nextSourceWidths;
     setResizedColumnWidths((current) => {
       const sourceColumnByKey = new Map(leafSourceColumns.map((column) => [column.key, column]));
       let changed = false;
@@ -1714,7 +1719,8 @@ function TableInner({
           changed = true;
           return;
         }
-        if (sourceColumn.width !== void 0 && sourceColumn.width !== value) {
+        const sourceWidthChanged = previousSourceWidths.get(key) !== sourceColumn.width;
+        if (sourceWidthChanged && sourceColumn.width !== void 0 && sourceColumn.width !== value) {
           changed = true;
           return;
         }
@@ -1951,7 +1957,11 @@ function TableInner({
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
   }, [editing, selection]);
-  const metrics = useMemo(() => buildColumnMetrics(columns, { columnDraggable, viewportWidth: viewport.width }), [columnDraggable, columns, viewport.width]);
+  const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
+  const metrics = useMemo(() => buildColumnMetrics(columns, {
+    columnDraggable,
+    viewportWidth: hasManualColumnWidths ? 0 : viewport.width
+  }), [columnDraggable, columns, hasManualColumnWidths, viewport.width]);
   const contentWidth = metrics.length > 0 ? metrics[metrics.length - 1].right : 0;
   const contentHeight = rows.length * rowHeight;
   const fixedWidth = useMemo(() => columns.reduce((width2, column, index) => column.fixed === "left" ? width2 + metrics[index].width : width2, 0), [columns, metrics]);
@@ -2336,7 +2346,15 @@ function TableInner({
   useLayoutEffect2(() => {
     const element = scrollerRef.current;
     if (!element) return;
+    const root = element.parentElement;
     const update = () => {
+      if (root && typeof height !== "number") {
+        const renderedHeight = root.style.height;
+        root.style.height = height;
+        const nextAvailableHeight = root.clientHeight || FALLBACK_HEIGHT;
+        root.style.height = renderedHeight;
+        setAvailableHeight(nextAvailableHeight);
+      }
       const measuredHeight = element.clientHeight || (typeof height === "number" ? height : FALLBACK_HEIGHT);
       setViewport({ width: element.clientWidth, height: measuredHeight });
       setHorizontalScrollbarHeight(Math.max(0, element.offsetHeight - element.clientHeight));
@@ -2348,6 +2366,7 @@ function TableInner({
     }
     const observer = new ResizeObserver(update);
     observer.observe(element);
+    if (root?.parentElement) observer.observe(root.parentElement);
     return () => observer.disconnect();
   }, [height]);
   useEffect2(() => {
@@ -2455,7 +2474,8 @@ function TableInner({
     const horizontalThumb = horizontalScrollbarThumbRef.current;
     if (!scroller || !verticalTrack || !verticalThumb || !horizontalTrack || !horizontalThumb) return;
     const maxScrollTop = scroller.scrollHeight - scroller.clientHeight;
-    if (maxScrollTop <= 1 || renderHeight <= 0) {
+    const contentFitsAutoHeight = autoHeight && effectiveHeight >= realContentHeight - 1;
+    if (contentFitsAutoHeight || maxScrollTop <= 1 || renderHeight <= 0) {
       verticalTrack.style.display = "none";
     } else {
       const top = fixedHeader ? bodyTop : 0;
@@ -2495,7 +2515,7 @@ function TableInner({
     horizontalTrack.style.bottom = `${bottomSummaryHeight + 2}px`;
     horizontalThumb.style.width = `${Math.min(trackWidth, thumbWidth)}px`;
     horizontalThumb.style.transform = `translateX(${thumbLeft}px)`;
-  }, [bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, renderHeight, rightFixedWidth, viewport.width]);
+  }, [autoHeight, bodyTop, bottomSummaryHeight, effectiveHeight, fixedHeader, fixedWidth, realContentHeight, renderHeight, rightFixedWidth, viewport.width]);
   useLayoutEffect2(() => {
     updateCustomScrollbars();
   }, [contentHeight, contentWidth, updateCustomScrollbars, viewport.height, viewport.width]);
@@ -3548,6 +3568,18 @@ function TableInner({
       const { cell: resizeCell, edge: resizeEdge } = resizeHit;
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
+      setResizedColumnWidths((current) => {
+        let changed = false;
+        const next = { ...current };
+        columns.forEach((column, index) => {
+          if (column.rowSelection || column.rowDragHandle || column.rowNumber) return;
+          const displayedWidth = metrics[index]?.width;
+          if (displayedWidth === void 0 || next[column.key] === displayedWidth) return;
+          next[column.key] = displayedWidth;
+          changed = true;
+        });
+        return changed ? next : current;
+      });
       const resizeIndex = resizeCell.endIndex;
       const resizeIndices = resizeCell.leaf ? [resizeIndex] : Array.from({ length: resizeCell.endIndex - resizeCell.startIndex + 1 }, (_, index) => resizeCell.startIndex + index);
       const startWidths = resizeIndices.map((index) => metrics[index].width);
@@ -3580,7 +3612,7 @@ function TableInner({
     const setGuideFromWidths = (nextWidths) => {
       const widthByIndex = new Map(drag.resizeIndices.map((columnIndex, index) => [columnIndex, nextWidths[index]]));
       const nextColumns = columns.map((column2, index) => widthByIndex.has(index) ? { ...column2, width: widthByIndex.get(index) } : column2);
-      const nextMetrics = buildColumnMetrics(nextColumns, { columnDraggable, viewportWidth: viewport.width });
+      const nextMetrics = buildColumnMetrics(nextColumns, { columnDraggable, viewportWidth: 0 });
       setResizeGuideX(getHeaderCellEdgeFromMetrics(drag.resizeStartIndex, drag.resizeEndIndex, drag.resizeEdge, nextMetrics));
     };
     if (drag.resizeIndices.length > 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",