funda-ui 4.7.711 → 4.7.730

package/lib/cjs/Utils/useBoundedDrag.d.ts

@@ -112,6 +112,7 @@ export interface BoundedDragOptions {
     dragHandleSelector?: string;
     onDragStart?: (index: number) => void;
     onDragOver?: (dragIndex: number | null, dropIndex: number | null) => void;
+    onDragUpdate?: (dragIndex: number | null, dropIndex: number | null) => void;
     onDragEnd?: (dragIndex: number | null, dropIndex: number | null) => void;
 }
 export declare const useBoundedDrag: (options?: BoundedDragOptions) => {

package/lib/cjs/Utils/useBoundedDrag.js

@@ -220,6 +220,7 @@ var useBoundedDrag = function useBoundedDrag() {
     dragHandleSelector = _options$dragHandleSe === void 0 ? '.custom-draggable-list__handle' : _options$dragHandleSe,
     onDragStart = options.onDragStart,
     onDragOver = options.onDragOver,
+    onDragUpdate = options.onDragUpdate,
     onDragEnd = options.onDragEnd;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -228,11 +229,35 @@ var useBoundedDrag = function useBoundedDrag() {
   var dragItem = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var dragOverItem = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var dragNode = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var draggedElement = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var boundaryElement = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var touchOffset = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({
     x: 0,
     y: 0
   });
   var currentHoverItem = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var rafId = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var lastUpdateDragIndex = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var lastUpdateDropIndex = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+
+  /**
+   * Performance Note:
+   *
+   * Drag-over events can fire at a very high frequency, especially on touch devices
+   * or when dragging quickly. Directly performing DOM read/write operations in the
+   * event handler (e.g. `getBoundingClientRect`, `classList` changes, style updates)
+   * can easily cause layout thrashing and frame drops when there are many items.
+   *
+   * To mitigate this, we:
+   * - Collect the pointer coordinates synchronously in the event handler.
+   * - Schedule all DOM-intensive work inside `requestAnimationFrame`, so the browser
+   *   batches these operations before the next paint.
+   * - Cancel any pending frame (`cancelAnimationFrame`) before scheduling a new one,
+   *   ensuring there is at most one pending DOM update per frame.
+   *
+   * This keeps drag interactions smooth even with large lists.
+   */
+
   var handleDragStart = function handleDragStart(e, position) {
     var isTouch = ('touches' in e);
     var target = e.target;
@@ -285,69 +310,127 @@ var useBoundedDrag = function useBoundedDrag() {
         opacity: '0.9'
       });
       document.body.appendChild(dragNode.current);
+
+      // Keep track of the original element (acts as a placeholder inside the list)
+      draggedElement.current = listItem;
+      boundaryElement.current = boundary;
       setIsDragging(true);
       listItem.classList.add('dragging-placeholder');
     } else {
-      // ... desktop drag logic remains the same ...
+      // Desktop: use native drag image, but still record dragged element / boundary
+      draggedElement.current = listItem;
+      boundaryElement.current = boundary;
+      setIsDragging(true);
+      var dragEvent = e;
+      if (dragEvent.dataTransfer) {
+        dragEvent.dataTransfer.effectAllowed = 'move';
+        // Optional: customize drag preview if needed
+        dragEvent.dataTransfer.setData('text/plain', '');
+      }
+      listItem.classList.add('dragging-placeholder');
     }
   };
   var handleDragOver = function handleDragOver(e) {
+    // Always prevent default synchronously
     e.preventDefault();
     var isTouch = ('touches' in e);
     if (!isTouch) {
       e.dataTransfer.dropEffect = 'move';
     }
 
-    // Get the current pointer/touch position
-    var point = isTouch ? e.touches[0] : {
-      clientX: e.clientX,
-      clientY: e.clientY
-    };
+    // Extract primitive coordinates synchronously to avoid using pooled events in async callbacks
+    var clientX;
+    var clientY;
+    if (isTouch) {
+      var touch = e.touches[0];
+      clientX = touch.clientX;
+      clientY = touch.clientY;
+    } else {
+      clientX = e.clientX;
+      clientY = e.clientY;
+    }
 
-    // Update dragged element position for touch events
-    if (isTouch && isDragging && dragNode.current) {
-      dragNode.current.style.left = "".concat(point.clientX - touchOffset.current.x, "px");
-      dragNode.current.style.top = "".concat(point.clientY - touchOffset.current.y, "px");
+    // Cancel any pending frame to avoid stacking DOM operations
+    if (rafId.current !== null) {
+      cancelAnimationFrame(rafId.current);
     }
+    rafId.current = requestAnimationFrame(function () {
+      // Update dragged element position for touch events
+      if (isTouch && isDragging && dragNode.current) {
+        dragNode.current.style.left = "".concat(clientX - touchOffset.current.x, "px");
+        dragNode.current.style.top = "".concat(clientY - touchOffset.current.y, "px");
+      }
 
-    // Find the element below the pointer/touch
-    var elemBelow = document.elementFromPoint(point.clientX, point.clientY);
-    if (!elemBelow) return;
+      // Find the element below the pointer/touch
+      var elemBelow = document.elementFromPoint(clientX, clientY);
+      if (!elemBelow) return;
 
-    // Find the closest list item
-    var listItem = elemBelow.closest(itemSelector);
-    if (!listItem || listItem === currentHoverItem.current) return;
+      // Find the closest list item
+      var listItem = elemBelow.closest(itemSelector);
+      if (!listItem) return;
 
-    // Check boundary
-    var boundary = listItem.closest(boundarySelector);
-    if (!boundary) return;
+      // Check boundary
+      var boundary = boundaryElement.current || listItem.closest(boundarySelector);
+      if (!boundary) return;
 
-    // Update hover states
-    if (currentHoverItem.current) {
-      currentHoverItem.current.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
-    }
-    currentHoverItem.current = listItem;
-    listItem.classList.add('drag-over');
-
-    // Calculate position in list
-    var position = Array.from(listItem.parentNode.children).indexOf(listItem);
-    dragOverItem.current = position;
-
-    // Determine drop position (top/bottom)
-    var rect = listItem.getBoundingClientRect();
-    var middleY = rect.top + rect.height / 2;
-    if (point.clientY < middleY) {
-      listItem.classList.add('drag-over-top');
-    } else {
-      listItem.classList.add('drag-over-bottom');
-    }
-    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(dragItem.current, dragOverItem.current);
+      // Update hover states
+      if (currentHoverItem.current && currentHoverItem.current !== listItem) {
+        currentHoverItem.current.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
+      }
+      currentHoverItem.current = listItem;
+      listItem.classList.add('drag-over');
+      var dragEl = draggedElement.current;
+      if (!dragEl || !dragEl.parentNode) return;
+      var container = boundary;
+
+      // Collect current ordered items in the container
+      var children = Array.from(container.querySelectorAll(itemSelector));
+      var currentIndex = children.indexOf(dragEl);
+      var targetIndex = children.indexOf(listItem);
+      if (currentIndex === -1 || targetIndex === -1) return;
+
+      // Determine drop position (top/bottom)
+      var rect = listItem.getBoundingClientRect();
+      var middleY = rect.top + rect.height / 2;
+      listItem.classList.remove('drag-over-top', 'drag-over-bottom');
+      var insertBefore = clientY < middleY ? listItem : listItem.nextElementSibling;
+      if (clientY < middleY) {
+        listItem.classList.add('drag-over-top');
+      } else {
+        listItem.classList.add('drag-over-bottom');
+      }
+
+      // Only move in DOM when the effective position changes
+      if (insertBefore !== dragEl && container.contains(dragEl)) {
+        container.insertBefore(dragEl, insertBefore);
+      }
+
+      // Recompute index after DOM move
+      var reorderedChildren = Array.from(container.querySelectorAll(itemSelector));
+      var newIndex = reorderedChildren.indexOf(dragEl);
+      dragOverItem.current = newIndex;
+      onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(dragItem.current, dragOverItem.current);
+
+      // Only fire onDragUpdate when the (dragIndex, dropIndex) pair actually changes.
+      if (onDragUpdate && (dragItem.current !== lastUpdateDragIndex.current || dragOverItem.current !== lastUpdateDropIndex.current)) {
+        lastUpdateDragIndex.current = dragItem.current;
+        lastUpdateDropIndex.current = dragOverItem.current;
+        onDragUpdate(dragItem.current, dragOverItem.current);
+      }
+      rafId.current = null;
+    });
   };
   var handleDragEnd = function handleDragEnd(e) {
     var isTouch = ('touches' in e);
     if (isTouch && !isDragging) return;
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(dragItem.current, dragOverItem.current);
 
+    // Cancel any pending animation frame
+    if (rafId.current !== null) {
+      cancelAnimationFrame(rafId.current);
+      rafId.current = null;
+    }
+
     // Cleanup
     if (dragNode.current) {
       dragNode.current.remove();
@@ -361,6 +444,8 @@ var useBoundedDrag = function useBoundedDrag() {
     currentHoverItem.current = null;
     dragItem.current = null;
     dragOverItem.current = null;
+    draggedElement.current = null;
+    boundaryElement.current = null;
   };
   return {
     isDragging: isDragging,

package/lib/css/EventCalendarTimeline/index.css

@@ -235,7 +235,7 @@
   } 
   */
   /* cell */
-  /* header */
+  /* The width of the left column header */
   /* event container */
   /* days container */
   /* remove empty cells */
@@ -466,10 +466,21 @@
   background-color: var(--custom-event-tl-table-divider-bg);
   border-left: var(--custom-event-tl-table-divider-border);
   border-right: var(--custom-event-tl-table-divider-border);
+  position: relative;
 }
 .custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider > div {
   width: var(--custom-event-tl-table-divider-w);
 }
+.custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider--resizable {
+  cursor: col-resize;
+  user-select: none;
+}
+.custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider--resizable:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider--resizable:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
 .custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__cell-cushion {
   padding: var(--custom-event-tl-table-cell-padding);
 }

package/lib/css/Table/index.css

@@ -7,7 +7,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;
@@ -414,10 +414,13 @@
 }
 .syntable__wrapper.allow-dragdrop tbody .row-obj-clonelast {
   height: 0 !important;
+  border-color: transparent !important;
+  padding: 0 !important;
 }
 .syntable__wrapper.allow-dragdrop tbody .row-obj-clonelast td {
   border: none;
   box-shadow: none;
+  padding: 0 !important;
 }
 .syntable__wrapper.allow-dragdrop tbody td,
 .syntable__wrapper.allow-dragdrop tbody th {
@@ -428,6 +431,7 @@
 .syntable__wrapper.allow-dragdrop tbody.drag-trigger-mousedown th {
   pointer-events: auto;
 }
+.syntable__wrapper.allow-dragdrop .row-obj-lastplaceholder,
 .syntable__wrapper.allow-dragdrop .row-placeholder {
   border: 2px dotted #b5ba91;
   background-color: #e4e9c3;

package/lib/esm/DragDropList/index.tsx

@@ -8,7 +8,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import useBoundedDrag from 'funda-utils/dist/cjs/useBoundedDrag';
 
 
-
 export interface ListItem {
     id: number;
     parentId?: number;
@@ -19,6 +18,7 @@ export interface ListItem {
     depth?: number;
     children?: ListItem[];
     disabled?: boolean;
+    itemDraggable?: boolean;
     appendControl?: React.ReactNode;
     [key: string]: any;
 }
@@ -222,6 +222,10 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
         onDragOver: (dragIndex: number | null, dropIndex: number | null) => {
             // Additional drag over logic if needed
         },
+        onDragUpdate: (dragIndex: number | null, dropIndex: number | null) => {
+            // console.log(dragIndex, dropIndex);
+          
+        },
         onDragEnd: (dragIndex: number | null, dropIndex: number | null) => {
             if (dragIndex !== null && dropIndex !== null && dragIndex !== dropIndex) {
                 // Handle item movement
@@ -251,12 +255,12 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
                 });
 
                 // Calculate new insert position
-                let insertIndex = dropIndex;
-                if (dropIndex > dragIndex) {
-                    insertIndex -= itemsToMove.length;
-                }
+                // Directly use dropIndex as the insertion position to avoid items snapping back
+                // when dragging an item from above to directly below its neighbor.
+                const insertIndex = dropIndex;
 
-                // Insert all items
+                // Insert all items (remove first, then insert at the target index;
+                // JavaScript's splice will handle index shifting automatically).
                 newItems.splice(insertIndex, 0, ...itemsBeingMoved);
 
                 // Rebuild tree structure
@@ -397,6 +401,9 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
                 // If the item should be hidden, the rendering is skipped
                 if (!shouldShowItem(item)) return null;
 
+                // Item level draggable control, default true when not specified
+                const isItemDraggable = draggable && item.itemDraggable !== false;
+
                 // collapse
                 const hasChildItems = hasChildren(item.id);
                 const isCollapsed = collapsedItems.has(item.id);
@@ -415,7 +422,7 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
                         clsWrite(dragMode, 'handle'),
                         {
                             'disabled': item.disabled,
-                            'draggable': draggable,
+                            'draggable': isItemDraggable,
                             'editing': editingItem === item.id,
 
                             // collapse
@@ -423,13 +430,13 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
                             'collapsed': isCollapsed
                         }
                     )}
-                    draggable={!draggable ? undefined : editingItem !== item.id && "true"}
-                    onDragStart={!draggable ? undefined : (e) => dragHandlers.handleDragStart(e, index)}
-                    onDragOver={!draggable ? undefined : dragHandlers.handleDragOver}
-                    onDragEnd={!draggable ? undefined : dragHandlers.handleDragEnd}
-                    onTouchStart={!draggable ? undefined : (e) => dragHandlers.handleDragStart(e, index)}
-                    onTouchMove={!draggable ? undefined : dragHandlers.handleDragOver}
-                    onTouchEnd={!draggable ? undefined : dragHandlers.handleDragEnd}
+                    draggable={!isItemDraggable ? undefined : editingItem !== item.id && "true"}
+                    onDragStart={!isItemDraggable ? undefined : (e) => dragHandlers.handleDragStart(e, index)}
+                    onDragOver={!isItemDraggable ? undefined : dragHandlers.handleDragOver}
+                    onDragEnd={!isItemDraggable ? undefined : dragHandlers.handleDragEnd}
+                    onTouchStart={!isItemDraggable ? undefined : (e) => dragHandlers.handleDragStart(e, index)}
+                    onTouchMove={!isItemDraggable ? undefined : dragHandlers.handleDragOver}
+                    onTouchEnd={!isItemDraggable ? undefined : dragHandlers.handleDragEnd}
                     style={itemStyle}
                     onDoubleClick={() => handleDoubleClick(item)}
                 >
@@ -437,14 +444,14 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
                         {renderOption ? (
                             renderOption(
                                 item,
-                                `${prefix}-draggable-list__handle`,
+                                isItemDraggable ? `${prefix}-draggable-list__handle` : '',
                                 index
                             )
                         ) : (
                             <>
                                 {/** DRAG HANDLE */}
                                 {/* Fix the problem that mobile terminals cannot be touched, DO NOT USE "<svg>" */}
-                                {draggable && !handleHide ? <span className={`${prefix}-draggable-list__handle ${handlePos ?? 'left'}`} draggable={dragMode === 'handle'} dangerouslySetInnerHTML={{
+                                {isItemDraggable && !handleHide ? <span className={`${prefix}-draggable-list__handle ${handlePos ?? 'left'}`} draggable={dragMode === 'handle'} dangerouslySetInnerHTML={{
                                     __html: `${handleIcon}`
                                 }}></span> : null}
                                 {/** /DRAG HANDLE */}

package/lib/esm/DynamicFields/index.tsx

@@ -20,6 +20,7 @@ export type DynamicFieldsProps = {
     label?: React.ReactNode | string;
     data: DynamicFieldsValueProps | null;
     maxFields?: any;
+    defaultRows?: number;
     confirmText?: string;
     doNotRemoveDom?: boolean;
     iconAddBefore?: React.ReactNode | string;
@@ -55,6 +56,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         label,
         data,
         maxFields,
+        defaultRows,
         iconAddBefore,
         iconAddAfter,
         iconAdd,
@@ -96,6 +98,10 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     const [tmpl, setTmpl] = useState<React.ReactNode>([]);
     const addBtnIdRef = useRef<string>('');
     addBtnIdRef.current = `dynamic-fields-add-${idRes}`;
+    const defaultRowsInitializedRef = useRef<boolean>(false);
+    const isInitializingDefaultRowsRef = useRef<boolean>(false);
+    const rafIdRef = useRef<number | null>(null);
+    const timeoutIdsRef = useRef<ReturnType<typeof setTimeout>[]>([]);
 
     // exposes the following methods
     useImperativeHandle(
@@ -169,17 +175,12 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         }
     }
 
-
-    function handleClickAdd(event: any = null) {
-        if (event !== null) {
-            if (typeof event !== 'undefined') event.preventDefault();
-        }
-        
+    function addRowWithTemplate(template: React.ReactNode) {
         //button status
         checkMaxStatus();
 
         //
-        setVal((prevState: any[]) => [...prevState, ...generateGroup(tmpl)]);
+        setVal((prevState: any[]) => [...prevState, ...generateGroup(template)]);
 
 
         //
@@ -209,6 +210,14 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         }, 0);
     }
 
+    function handleClickAdd(event: any = null) {
+        if (event !== null) {
+            if (typeof event !== 'undefined') event.preventDefault();
+        }
+        
+        addRowWithTemplate(tmpl);
+    }
+
 
     function handleClickRemove(e: React.MouseEvent) {
         if (e !== null && typeof e !== 'undefined') e.preventDefault();
@@ -331,6 +340,96 @@ const DynamicFields = (props: DynamicFieldsProps) => {
 
         //
         onLoad?.(addBtnIdRef.current, rootRef.current, PER_ROW_DOM_STRING);
+
+        // Reset initialization flag when data becomes null
+        if (!data) {
+            defaultRowsInitializedRef.current = false;
+            isInitializingDefaultRowsRef.current = false;
+        }
+
+        // Add default rows if specified (only initialize once per data setup)
+        if (!defaultRowsInitializedRef.current && typeof defaultRows === 'number' && defaultRows > 0 && data && data.tmpl) {
+            // Get the initial data length
+            const initDataLength = Array.isArray(data.init) ? data.init.length : 0;
+            
+            // Calculate how many rows need to be added
+            const maxRows = typeof maxFields !== 'undefined' ? parseFloat(maxFields) : Infinity;
+            const targetRows = Math.min(defaultRows, maxRows);
+            const rowsToAdd = Math.max(0, targetRows - initDataLength);
+            
+            // Mark as initialized immediately to prevent re-adding
+            defaultRowsInitializedRef.current = true;
+            
+            // Only add rows if needed
+            if (rowsToAdd > 0) {
+                // Mark that we're initializing default rows
+                isInitializingDefaultRowsRef.current = true;
+                
+                // Clear any existing timeouts
+                timeoutIdsRef.current.forEach(id => clearTimeout(id));
+                timeoutIdsRef.current = [];
+                
+                // Use requestAnimationFrame to ensure DOM is ready and state is updated
+                rafIdRef.current = requestAnimationFrame(() => {
+                    // Check if component is still mounted
+                    if (!rootRef.current) {
+                        isInitializingDefaultRowsRef.current = false;
+                        return;
+                    }
+                    
+                    const timeoutId1 = setTimeout(() => {
+                        // Check if component is still mounted
+                        if (!rootRef.current) {
+                            isInitializingDefaultRowsRef.current = false;
+                            return;
+                        }
+                        
+                        // Add rows one by one with a small delay to ensure state updates
+                        let addedCount = 0;
+                        const addNextRow = () => {
+                            // Check if component is still mounted before each operation
+                            if (addedCount < rowsToAdd && rootRef.current) {
+                                // Use data.tmpl directly to avoid dependency on state
+                                addRowWithTemplate(data.tmpl);
+                                addedCount++;
+                                // Wait a bit before adding the next row to ensure state updates
+                                if (addedCount < rowsToAdd) {
+                                    const timeoutId2 = setTimeout(addNextRow, 10);
+                                    timeoutIdsRef.current.push(timeoutId2);
+                                } else {
+                                    // All rows added, mark initialization as complete
+                                    isInitializingDefaultRowsRef.current = false;
+                                }
+                            } else {
+                                // No more rows to add or component unmounted
+                                isInitializingDefaultRowsRef.current = false;
+                            }
+                        };
+                        addNextRow();
+                    }, 50);
+                    timeoutIdsRef.current.push(timeoutId1);
+                });
+            }
+        }
+        
+        // Cleanup function to cancel requestAnimationFrame and timeouts
+        return () => {
+            // Don't cleanup if we're in the middle of initializing defaultRows
+            // This prevents the cleanup from canceling the async operations before they complete
+            if (isInitializingDefaultRowsRef.current) {
+                // Allow defaultRows initialization to complete
+                // The cleanup will happen naturally when initialization finishes
+                return;
+            }
+            
+            // Normal cleanup for other cases
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+                rafIdRef.current = null;
+            }
+            timeoutIdsRef.current.forEach(id => clearTimeout(id));
+            timeoutIdsRef.current = [];
+        };
     }, [data]);
 
 
@@ -406,4 +505,4 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     )
 };
 
-export default DynamicFields;
+export default DynamicFields;

package/lib/esm/EventCalendarTimeline/index.scss

@@ -470,7 +470,7 @@
         word-break: break-word;
     }
 
-    /* header */
+    /* The width of the left column header */
     .custom-event-tl-table__cell-cushion-headertitle {
         width: var(--custom-event-tl-table-header-w);
     }
@@ -614,10 +614,24 @@
         background-color: var(--custom-event-tl-table-divider-bg);
         border-left: var(--custom-event-tl-table-divider-border);
         border-right: var(--custom-event-tl-table-divider-border);
+        position: relative;
 
         > div {
             width: var(--custom-event-tl-table-divider-w);
         }
+        
+        &--resizable {
+            cursor: col-resize;
+            user-select: none;
+            
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+            
+            &:active {
+                background-color: rgba(0, 0, 0, 0.1);
+            }
+        }
     }
 
     /* cell */