@lensui/lens-table 0.1.68 → 0.1.70

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();
@@ -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);
               }
@@ -5011,9 +5029,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 +5103,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;
             }
@@ -5163,7 +5179,7 @@ function TableInner({
           const row = rows[rowIndex];
           if (!row || !selectedRowKeySet.has(getRowKey(row, rowIndex))) return [];
           const top = bodyTop + rowIndex * rowHeight - currentScroll.top + getRowDragOffset(rowIndex);
-          const className2 = `rvg-text-fixed-border-selection${striped && rowIndex % 2 === 1 ? " is-striped" : ""}`;
+          const className2 = "rvg-text-fixed-border-selection";
           const rowKey2 = String(getRowKey(row, rowIndex));
           return [
             fixedWidth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${className2} is-left`, style: { left: fixedWidth - 1, top, height: rowHeight } }, `selected-fixed-left:${rowKey2}`) : null,

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();
@@ -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);
               }
@@ -4981,9 +4999,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 +5073,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;
             }
@@ -5133,7 +5149,7 @@ function TableInner({
           const row = rows[rowIndex];
           if (!row || !selectedRowKeySet.has(getRowKey(row, rowIndex))) return [];
           const top = bodyTop + rowIndex * rowHeight - currentScroll.top + getRowDragOffset(rowIndex);
-          const className2 = `rvg-text-fixed-border-selection${striped && rowIndex % 2 === 1 ? " is-striped" : ""}`;
+          const className2 = "rvg-text-fixed-border-selection";
           const rowKey2 = String(getRowKey(row, rowIndex));
           return [
             fixedWidth > 0 ? /* @__PURE__ */ jsx8("div", { className: `${className2} is-left`, style: { left: fixedWidth - 1, top, height: rowHeight } }, `selected-fixed-left:${rowKey2}`) : null,

package/package.json

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