@lensui/lens-table 0.1.21 → 0.1.22

package/dist/index.cjs

@@ -841,6 +841,7 @@ function getMinimumColumnWidth(column, columnDraggable = false) {
 function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
   const options = typeof columnDraggableOrOptions === "boolean" ? { columnDraggable: columnDraggableOrOptions } : columnDraggableOrOptions;
   const columnDraggable = options.columnDraggable ?? false;
+  const stretchExcludedIndices = options.stretchExcludedIndices ?? /* @__PURE__ */ new Set();
   let left = 0;
   const metrics = columns.map((column) => {
     const width = Math.max(getMinimumColumnWidth(column, columnDraggable), column.width ?? DEFAULT_COLUMN_WIDTH);
@@ -850,9 +851,10 @@ function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
   });
   const viewportWidth = options.viewportWidth ?? 0;
   if (viewportWidth <= left || columns.length === 0) return metrics;
-  const unsetWidthStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.width === void 0 && column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
-  const dataStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
-  const targets = unsetWidthStretchable.length > 0 ? unsetWidthStretchable : dataStretchable.length > 0 ? dataStretchable : [];
+  const unsetWidthStretchable = columns.map((column, index) => ({ column, index })).filter(({ column, index }) => !stretchExcludedIndices.has(index) && column.width === void 0 && column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const allDataStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const dataStretchable = allDataStretchable.filter(({ index }) => !stretchExcludedIndices.has(index));
+  const targets = unsetWidthStretchable.length > 0 ? unsetWidthStretchable : dataStretchable.length > 0 ? dataStretchable : allDataStretchable.slice(-1);
   if (targets.length === 0) return metrics;
   const extra = viewportWidth - left;
   const baseTotal = targets.reduce((sum, { index }) => sum + metrics[index].width, 0);
@@ -1448,6 +1450,13 @@ function useControllableValue(value, defaultValue, onChange) {
 
 // src/Table.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
+  const insertionIndex = targetIndex + (edge === "right" ? 1 : 0) - (sourceIndex < targetIndex ? 1 : 0);
+  return Math.max(0, Math.min(columnCount - 1, insertionIndex));
+}
+function resolveColumnDropPlacement(edge) {
+  return edge === "right" ? "after" : "before";
+}
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
 var EMPTY_BODY_HEIGHT = 240;
@@ -1719,6 +1728,7 @@ function TableInner({
   const contextMenuEnabled = contextMenuConfig !== false;
   const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
   const [resizedColumnWidths, setResizedColumnWidths] = (0, import_react5.useState)({});
+  const [manuallyResizedColumnKeys, setManuallyResizedColumnKeys] = (0, import_react5.useState)(() => /* @__PURE__ */ new Set());
   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);
@@ -1840,6 +1850,10 @@ function TableInner({
     const previousSourceWidths = sourceColumnWidthsRef.current;
     const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
     sourceColumnWidthsRef.current = nextSourceWidths;
+    setManuallyResizedColumnKeys((current) => {
+      const next = new Set([...current].filter((key) => nextSourceWidths.has(key) && previousSourceWidths.get(key) === nextSourceWidths.get(key)));
+      return next.size === current.size ? current : next;
+    });
     setResizedColumnWidths((current) => {
       const sourceColumnByKey = new Map(leafSourceColumns.map((column) => [column.key, column]));
       let changed = false;
@@ -2101,11 +2115,14 @@ function TableInner({
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
   }, [editing, selection]);
-  const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
+  const stretchExcludedIndices = (0, import_react5.useMemo)(() => new Set(
+    columns.flatMap((column, index) => manuallyResizedColumnKeys.has(column.key) ? [index] : [])
+  ), [columns, manuallyResizedColumnKeys]);
   const metrics = (0, import_react5.useMemo)(() => buildColumnMetrics(columns, {
     columnDraggable,
-    viewportWidth: hasManualColumnWidths ? 0 : viewport.width
-  }), [columnDraggable, columns, hasManualColumnWidths, viewport.width]);
+    viewportWidth: viewport.width,
+    stretchExcludedIndices
+  }), [columnDraggable, columns, stretchExcludedIndices, 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]);
@@ -2890,6 +2907,7 @@ function TableInner({
     return headerDepth - 1;
   }, [headerDepth, headerRowHeights, headerRowOffsets]);
   const resizeColumn = (0, import_react5.useCallback)((columnKey, width2) => {
+    setManuallyResizedColumnKeys((current) => current.has(columnKey) ? current : new Set(current).add(columnKey));
     setResizedColumnWidths((current) => current[columnKey] === width2 ? current : { ...current, [columnKey]: width2 });
     onColumnResize?.(columnKey, width2);
   }, [onColumnResize]);
@@ -3035,15 +3053,7 @@ function TableInner({
   (0, import_react5.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas || !columnDraggable && !rowDraggable) return;
-    const getColumnDropIndex = (sourceIndex, targetIndex, edge) => {
-      if (edge === "right") return targetIndex;
-      const destinationIndex = targetIndex - (sourceIndex < targetIndex ? 1 : 0);
-      return Math.max(0, Math.min(columns.length - 1, destinationIndex));
-    };
-    const getColumnDropPlacement = (sourceIndex, targetIndex, edge) => {
-      if (edge !== "right") return "before";
-      return targetIndex < sourceIndex ? "before" : "after";
-    };
+    const getColumnDropIndex = (sourceIndex, targetIndex, edge) => resolveColumnDropIndex(sourceIndex, targetIndex, edge, columns.length);
     const getHeaderColumn = (clientX, clientY) => {
       const rect = canvas.getBoundingClientRect();
       const headerY = fixedHeader ? 0 : -scrollRef.current.top;
@@ -3053,8 +3063,9 @@ function TableInner({
     };
     const getHeaderDragCell = (clientX, clientY) => {
       const cell = locateHeaderCell(clientX, clientY);
-      if (!cell) return null;
-      return locateHeaderCellDragHandle(clientX, cell) && !locateHeaderResizeCell(clientX, clientY) ? cell : null;
+      if (!cell || locateHeaderResizeCell(clientX, clientY)) return null;
+      if (cell.leaf && locateHeaderAction(clientX, cell.startIndex)) return null;
+      return cell;
     };
     const cleanupDrag = (0, import_adapter.draggable)({
       element: canvas,
@@ -3315,7 +3326,7 @@ function TableInner({
               sourceKey: String(source.data.sourceKey),
               targetKey: validDrop.targetKey,
               parentKey: validDrop.parentKey,
-              placement: getColumnDropPlacement(validDrop.sourceIndex, validDrop.rawTargetIndex, validDrop.columnEdge)
+              placement: resolveColumnDropPlacement(validDrop.columnEdge)
             }
           );
         }
@@ -3370,7 +3381,7 @@ function TableInner({
       cleanupDrag();
       cleanupDrop();
     };
-  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerActionSize, headerActionSlotWidth, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
+  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerActionSize, headerActionSlotWidth, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
   const locateCell = (0, import_react5.useCallback)((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3826,7 +3837,7 @@ function TableInner({
     const isAxisSelected = selectedColumnKeySet.has(column.key);
     const selectedClassName = isAxisSelected ? " is-axis-selected" : "";
     const hoveredColumnClassName = hoveredHeaderColumnIndex === columnIndex ? " is-header-hovered" : "";
-    const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
+    const top = column.renderHeader ? headerLeafTop + 8 + Math.max(0, (16 - headerActionSize) / 2) : headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
     const icons = [];

package/dist/index.d.cts

@@ -461,6 +461,8 @@ interface ColumnMetric {
 interface BuildColumnMetricsOptions {
     columnDraggable?: boolean;
     viewportWidth?: number;
+    /** Columns whose manually resized widths must remain exact while spare width is distributed. */
+    stretchExcludedIndices?: ReadonlySet<number>;
 }
 /**
  * Build cumulative column positions used by both canvas painting and DOM

package/dist/index.d.ts

@@ -461,6 +461,8 @@ interface ColumnMetric {
 interface BuildColumnMetricsOptions {
     columnDraggable?: boolean;
     viewportWidth?: number;
+    /** Columns whose manually resized widths must remain exact while spare width is distributed. */
+    stretchExcludedIndices?: ReadonlySet<number>;
 }
 /**
  * Build cumulative column positions used by both canvas painting and DOM

package/dist/index.js

@@ -811,6 +811,7 @@ function getMinimumColumnWidth(column, columnDraggable = false) {
 function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
   const options = typeof columnDraggableOrOptions === "boolean" ? { columnDraggable: columnDraggableOrOptions } : columnDraggableOrOptions;
   const columnDraggable = options.columnDraggable ?? false;
+  const stretchExcludedIndices = options.stretchExcludedIndices ?? /* @__PURE__ */ new Set();
   let left = 0;
   const metrics = columns.map((column) => {
     const width = Math.max(getMinimumColumnWidth(column, columnDraggable), column.width ?? DEFAULT_COLUMN_WIDTH);
@@ -820,9 +821,10 @@ function buildColumnMetrics(columns, columnDraggableOrOptions = false) {
   });
   const viewportWidth = options.viewportWidth ?? 0;
   if (viewportWidth <= left || columns.length === 0) return metrics;
-  const unsetWidthStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.width === void 0 && column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
-  const dataStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
-  const targets = unsetWidthStretchable.length > 0 ? unsetWidthStretchable : dataStretchable.length > 0 ? dataStretchable : [];
+  const unsetWidthStretchable = columns.map((column, index) => ({ column, index })).filter(({ column, index }) => !stretchExcludedIndices.has(index) && column.width === void 0 && column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const allDataStretchable = columns.map((column, index) => ({ column, index })).filter(({ column }) => column.fixed === void 0 && !column.rowSelection && !column.rowDragHandle && !column.rowNumber);
+  const dataStretchable = allDataStretchable.filter(({ index }) => !stretchExcludedIndices.has(index));
+  const targets = unsetWidthStretchable.length > 0 ? unsetWidthStretchable : dataStretchable.length > 0 ? dataStretchable : allDataStretchable.slice(-1);
   if (targets.length === 0) return metrics;
   const extra = viewportWidth - left;
   const baseTotal = targets.reduce((sum, { index }) => sum + metrics[index].width, 0);
@@ -1418,6 +1420,13 @@ function useControllableValue(value, defaultValue, onChange) {
 
 // src/Table.tsx
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function resolveColumnDropIndex(sourceIndex, targetIndex, edge, columnCount) {
+  const insertionIndex = targetIndex + (edge === "right" ? 1 : 0) - (sourceIndex < targetIndex ? 1 : 0);
+  return Math.max(0, Math.min(columnCount - 1, insertionIndex));
+}
+function resolveColumnDropPlacement(edge) {
+  return edge === "right" ? "after" : "before";
+}
 var ANNOTATION_COLORS = ["#f44336", "#ff7a45", "#f5a623", "#f2c94c", "#52c41a", "#13a8a8", "#1677ff", "#597ef7", "#9254de", "#eb2f96"];
 var FALLBACK_HEIGHT = 480;
 var EMPTY_BODY_HEIGHT = 240;
@@ -1689,6 +1698,7 @@ function TableInner({
   const contextMenuEnabled = contextMenuConfig !== false;
   const customContextMenuConfig = typeof contextMenuConfig === "object" ? contextMenuConfig : void 0;
   const [resizedColumnWidths, setResizedColumnWidths] = useState4({});
+  const [manuallyResizedColumnKeys, setManuallyResizedColumnKeys] = useState4(() => /* @__PURE__ */ new Set());
   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);
@@ -1810,6 +1820,10 @@ function TableInner({
     const previousSourceWidths = sourceColumnWidthsRef.current;
     const nextSourceWidths = new Map(leafSourceColumns.map((column) => [column.key, column.width]));
     sourceColumnWidthsRef.current = nextSourceWidths;
+    setManuallyResizedColumnKeys((current) => {
+      const next = new Set([...current].filter((key) => nextSourceWidths.has(key) && previousSourceWidths.get(key) === nextSourceWidths.get(key)));
+      return next.size === current.size ? current : next;
+    });
     setResizedColumnWidths((current) => {
       const sourceColumnByKey = new Map(leafSourceColumns.map((column) => [column.key, column]));
       let changed = false;
@@ -2071,11 +2085,14 @@ function TableInner({
     if (selection?.rowKey === editing.rowKey && selection.columnKey === editing.columnKey) return;
     setEditing(null);
   }, [editing, selection]);
-  const hasManualColumnWidths = Object.keys(resizedColumnWidths).length > 0;
+  const stretchExcludedIndices = useMemo(() => new Set(
+    columns.flatMap((column, index) => manuallyResizedColumnKeys.has(column.key) ? [index] : [])
+  ), [columns, manuallyResizedColumnKeys]);
   const metrics = useMemo(() => buildColumnMetrics(columns, {
     columnDraggable,
-    viewportWidth: hasManualColumnWidths ? 0 : viewport.width
-  }), [columnDraggable, columns, hasManualColumnWidths, viewport.width]);
+    viewportWidth: viewport.width,
+    stretchExcludedIndices
+  }), [columnDraggable, columns, stretchExcludedIndices, 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]);
@@ -2860,6 +2877,7 @@ function TableInner({
     return headerDepth - 1;
   }, [headerDepth, headerRowHeights, headerRowOffsets]);
   const resizeColumn = useCallback2((columnKey, width2) => {
+    setManuallyResizedColumnKeys((current) => current.has(columnKey) ? current : new Set(current).add(columnKey));
     setResizedColumnWidths((current) => current[columnKey] === width2 ? current : { ...current, [columnKey]: width2 });
     onColumnResize?.(columnKey, width2);
   }, [onColumnResize]);
@@ -3005,15 +3023,7 @@ function TableInner({
   useEffect2(() => {
     const canvas = canvasRef.current;
     if (!canvas || !columnDraggable && !rowDraggable) return;
-    const getColumnDropIndex = (sourceIndex, targetIndex, edge) => {
-      if (edge === "right") return targetIndex;
-      const destinationIndex = targetIndex - (sourceIndex < targetIndex ? 1 : 0);
-      return Math.max(0, Math.min(columns.length - 1, destinationIndex));
-    };
-    const getColumnDropPlacement = (sourceIndex, targetIndex, edge) => {
-      if (edge !== "right") return "before";
-      return targetIndex < sourceIndex ? "before" : "after";
-    };
+    const getColumnDropIndex = (sourceIndex, targetIndex, edge) => resolveColumnDropIndex(sourceIndex, targetIndex, edge, columns.length);
     const getHeaderColumn = (clientX, clientY) => {
       const rect = canvas.getBoundingClientRect();
       const headerY = fixedHeader ? 0 : -scrollRef.current.top;
@@ -3023,8 +3033,9 @@ function TableInner({
     };
     const getHeaderDragCell = (clientX, clientY) => {
       const cell = locateHeaderCell(clientX, clientY);
-      if (!cell) return null;
-      return locateHeaderCellDragHandle(clientX, cell) && !locateHeaderResizeCell(clientX, clientY) ? cell : null;
+      if (!cell || locateHeaderResizeCell(clientX, clientY)) return null;
+      if (cell.leaf && locateHeaderAction(clientX, cell.startIndex)) return null;
+      return cell;
     };
     const cleanupDrag = draggable({
       element: canvas,
@@ -3285,7 +3296,7 @@ function TableInner({
               sourceKey: String(source.data.sourceKey),
               targetKey: validDrop.targetKey,
               parentKey: validDrop.parentKey,
-              placement: getColumnDropPlacement(validDrop.sourceIndex, validDrop.rawTargetIndex, validDrop.columnEdge)
+              placement: resolveColumnDropPlacement(validDrop.columnEdge)
             }
           );
         }
@@ -3340,7 +3351,7 @@ function TableInner({
       cleanupDrag();
       cleanupDrop();
     };
-  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerActionSize, headerActionSlotWidth, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderCell, locateHeaderCellDragHandle, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
+  }, [applyColumnOrder, applyRowOrder, bodyTop, columnDraggable, columns, filterValues, fixedHeader, getCellLabel, getDisplayedColumnLeft, getHeaderCellWidth, getRowKey, headerActionSize, headerActionSlotWidth, headerCells, headerHeight, hideDragTooltips, locateColumn, locateHeaderAction, locateHeaderCell, locateHeaderResizeCell, locateRow, measureHeaderTitleWidth, metrics, rowDraggable, rowHeight, rows, selectedRowKeySet, selection, setDragGuide, setRowDragGuide, sortState, utilityColumnCount]);
   const locateCell = useCallback2((clientX, clientY) => {
     const canvas = canvasRef.current;
     if (!canvas) return null;
@@ -3796,7 +3807,7 @@ function TableInner({
     const isAxisSelected = selectedColumnKeySet.has(column.key);
     const selectedClassName = isAxisSelected ? " is-axis-selected" : "";
     const hoveredColumnClassName = hoveredHeaderColumnIndex === columnIndex ? " is-header-hovered" : "";
-    const top = headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
+    const top = column.renderHeader ? headerLeafTop + 8 + Math.max(0, (16 - headerActionSize) / 2) : headerLeafTop + (headerLeafHeight - headerActionSize) / 2;
     const visibleActions = getVisibleHeaderActions(column, metrics[columnIndex].width, columnDraggable, measureHeaderTitleWidth(columnIndex), headerActionSlotWidth);
     let right = left + metrics[columnIndex].width - (visibleActions.drag ? headerActionSlotWidth : 2);
     const icons = [];

package/package.json

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