funda-ui 4.7.723 → 4.7.735

package/lib/esm/Table/Table.tsx

@@ -5,6 +5,7 @@ import useComId from 'funda-utils/dist/cjs/useComId';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import { TableProvider } from './TableContext';
 import useTableResponsive from './utils/hooks/useTableResponsive';
 import useTableDraggable from './utils/hooks/useTableDraggable';
@@ -148,10 +149,10 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
 
     // initialize drag & drop data
     const {
-        handleDragStart,
-        handleDragEnd,
-        handledragOver,
-        handleTbodyEnter
+        isDragging,
+        dragHandlers,
+        handleTbodyEnter,
+        handleTbodyLeave
     } = useTableDraggable({
         enabled: rowDraggable && rootRef.current,
         data: data,
@@ -268,9 +269,10 @@ const Table = forwardRef<HTMLDivElement, TableProps>((
 
                 // drag & drop
                 rowDraggable,
-                handleDragStart,
-                handleDragEnd,
-                handledragOver,
+                isRowDragging: isDragging,
+                handleDragStart: dragHandlers.handleDragStart,
+                handleDragEnd: dragHandlers.handleDragEnd,
+                handledragOver: dragHandlers.handleDragOver,
                 handleTbodyEnter,
                 
 

package/lib/esm/Table/TableRow.tsx

@@ -44,9 +44,15 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
     // selection
     // ================================================================
     const _res = convertMapToArr(selectedItems);
+    // Performance optimization: stringify itemData only once instead of N times
+    const itemDataStr = itemData ? JSON.stringify(itemData) : '';
     const filteredSelectedItems = _res.map((v: any) => Number(v)).map((rowNum: number) => {
-        if (JSON.stringify(itemData) === JSON.stringify(originData[rowNum])) {
-            return originData[rowNum];
+        const originItem = originData?.[rowNum];
+        // Fast path: reference equality
+        if (itemData === originItem) return originItem;
+        // Fallback: JSON comparison (itemDataStr is cached)
+        if (itemDataStr && itemDataStr === JSON.stringify(originItem)) {
+            return originItem;
         }
     }).filter(Boolean);
     const selectedClassName = activeClassName || 'active';
@@ -64,7 +70,7 @@ const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>((
                 onDragEnd={rowDraggable ? handleDragEnd : () => void(0)} 
                 data-row-data={`${itemData && typeof itemData === 'object' ? JSON.stringify(itemData) : itemData}`}
                 
-                className={`row-obj ${className || ''} ${active ? selectedClassName : ''} ${itemData && originData ? (filteredData.every((item: any) => filterFieldsData.some((s: string) => !item[s]?.toLowerCase().includes(itemData[s]?.toLowerCase())) ) ? 'd-none' : '') : ''} ${itemData && originData ? (filteredSelectedItems.some((item: any) => JSON.stringify(itemData) === JSON.stringify(item) ) ? selectedClassName : '') : ''}`}
+                className={`row-obj ${className || ''} ${active ? selectedClassName : ''} ${itemData && originData ? (filteredData.every((item: any) => filterFieldsData.some((s: string) => !item[s]?.toLowerCase().includes(itemData[s]?.toLowerCase())) ) ? 'd-none' : '') : ''} ${itemData && originData && filteredSelectedItems.length > 0 ? selectedClassName : ''}`}
             >
                 {children}
             </tr>

package/lib/esm/Table/index.scss

@@ -1,3 +1,5 @@
+
+
 /* ======================================================
     <!-- Table (Synthetic) -->
 /* ====================================================== */
@@ -7,7 +9,7 @@
     --syntable-row-active-bg: #f0f8ff;
     --syntable-scrollbar-color: rgba(0, 0, 0, 0.2);
     --syntable-scrollbar-track: rgba(0, 0, 0, 0);
-    --syntable-scrollbar-h: 3px;
+    --syntable-scrollbar-h: 10px;
     --syntable-scrollbar-w: 10px;
     --syntable-padding-x: 1rem;
     --syntable-padding-y: 0.5rem;
@@ -165,11 +167,13 @@
 
             .row-obj-clonelast {
                 height: 0 !important;
-
+                border-color: transparent !important;
+                padding: 0 !important;
              
                 td {
                     border: none;
                     box-shadow: none;
+                    padding: 0 !important;
                 }
             }
 
@@ -190,11 +194,13 @@
         }
 
         /* placeholder */
+        .row-obj-lastplaceholder,
         .row-placeholder {
             border: 2px dotted #b5ba91;
             background-color: #e4e9c3;
         }
         
+        
         /* trigger */
         .drag-trigger {
             display: inline-block;

package/lib/esm/Table/utils/DragHandleSprite.tsx

@@ -15,7 +15,8 @@ const DragHandleSprite = forwardRef((props: DragHandleSpriteProps, externalRef:
 
     const {
         rowDraggable,
-        handleTbodyEnter
+        handleTbodyEnter,
+        handleTbodyLeave
     } = useContext(TableContext);
 
     return (
@@ -23,7 +24,10 @@ const DragHandleSprite = forwardRef((props: DragHandleSpriteProps, externalRef:
             {rowDraggable ? <span
                 ref={externalRef}
                 className={className || 'drag-trigger'}
-                onMouseEnter={handleTbodyEnter}
+                // Only when mousedown happens on this handle will we allow row dragging.
+                onMouseDown={handleTbodyEnter}
+                onMouseUp={handleTbodyLeave}
+                onMouseLeave={handleTbodyLeave}
             >
                 {icon || <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none">
                     <g>

package/lib/esm/Table/utils/func.ts

@@ -63,6 +63,14 @@ export function initOrderProps(rootElem: any) {
 
 export function initRowColProps(rootElem: any) {
     if (rootElem === null) return;
+
+    // !!! Important, performance optimization for large data renderings
+    // With this protection, it is only performed once
+    if (typeof rootElem.dataset.rowColPropsInit !== 'undefined') return;
+    rootElem.dataset.rowColPropsInit = '1';
+
+
+    //
     const _allRows = allRows(rootElem);
     const _allHeadRows = allHeadRows(rootElem);
 
@@ -167,7 +175,10 @@ export function cellMark(row: number | string | undefined, col: number | string
 
 export function removeCellFocusClassName(root: any) {
     if (root) {
-        [].slice.call(root.querySelectorAll('td, th')).forEach((el: HTMLTableElement) => {
+        // !!! Important, performance optimization for large data renderings
+        // Only query elements with cell-focus classes
+        const focusedCells = root.querySelectorAll('td.cell-focus, th.cell-focus');
+        focusedCells.forEach((el: HTMLElement) => {
             el.classList.remove('cell-focus');
         });
     }