@lensui/lens-table 0.1.7 → 0.1.8

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)) {
@@ -1734,6 +1735,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 +1748,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 +1986,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]);
@@ -2485,7 +2494,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 +2535,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 +3588,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 +3632,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)) {
@@ -1704,6 +1705,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 +1718,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 +1956,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]);
@@ -2455,7 +2464,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 +2505,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 +3558,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 +3602,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.8",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",