@lensui/lens-table 0.1.69 → 0.1.71

package/dist/index.cjs

@@ -990,8 +990,8 @@ function getVisibleHeaderActions(column, width, columnDraggable = false, titleWi
   return { filter: visible.has("filter"), sort: visible.has("sort"), drag: visible.has("drag") };
 }
 function getMinimumColumnWidth(column, columnDraggable = false) {
-  if (column.rowDragHandle) return 36;
   if (column.rowSelection) return Math.max(24, column.width ?? 44);
+  if (column.rowDragHandle) return 36;
   if (column.rowNumber) return 44;
   return 60;
 }
@@ -1283,7 +1283,7 @@ function paintGrid(options) {
           if (columnIndex === rangeColumnStart) ctx.fillRect(x, y, 2, cellHeight);
           if (columnIndex === rangeColumnEnd) ctx.fillRect(x + cellWidth - 2, y, 2, cellHeight);
         }
-        if (column.rowDragHandle) {
+        if (column.rowDragHandle && !column.rowSelection) {
           const iconLeft = x + (cellWidth - 16) / 2;
           const iconTop = y + (cellHeight - 16) / 2;
           ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.icon;
@@ -1874,6 +1874,7 @@ function TableInner({
   onColumnsReorder,
   onColumnResize,
   rowDraggable = false,
+  combineRowSelectionAndDrag = false,
   utilityColumnOrder = ["drag", "selection", "rowNumber"],
   onRowsReorder,
   onInsertRows,
@@ -1942,6 +1943,7 @@ function TableInner({
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
   const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
   const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
+  const hasCombinedRowUtility = combineRowSelectionAndDrag && rowDraggable && showRowCheckbox;
   (0, import_react8.useEffect)(() => {
     if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
       console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
@@ -1949,8 +1951,22 @@ function TableInner({
   }, [sourceColumns]);
   const columns = (0, import_react8.useMemo)(() => {
     const utilityColumns = [];
+    let combinedRowUtilityAdded = false;
     utilityColumnOrder.forEach((utilityColumn) => {
-      if (utilityColumn === "drag" && rowDraggable) {
+      if (hasCombinedRowUtility && (utilityColumn === "drag" || utilityColumn === "selection")) {
+        if (combinedRowUtilityAdded) return;
+        combinedRowUtilityAdded = true;
+        utilityColumns.push({
+          key: "__rvg_row_selection_drag__",
+          title: "",
+          width: rowSelectionColumnWidth,
+          align: "center",
+          fixed: "left",
+          rowSelection: true,
+          rowSelectionIndicator,
+          rowDragHandle: true
+        });
+      } else if (utilityColumn === "drag" && rowDraggable) {
         utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
       } else if (utilityColumn === "selection" && showRowCheckbox) {
         utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
@@ -1963,8 +1979,8 @@ function TableInner({
       return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
     });
     return [...utilityColumns, ...dataColumns];
-  }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length, utilityColumnOrder]);
-  const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
+  }, [hasCombinedRowUtility, leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length, utilityColumnOrder]);
+  const utilityColumnCount = (hasCombinedRowUtility ? 1 : (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0)) + (rowNumber ? 1 : 0);
   const headerCells = (0, import_react8.useMemo)(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
   const activeCustomHeaderLevels = (0, import_react8.useMemo)(() => {
     const levels = /* @__PURE__ */ new Map();
@@ -2858,7 +2874,7 @@ function TableInner({
       verticalTrack.style.display = "none";
     } else {
       const top = fixedHeader ? bodyTop : 0;
-      const bottom = bottomSummaryHeight;
+      const bottom = bottomSummaryHeight + 2;
       const trackHeight = Math.max(0, effectiveHeight - top - bottom);
       if (trackHeight <= 0) {
         verticalTrack.style.display = "none";
@@ -3320,13 +3336,15 @@ function TableInner({
               cell.style.left = `${left}px`;
               cell.style.width = `${columnWidth}px`;
               cell.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
-              if (column.rowDragHandle) {
+              if (column.rowDragHandle && !column.rowSelection) {
                 cell.appendChild(createRowDragHandleSvg());
               } else if (column.rowSelection) {
-                const checkbox = document.createElement("span");
-                checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
-                checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
-                cell.appendChild(checkbox);
+                if (column.rowSelectionIndicator !== "none") {
+                  const checkbox = document.createElement("span");
+                  checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
+                  checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
+                  cell.appendChild(checkbox);
+                }
               } else {
                 cell.textContent = getCellLabel(sourceIndex, columnIndex);
               }
@@ -3751,6 +3769,9 @@ function TableInner({
     const metric = metrics[editing.columnIndex];
     const column = columns[editing.columnIndex];
     if (!metric || !column) return void 0;
+    const row = rows[editing.rowIndex];
+    const cellValue = column.dataIndex === void 0 ? void 0 : row?.[column.dataIndex];
+    const backgroundColor = row ? column.cellStyle?.(cellValue, row, editing.rowIndex).backgroundColor ?? rowStyle?.(row, editing.rowIndex).backgroundColor : void 0;
     const fixedSide = column.fixed;
     const span = getCellSpan(editing.rowIndex, editing.columnIndex);
     const cellWidth = getCellDisplayWidth(editing.columnIndex, span?.colSpan ?? 1);
@@ -3769,7 +3790,8 @@ function TableInner({
         left: visibleLeft,
         top: visibleTop,
         width: Math.max(0, visibleRight - visibleLeft),
-        height: Math.max(0, visibleBottom - visibleTop)
+        height: Math.max(0, visibleBottom - visibleTop),
+        backgroundColor
       };
     }
     return {
@@ -3778,9 +3800,10 @@ function TableInner({
       width: cellWidth,
       height: cellHeight,
       textAlign: column.align ?? "left",
+      backgroundColor,
       clipPath: `inset(${Math.max(0, visibleTop - cellTop)}px ${Math.max(0, cellLeft + cellWidth - visibleRight)}px ${Math.max(0, cellTop + cellHeight - visibleBottom)}px ${Math.max(0, visibleLeft - cellLeft)}px)`
     };
-  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
+  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, rowStyle, viewport.width]);
   const handleColumnPointerDown = (0, import_react8.useCallback)((event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const localY = event.clientY - rect.top;
@@ -5011,9 +5034,7 @@ function TableInner({
             handleColumnPointerDown(event);
             if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
-            const columnIndex = locateColumn(event.clientX);
-            const rowDragHandle = rowDraggable && columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(event.clientY) >= 0;
-            if (headerDragCell && locateHeaderCellDragHandle(event.clientX, event.clientY, headerDragCell) || rowDragHandle) {
+            if (headerDragCell && locateHeaderCellDragHandle(event.clientX, event.clientY, headerDragCell)) {
               hideDragTooltips();
               document.documentElement.classList.add("rvg-is-dragging");
               event.currentTarget.style.cursor = "move";
@@ -5087,7 +5108,7 @@ function TableInner({
               setSelection(null);
               return;
             }
-            if (columns[cell.columnIndex].rowDragHandle || columns[cell.columnIndex].rowNumber) {
+            if (columns[cell.columnIndex].rowDragHandle && !columns[cell.columnIndex].rowSelection || columns[cell.columnIndex].rowNumber) {
               clickedCellRef.current = null;
               return;
             }

package/dist/index.d.cts

@@ -421,6 +421,8 @@ interface TableProps<Row extends object> {
     }) => void;
     onColumnResize?: (columnKey: string, width: number) => void;
     rowDraggable?: boolean;
+    /** Merge row selection and row dragging into one utility column. Click selects; press and drag reorders. */
+    combineRowSelectionAndDrag?: boolean;
     /** Order of the generated row utility columns. Defaults to drag, selection, then row number. */
     utilityColumnOrder?: Array<'drag' | 'selection' | 'rowNumber'>;
     onRowsReorder?: (rows: Row[], detail: {

package/dist/index.d.ts

@@ -421,6 +421,8 @@ interface TableProps<Row extends object> {
     }) => void;
     onColumnResize?: (columnKey: string, width: number) => void;
     rowDraggable?: boolean;
+    /** Merge row selection and row dragging into one utility column. Click selects; press and drag reorders. */
+    combineRowSelectionAndDrag?: boolean;
     /** Order of the generated row utility columns. Defaults to drag, selection, then row number. */
     utilityColumnOrder?: Array<'drag' | 'selection' | 'rowNumber'>;
     onRowsReorder?: (rows: Row[], detail: {

package/dist/index.js

@@ -960,8 +960,8 @@ function getVisibleHeaderActions(column, width, columnDraggable = false, titleWi
   return { filter: visible.has("filter"), sort: visible.has("sort"), drag: visible.has("drag") };
 }
 function getMinimumColumnWidth(column, columnDraggable = false) {
-  if (column.rowDragHandle) return 36;
   if (column.rowSelection) return Math.max(24, column.width ?? 44);
+  if (column.rowDragHandle) return 36;
   if (column.rowNumber) return 44;
   return 60;
 }
@@ -1253,7 +1253,7 @@ function paintGrid(options) {
           if (columnIndex === rangeColumnStart) ctx.fillRect(x, y, 2, cellHeight);
           if (columnIndex === rangeColumnEnd) ctx.fillRect(x + cellWidth - 2, y, 2, cellHeight);
         }
-        if (column.rowDragHandle) {
+        if (column.rowDragHandle && !column.rowSelection) {
           const iconLeft = x + (cellWidth - 16) / 2;
           const iconTop = y + (cellHeight - 16) / 2;
           ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : colors.icon;
@@ -1844,6 +1844,7 @@ function TableInner({
   onColumnsReorder,
   onColumnResize,
   rowDraggable = false,
+  combineRowSelectionAndDrag = false,
   utilityColumnOrder = ["drag", "selection", "rowNumber"],
   onRowsReorder,
   onInsertRows,
@@ -1912,6 +1913,7 @@ function TableInner({
   const showRowCheckbox = Boolean(rowSelection) && (typeof rowSelection !== "object" || rowSelection.showCheckbox !== false);
   const rowSelectionIndicator = typeof rowSelection === "object" ? rowSelection.indicator ?? "checkbox" : "checkbox";
   const rowSelectionColumnWidth = typeof rowSelection === "object" ? Math.max(24, rowSelection.columnWidth ?? 44) : 44;
+  const hasCombinedRowUtility = combineRowSelectionAndDrag && rowDraggable && showRowCheckbox;
   useEffect3(() => {
     if (!isProductionRuntime() && hasNestedFixedColumns(sourceColumns)) {
       console.warn("[Table] Multi-level headers only support fixed columns on top-level columns. Nested fixed values are ignored.");
@@ -1919,8 +1921,22 @@ function TableInner({
   }, [sourceColumns]);
   const columns = useMemo2(() => {
     const utilityColumns = [];
+    let combinedRowUtilityAdded = false;
     utilityColumnOrder.forEach((utilityColumn) => {
-      if (utilityColumn === "drag" && rowDraggable) {
+      if (hasCombinedRowUtility && (utilityColumn === "drag" || utilityColumn === "selection")) {
+        if (combinedRowUtilityAdded) return;
+        combinedRowUtilityAdded = true;
+        utilityColumns.push({
+          key: "__rvg_row_selection_drag__",
+          title: "",
+          width: rowSelectionColumnWidth,
+          align: "center",
+          fixed: "left",
+          rowSelection: true,
+          rowSelectionIndicator,
+          rowDragHandle: true
+        });
+      } else if (utilityColumn === "drag" && rowDraggable) {
         utilityColumns.push({ key: "__rvg_row_drag__", title: "", width: 36, align: "center", fixed: "left", rowDragHandle: true });
       } else if (utilityColumn === "selection" && showRowCheckbox) {
         utilityColumns.push({ key: "__rvg_row_selection__", title: "", width: rowSelectionColumnWidth, align: "center", fixed: "left", rowSelection: true, rowSelectionIndicator });
@@ -1933,8 +1949,8 @@ function TableInner({
       return resizedWidth === void 0 ? column : { ...column, width: resizedWidth };
     });
     return [...utilityColumns, ...dataColumns];
-  }, [leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length, utilityColumnOrder]);
-  const utilityColumnCount = (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0) + (rowNumber ? 1 : 0);
+  }, [hasCombinedRowUtility, leafSourceColumns, resizedColumnWidths, rowDraggable, rowNumber, rowSelectionColumnWidth, rowSelectionIndicator, showRowCheckbox, sourceRows.length, utilityColumnOrder]);
+  const utilityColumnCount = (hasCombinedRowUtility ? 1 : (rowDraggable ? 1 : 0) + (showRowCheckbox ? 1 : 0)) + (rowNumber ? 1 : 0);
   const headerCells = useMemo2(() => buildHeaderCells(sourceColumns, utilityColumnCount, headerDepth), [headerDepth, sourceColumns, utilityColumnCount]);
   const activeCustomHeaderLevels = useMemo2(() => {
     const levels = /* @__PURE__ */ new Map();
@@ -2828,7 +2844,7 @@ function TableInner({
       verticalTrack.style.display = "none";
     } else {
       const top = fixedHeader ? bodyTop : 0;
-      const bottom = bottomSummaryHeight;
+      const bottom = bottomSummaryHeight + 2;
       const trackHeight = Math.max(0, effectiveHeight - top - bottom);
       if (trackHeight <= 0) {
         verticalTrack.style.display = "none";
@@ -3290,13 +3306,15 @@ function TableInner({
               cell.style.left = `${left}px`;
               cell.style.width = `${columnWidth}px`;
               cell.style.justifyContent = column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start";
-              if (column.rowDragHandle) {
+              if (column.rowDragHandle && !column.rowSelection) {
                 cell.appendChild(createRowDragHandleSvg());
               } else if (column.rowSelection) {
-                const checkbox = document.createElement("span");
-                checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
-                checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
-                cell.appendChild(checkbox);
+                if (column.rowSelectionIndicator !== "none") {
+                  const checkbox = document.createElement("span");
+                  checkbox.className = selectedRowKeySet.has(rowKey2) ? "rvg-preview-checkbox is-checked" : "rvg-preview-checkbox";
+                  checkbox.textContent = selectedRowKeySet.has(rowKey2) ? "\u2713" : "";
+                  cell.appendChild(checkbox);
+                }
               } else {
                 cell.textContent = getCellLabel(sourceIndex, columnIndex);
               }
@@ -3721,6 +3739,9 @@ function TableInner({
     const metric = metrics[editing.columnIndex];
     const column = columns[editing.columnIndex];
     if (!metric || !column) return void 0;
+    const row = rows[editing.rowIndex];
+    const cellValue = column.dataIndex === void 0 ? void 0 : row?.[column.dataIndex];
+    const backgroundColor = row ? column.cellStyle?.(cellValue, row, editing.rowIndex).backgroundColor ?? rowStyle?.(row, editing.rowIndex).backgroundColor : void 0;
     const fixedSide = column.fixed;
     const span = getCellSpan(editing.rowIndex, editing.columnIndex);
     const cellWidth = getCellDisplayWidth(editing.columnIndex, span?.colSpan ?? 1);
@@ -3739,7 +3760,8 @@ function TableInner({
         left: visibleLeft,
         top: visibleTop,
         width: Math.max(0, visibleRight - visibleLeft),
-        height: Math.max(0, visibleBottom - visibleTop)
+        height: Math.max(0, visibleBottom - visibleTop),
+        backgroundColor
       };
     }
     return {
@@ -3748,9 +3770,10 @@ function TableInner({
       width: cellWidth,
       height: cellHeight,
       textAlign: column.align ?? "left",
+      backgroundColor,
       clipPath: `inset(${Math.max(0, visibleTop - cellTop)}px ${Math.max(0, cellLeft + cellWidth - visibleRight)}px ${Math.max(0, cellTop + cellHeight - visibleBottom)}px ${Math.max(0, visibleLeft - cellLeft)}px)`
     };
-  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, viewport.width]);
+  }, [bodyTop, columns, editing, fixedHeader, fixedWidth, getCellDisplayWidth, getCellSpan, getScrollableColumnLeft, leftFixedOffsets, metrics, renderHeight, rightFixedOffsets, rightFixedWidth, rowHeight, rows, rowStyle, viewport.width]);
   const handleColumnPointerDown = useCallback2((event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     const localY = event.clientY - rect.top;
@@ -4981,9 +5004,7 @@ function TableInner({
             handleColumnPointerDown(event);
             if (columnDragRef.current) return;
             const headerDragCell = columnDraggable ? locateHeaderCell(event.clientX, event.clientY) : null;
-            const columnIndex = locateColumn(event.clientX);
-            const rowDragHandle = rowDraggable && columnIndex >= 0 && Boolean(columns[columnIndex].rowDragHandle) && locateRow(event.clientY) >= 0;
-            if (headerDragCell && locateHeaderCellDragHandle(event.clientX, event.clientY, headerDragCell) || rowDragHandle) {
+            if (headerDragCell && locateHeaderCellDragHandle(event.clientX, event.clientY, headerDragCell)) {
               hideDragTooltips();
               document.documentElement.classList.add("rvg-is-dragging");
               event.currentTarget.style.cursor = "move";
@@ -5057,7 +5078,7 @@ function TableInner({
               setSelection(null);
               return;
             }
-            if (columns[cell.columnIndex].rowDragHandle || columns[cell.columnIndex].rowNumber) {
+            if (columns[cell.columnIndex].rowDragHandle && !columns[cell.columnIndex].rowSelection || columns[cell.columnIndex].rowNumber) {
               clickedCellRef.current = null;
               return;
             }

package/package.json

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