argent-grid 0.2.0 → 0.3.0

package/src/lib/components/argent-grid.component.ts

@@ -1,4 +1,4 @@
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -18,6 +18,7 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CanvasRenderer } from '../rendering/canvas-renderer';
+import { isColumnVisible } from '../rendering/render/column-utils';
 import { GridService } from '../services/grid.service';
 import { applyThemeCSSVariables, convertThemeToGridTheme } from '../themes/theme-builder';
 import {
@@ -25,6 +26,7 @@ import {
   ColDef,
   ColGroupDef,
   Column,
+  ColumnGroup,
   DefaultMenuItem,
   GetContextMenuItemsParams,
   GridApi,
@@ -49,7 +51,7 @@ export class ArgentGridComponent<TData = any>
   @Input() theme: any;
   @Input() height = '500px';
   @Input() width = '100%';
-  @Input() rowHeight = 32;
+  @Input() rowHeight?: number;
   @Input() rowSelection: RowSelectionOptions | 'single' | 'multiple' | undefined;
 
   @Output() gridReady = new EventEmitter<GridApi<TData>>();
@@ -66,17 +68,31 @@ export class ArgentGridComponent<TData = any>
   showOverlay = false;
   private viewportHeight = 500;
 
+  /**
+   * Returns the current effective row height, prioritizing grid options, then the input property, and defaulting to 32.
+   */
+  get effectiveRowHeight(): number {
+    return this.gridApi?.getGridOption('rowHeight') || this.rowHeight || 32;
+  }
+
+  /**
+   * Returns the current effective header height, prioritizing grid options, then defaulting to effectiveRowHeight.
+   */
+  get effectiveHeaderHeight(): number {
+    return this.gridApi?.getGridOption('headerHeight') || this.effectiveRowHeight;
+  }
+
   get totalHeight(): number {
     if (this.gridApi) return this.gridApi.getTotalHeight();
-    return (this.rowData?.length || 0) * this.rowHeight;
+    return (this.rowData?.length || 0) * (this.rowHeight || 32);
   }
 
   get totalWidth(): number {
     if (!this.gridApi) return 0;
     return this.gridApi
       .getAllColumns()
-      .filter((col) => col.visible)
-      .reduce((sum, col) => sum + col.width, 0);
+      .filter((col) => isColumnVisible(col))
+      .reduce((sum, col) => sum + Math.floor(col.width || 150), 0);
   }
 
   // Selection state
@@ -90,7 +106,7 @@ export class ArgentGridComponent<TData = any>
   }
 
   hasHeaderCheckbox(col: Column): boolean {
-    return col.colId === 'ag-Grid-SelectionColumn';
+    return !!col.headerCheckboxSelection;
   }
 
   trackByColumn(index: number, col: Column | ColDef<TData> | ColGroupDef<TData>): string {
@@ -111,6 +127,7 @@ export class ArgentGridComponent<TData = any>
   // Resizing state
   isResizing = false;
   resizeColumn: Column | null = null;
+  resizeItem: Column | ColumnGroup | null = null;
   private resizeStartX = 0;
   private resizeStartWidth = 0;
 
@@ -122,21 +139,35 @@ export class ArgentGridComponent<TData = any>
   sideBarVisible = false;
   activeToolPanel: 'columns' | 'filters' | null = null;
 
+  // Row Group Panel state
+  rowGroupPanelShow: 'always' | 'onlyWhenGrouping' | 'never' = 'never';
+  rowGroupColumns: Column[] = [];
+
   // Context Menu state
   activeContextMenu = false;
   contextMenuPosition = { x: 0, y: 0 };
   contextMenuItems: MenuItemDef[] = [];
   private contextMenuCell: { rowNode: IRowNode<TData>; column: Column } | null = null;
 
+  // Tooltip state
+  tooltipVisible = false;
+  tooltipText = '';
+  tooltipPosition = { x: 0, y: 0 };
+  private _tooltipTimer: any = null;
+
   // Set Filter
   activeSetFilter = false;
   setFilterPosition = { x: 0, y: 0 };
   setFilterValues: any[] = [];
+  setFilterSelectedValues: any[] | null = null;
   setFilterValueFormatter?: (value: any) => string;
   private activeSetFilterColumn: Column | null = null;
   private initialColumnDefs: (ColDef<TData> | ColGroupDef<TData>)[] | null = null;
 
-  private gridApi!: GridApi<TData>;
+  public gridApi!: GridApi<TData>;
+  public isColumnVisible = isColumnVisible;
+  public Math = Math;
+  public scrollbarWidth = 0;
   private canvasRenderer!: CanvasRenderer;
   private destroy$ = new Subject<void>();
   private gridService = new GridService<TData>();
@@ -189,6 +220,16 @@ export class ArgentGridComponent<TData = any>
           ? convertThemeToGridTheme(changes.theme.currentValue)
           : undefined;
         this.canvasRenderer.setTheme(convertedTheme);
+
+        // Sync rowHeight and headerHeight to GridApi if provided by theme and NOT explicitly overridden by user
+        if (this.gridApi) {
+          if (convertedTheme?.rowHeight && this.rowHeight === undefined) {
+            this.gridApi.setGridOption('rowHeight', convertedTheme.rowHeight);
+          }
+          if (convertedTheme?.headerHeight) {
+            this.gridApi.setGridOption('headerHeight', convertedTheme.headerHeight);
+          }
+        }
       }
     }
   }
@@ -207,10 +248,9 @@ export class ArgentGridComponent<TData = any>
       this.canvasRenderer = new CanvasRenderer(
         this.canvasRef.nativeElement,
         this.gridApi,
-        this.rowHeight,
+        this.effectiveRowHeight,
         convertedTheme
       );
-
       // Wire up cell editing callback
       this.canvasRenderer.onCellDoubleClick = (rowIndex, colId) => {
         this.startEditing(rowIndex, colId);
@@ -272,17 +312,34 @@ export class ArgentGridComponent<TData = any>
     if (this.viewportRef) {
       const rect = this.viewportRef.nativeElement.getBoundingClientRect();
       this.viewportHeight = rect.height || 500;
-      this.canvasRenderer?.setViewportDimensions(rect.width, this.viewportHeight);
+      this.canvasRenderer?.setViewportDimensions(
+        rect.width,
+        this.viewportHeight,
+        this.scrollbarWidth
+      );
+
+      const updateScrollbar = () => {
+        const viewport = this.viewportRef?.nativeElement;
+        if (!viewport) return;
+        const newWidth = viewport.offsetWidth - viewport.clientWidth;
+        if (this.scrollbarWidth !== newWidth) {
+          this.scrollbarWidth = newWidth;
+          this._cdr.detectChanges();
+        }
+      };
 
       // Synchronize horizontal scroll with DOM header
       this.horizontalScrollListener = () => {
+        const viewport = this.viewportRef?.nativeElement;
+        if (!viewport) return;
+
+        updateScrollbar();
+
         if (this.headerScrollableRef) {
-          this.headerScrollableRef.nativeElement.scrollLeft =
-            this.viewportRef.nativeElement.scrollLeft;
+          this.headerScrollableRef.nativeElement.scrollLeft = viewport.scrollLeft;
         }
         if (this.headerScrollableFilterRef) {
-          this.headerScrollableFilterRef.nativeElement.scrollLeft =
-            this.viewportRef.nativeElement.scrollLeft;
+          this.headerScrollableFilterRef.nativeElement.scrollLeft = viewport.scrollLeft;
         }
       };
 
@@ -292,17 +349,35 @@ export class ArgentGridComponent<TData = any>
 
       // Add ResizeObserver to handle sidebar toggling and other size changes
       if (typeof ResizeObserver !== 'undefined') {
+        let lastWidth = 0;
+        let lastHeight = 0;
         this.resizeObserver = new ResizeObserver((entries) => {
           for (const entry of entries) {
             const { width, height } = entry.contentRect;
+            if (Math.abs(width - lastWidth) < 1 && Math.abs(height - lastHeight) < 1) continue;
+
+            lastWidth = width;
+            lastHeight = height;
             this.viewportHeight = height;
-            this.canvasRenderer?.setViewportDimensions(width, height);
-            this.canvasRenderer?.render();
+
+            // Only update scrollbar if dimensions actually changed
+            updateScrollbar();
+
+            this.canvasRenderer?.setViewportDimensions(width, height, this.scrollbarWidth);
+            // setViewportDimensions → updateCanvasSize already schedules a render.
             this._cdr.detectChanges();
           }
         });
         this.resizeObserver.observe(this.viewportRef.nativeElement);
       }
+
+      // Initial calculation
+      setTimeout(() => {
+        updateScrollbar();
+        if (this.canvasRenderer) {
+          this.canvasRenderer.render();
+        }
+      });
     }
   }
 
@@ -321,6 +396,7 @@ export class ArgentGridComponent<TData = any>
 
     this.gridApi?.destroy();
     this.canvasRenderer?.destroy();
+    this.onCanvasMouseLeave();
   }
 
   private initializeGrid(): void {
@@ -330,14 +406,35 @@ export class ArgentGridComponent<TData = any>
       options.rowSelection = this.rowSelection;
     }
 
+    // Prioritize explicit rowHeight input if provided
+    if (this.rowHeight !== undefined) {
+      options.rowHeight = this.rowHeight;
+    } else if (this.theme) {
+      // If no explicit rowHeight, but theme is provided, use theme's rowHeight
+      const convertedTheme = convertThemeToGridTheme(this.theme);
+      if (convertedTheme.rowHeight) {
+        options.rowHeight = convertedTheme.rowHeight;
+      }
+      if (convertedTheme.headerHeight && options.headerHeight === undefined) {
+        options.headerHeight = convertedTheme.headerHeight;
+      }
+    }
+
     // Initialize grid API
     this.gridApi = this.gridService.createApi(this.columnDefs, this.rowData, options);
 
+    // Initial state sync
+    this.rowGroupPanelShow = this.gridApi.getGridOption('rowGroupPanelShow') || 'never';
+    this.updateRowGroupColumns();
+
     // Listen for grid state changes from API (filters, sorts, options)
     this.gridService.gridStateChanged$.pipe(takeUntil(this.destroy$)).subscribe((event) => {
       if (event.type === 'optionChanged' && event.key === 'sideBar') {
         this.sideBarVisible = !!event.value;
       }
+      if (event.type === 'optionChanged' && event.key === 'rowGroupPanelShow') {
+        this.rowGroupPanelShow = event.value || 'never';
+      }
       if (event.type === 'selectionChanged') {
         this.updateSelectionState();
 
@@ -346,7 +443,24 @@ export class ArgentGridComponent<TData = any>
         if (this.canvasRenderer) {
           this.canvasRenderer.render(); // This calls markAllDirty and schedules render
         }
+      } else if (event.type === 'columnsChanged' || event.type === 'columnGroupExpanded') {
+        this.updateRowGroupColumns();
+        this.canvasRenderer?.render();
+      } else if (event.type === 'transactionApplied') {
+        // Efficient rendering: only mark changed rows as dirty instead of full redraw.
+        // Callers are responsible for throttling applyTransaction frequency (e.g. via RxJS).
+        const changedIndices = (event as any).changedRowIndices as number[] | undefined;
+        if (changedIndices && changedIndices.length > 0 && this.canvasRenderer) {
+          for (const rowIndex of changedIndices) {
+            this.canvasRenderer.invalidateRow(rowIndex);
+          }
+        } else {
+          this.canvasRenderer?.render();
+        }
       } else {
+        // All other state changes (sort, filter, rangeSelection, etc.) go through the
+        // rAF-coalesced scheduler. Multiple rapid events (e.g. rangeSelectionChanged
+        // on every mousemove) collapse into at most one pending frame.
         this.canvasRenderer?.render();
       }
       this._cdr.detectChanges();
@@ -378,7 +492,9 @@ export class ArgentGridComponent<TData = any>
 
     if (this.gridApi) {
       this.gridApi.setRowData(newData || []);
-      this.canvasRenderer?.render();
+      if (this.canvasRenderer) {
+        this.canvasRenderer.render();
+      }
     }
 
     this.showOverlay = !newData || newData.length === 0;
@@ -406,37 +522,221 @@ export class ArgentGridComponent<TData = any>
       Object.keys(newOptions).forEach((key) => {
         this.gridApi.setGridOption(key as any, (newOptions as any)[key]);
       });
+
+      if (newOptions.rowGroupPanelShow) {
+        this.rowGroupPanelShow = newOptions.rowGroupPanelShow;
+      }
+
       this.canvasRenderer?.render();
     }
     this._cdr.detectChanges();
   }
 
+  getHeaderRows(): (Column | ColumnGroup)[][] {
+    if (!this.gridApi) return [];
+    return this.gridApi.getHeaderRows();
+  }
+
+  getPinnedLeftItems(row: (Column | ColumnGroup)[]): (Column | ColumnGroup)[] {
+    return row.filter((item) => item.pinned === 'left' && isColumnVisible(item));
+  }
+
+  getPinnedRightItems(row: (Column | ColumnGroup)[]): (Column | ColumnGroup)[] {
+    return row.filter((item) => item.pinned === 'right' && isColumnVisible(item));
+  }
+
+  getNonPinnedItems(row: (Column | ColumnGroup)[]): (Column | ColumnGroup)[] {
+    return row.filter((item) => !item.pinned && isColumnVisible(item));
+  }
+
+  getItemWidth(item: Column | ColumnGroup): number {
+    if ('children' in item) {
+      return item.children.reduce((sum, child) => {
+        if (isColumnVisible(child)) {
+          return sum + this.getItemWidth(child);
+        }
+        return sum;
+      }, 0);
+    }
+    return Math.floor(item.width || 150);
+  }
+
+  getItemRowSpan(item: Column | ColumnGroup, rowIndex: number): number {
+    if ('children' in item) {
+      return 1;
+    }
+    // Leaf node spans until the bottom
+    const totalRows = this.gridApi.getHeaderDepth();
+    return totalRows - rowIndex;
+  }
+
+  isColumnGroup(item: Column | ColumnGroup): item is ColumnGroup {
+    return 'children' in item;
+  }
+
+  trackByHeaderItem(
+    index: number,
+    entry: { item: Column | ColumnGroup; rowIndex: number }
+  ): string {
+    const item = entry.item;
+    return 'groupId' in item ? item.groupId : item.colId || index.toString();
+  }
+
+  getItemColSpan(item: Column | ColumnGroup): number {
+    if ('children' in item) {
+      return item.children.reduce((sum, child) => {
+        return sum + this.getItemColSpan(child);
+      }, 0);
+    }
+    return 1;
+  }
+
+  getScrollableHeaderWidth(): number {
+    return this.getNonPinnedColumns().reduce((sum, col) => sum + Math.floor(col.width || 150), 0);
+  }
+
+  getGridTemplateColumns(section: 'left' | 'right' | 'none'): string {
+    if (!this.gridApi) return '';
+    const allCols = this.gridApi.getAllColumns();
+    const sectionCols = allCols.filter((c) => {
+      if (section === 'left') return c.pinned === 'left';
+      if (section === 'right') return c.pinned === 'right';
+      return !c.pinned;
+    });
+
+    if (sectionCols.length === 0) return '';
+
+    const indices = sectionCols.map((c) => c.colIndex || 0);
+    const minIndex = Math.min(...indices);
+    const maxIndex = Math.max(...indices);
+
+    const widths = new Array(maxIndex - minIndex + 1).fill('0px');
+    sectionCols.forEach((c) => {
+      if (isColumnVisible(c)) {
+        widths[(c.colIndex || 0) - minIndex] = `${Math.floor(c.width || 150)}px`;
+      }
+    });
+
+    return widths.join(' ');
+  }
+
+  getColGridIndex(item: Column | ColumnGroup, section: 'left' | 'right' | 'none'): number {
+    if (!this.gridApi) return 1;
+    const allCols = this.gridApi.getAllColumns();
+    const sectionCols = allCols.filter((c) => {
+      if (section === 'left') return c.pinned === 'left';
+      if (section === 'right') return c.pinned === 'right';
+      return !c.pinned;
+    });
+    if (sectionCols.length === 0) return 1;
+    const minIndex = Math.min(...sectionCols.map((c) => c.colIndex || 0));
+
+    return (item.colIndex || 0) - minIndex + 1;
+  }
+
+  getScrollableColIndex(item: Column | ColumnGroup): number {
+    return this.getColGridIndex(item, 'none');
+  }
+
+  getRightPinnedColIndex(item: Column | ColumnGroup): number {
+    return this.getColGridIndex(item, 'right');
+  }
+
+  getLeftPinnedColIndex(item: Column | ColumnGroup): number {
+    return this.getColGridIndex(item, 'left');
+  }
+
+  getSectionHeaderItems(
+    section: 'left' | 'right' | 'none'
+  ): { item: Column | ColumnGroup; rowIndex: number }[] {
+    const items: { item: Column | ColumnGroup; rowIndex: number }[] = [];
+    const rows = this.getHeaderRows();
+    rows.forEach((row, i) => {
+      let rowItems: (Column | ColumnGroup)[] = [];
+      if (section === 'left') rowItems = this.getPinnedLeftItems(row);
+      else if (section === 'right') rowItems = this.getPinnedRightItems(row);
+      else rowItems = this.getNonPinnedItems(row);
+
+      rowItems.forEach((item) => items.push({ item, rowIndex: i }));
+    });
+    return items;
+  }
+
+  hasExpansionToggle(item: ColumnGroup): boolean {
+    return item.children.some(
+      (child) => child.columnGroupShow === 'open' || child.columnGroupShow === 'closed'
+    );
+  }
+
+  isRowGroupPanelVisible(): boolean {
+    const show = this.rowGroupPanelShow;
+    if (show === 'always') return true;
+    if (show === 'onlyWhenGrouping') {
+      return this.rowGroupColumns.length > 0;
+    }
+    return false;
+  }
+
+  trackByRowGroup(index: number, col: Column): string {
+    return col.colId || index.toString();
+  }
+
+  private updateRowGroupColumns(): void {
+    if (!this.gridApi) {
+      this.rowGroupColumns = [];
+      return;
+    }
+    const groupColIds = this.gridApi.getRowGroupColumns();
+    this.rowGroupColumns = this.gridApi
+      .getAllColumns()
+      .filter((col) => groupColIds.includes(col.colId));
+  }
+
+  getRowGroupColumns(): Column[] {
+    return this.rowGroupColumns;
+  }
+
+  onRowGroupDropped(event: CdkDragDrop<any[]>): void {
+    const col = event.item.data as Column;
+    if (col?.colId && col.colId !== 'ag-Grid-SelectionColumn') {
+      this.gridApi.addRowGroupColumn(col.colId);
+    }
+  }
+  removeRowGroup(col: Column): void {
+    this.gridApi.removeRowGroupColumn(col.colId);
+  }
+
+  toggleGroup(item: ColumnGroup, event: MouseEvent): void {
+    event.stopPropagation();
+    this.gridApi.toggleColumnGroup(item.groupId, !item.expanded);
+  }
+
   getColumnWidth(col: Column | ColDef<TData> | ColGroupDef<TData>): number {
     if ('children' in col) {
       // Column group - sum children widths
       return col.children.reduce((sum, child) => sum + this.getColumnWidth(child), 0);
     }
-    return col.width || 150;
+    return Math.floor(col.width || 150);
   }
 
   getLeftPinnedColumns(): Column[] {
     if (!this.gridApi) return [];
     return this.gridApi.getAllColumns().filter((col) => {
-      return col.visible && col.pinned === 'left';
+      return isColumnVisible(col) && col.pinned === 'left';
     });
   }
 
   getRightPinnedColumns(): Column[] {
     if (!this.gridApi) return [];
     return this.gridApi.getAllColumns().filter((col) => {
-      return col.visible && col.pinned === 'right';
+      return isColumnVisible(col) && col.pinned === 'right';
     });
   }
 
   getNonPinnedColumns(): Column[] {
     if (!this.gridApi) return [];
     return this.gridApi.getAllColumns().filter((col) => {
-      return col.visible && !col.pinned;
+      return isColumnVisible(col) && !col.pinned;
     });
   }
 
@@ -454,7 +754,7 @@ export class ArgentGridComponent<TData = any>
 
     // It's likely a Column object, look up its ColDef
     const colDef = this.getColumnDefForColumn(col as any);
-    return colDef ? colDef.sortable !== false : true;
+    return colDef && this.isColDef(colDef) ? colDef.sortable !== false : true;
   }
 
   getHeaderName(col: Column | ColDef<TData> | ColGroupDef<TData>): string {
@@ -509,7 +809,47 @@ export class ArgentGridComponent<TData = any>
     if ((col as any).colId === 'ag-Grid-SelectionColumn') return false;
     if ('children' in col) return false;
     const colDef = this.getColumnDefForColumn(col as any);
-    return colDef ? colDef.suppressHeaderMenuButton !== true : true;
+    return colDef && this.isColDef(colDef) ? colDef.suppressHeaderMenuButton !== true : true;
+  }
+
+  hasHeaderFilterButton(col: Column | ColDef<TData> | ColGroupDef<TData>): boolean {
+    if ((col as any).colId === 'ag-Grid-SelectionColumn') return false;
+    if ('children' in col) return false;
+    const colDef = this.getColumnDefForColumn(col as any);
+    if (!colDef || !this.isColDef(colDef)) return false;
+    if (!colDef.filter || colDef.suppressHeaderFilterButton === true) return false;
+    // Don't show when floating filters are active — they already provide quick access
+    if (colDef.floatingFilter) return false;
+    return true;
+  }
+
+  isColumnFiltered(col: Column | ColDef<TData> | ColGroupDef<TData>): boolean {
+    if (!this.gridApi) return false;
+    const column = col as Column;
+    const field = column.field || column.colId;
+    if (!field) return false;
+    const filterModel = this.gridApi.getFilterModel();
+    return !!(filterModel as any)[field];
+  }
+
+  onHeaderFilterClick(event: MouseEvent, col: Column | ColDef<TData> | ColGroupDef<TData>): void {
+    event.stopPropagation();
+    const column = col as Column;
+    const target = event.target as HTMLElement;
+    // Use closest ancestor that has a bounding rect useful for positioning
+    const iconEl = (target.closest('.argent-grid-header-filter-icon') as HTMLElement) ?? target;
+    const rect = iconEl.getBoundingClientRect();
+    const containerRect = this._elementRef.nativeElement.getBoundingClientRect();
+    const position = {
+      x: rect.left - containerRect.left,
+      y: rect.bottom - containerRect.top + 4,
+    };
+    const colDef = this.getColumnDefForColumn(column);
+    if (colDef && this.isColDef(colDef) && colDef.filter === 'set') {
+      this.openSetFilter(null, column, position);
+    } else {
+      this.openFilterPopup(null, column, position);
+    }
   }
 
   onHeaderMenuClick(event: MouseEvent, col: Column | ColDef<TData> | ColGroupDef<TData>): void {
@@ -523,21 +863,29 @@ export class ArgentGridComponent<TData = any>
     this.activeHeaderMenu = col;
     this.headerMenuItems = this.getHeaderMenuItems(col as Column);
 
-    // Position menu below the icon using fixed (viewport) coordinates
+    // Position menu below the icon using coordinates relative to the grid container
     const target = event.target as HTMLElement;
     const rect = target.getBoundingClientRect();
+    const containerRect = this._elementRef.nativeElement.getBoundingClientRect();
+
+    // Align left edge of menu with left edge of icon
+    let x = rect.left - containerRect.left;
+    let y = rect.bottom - containerRect.top + 4;
 
-    let x = rect.right - 200; // Align right, assuming menu width ~200px
-    let y = rect.bottom + 4;
+    // Prevent menu from going off-container bounds
+    const containerWidth = this._elementRef.nativeElement.offsetWidth;
+    const containerHeight = this._elementRef.nativeElement.offsetHeight;
 
-    // Prevent menu from going off-screen
+    // Assuming menu width is up to 200px for boundary checks
+    if (x + 200 > containerWidth) {
+      x = rect.right - containerRect.left - 200; // Flip to right-aligned if it overflows
+    }
     if (x < 0) x = 0;
-    if (x + 200 > window.innerWidth) x = window.innerWidth - 200;
 
     // Check if menu would overflow bottom
     const estimatedHeight = this.headerMenuItems.length * 30 + 20;
-    if (y + estimatedHeight > window.innerHeight) {
-      y = Math.max(0, rect.top - estimatedHeight);
+    if (y + estimatedHeight > containerHeight) {
+      y = Math.max(0, rect.top - containerRect.top - estimatedHeight);
     }
 
     this.headerMenuPosition = { x, y };
@@ -569,7 +917,7 @@ export class ArgentGridComponent<TData = any>
 
     // 2. Filter items
     const colDef = this.getColumnDefForColumn(col);
-    if (colDef && colDef.filter !== false) {
+    if (colDef && this.isColDef(colDef) && colDef.filter !== false) {
       const filterType = colDef.filter || 'text';
 
       if (filterType === 'set') {
@@ -621,6 +969,15 @@ export class ArgentGridComponent<TData = any>
       action: () => this.hideColumnMenu(),
     });
 
+    items.push({ name: '', action: () => {}, separator: true });
+
+    // 5. Columns panel (open sidebar)
+    items.push({
+      name: 'Columns',
+      icon: '☰',
+      action: () => this.openColumnsPanel(),
+    });
+
     return items;
   }
 
@@ -689,8 +1046,6 @@ export class ArgentGridComponent<TData = any>
         'copyWithHeaders',
         'separator',
         'export',
-        'separator',
-        'resetColumns',
       ]);
     }
 
@@ -698,13 +1053,17 @@ export class ArgentGridComponent<TData = any>
 
     this.activeContextMenu = true;
 
-    // Position menu at mouse coordinates (fixed/viewport)
-    let x = event.clientX;
-    let y = event.clientY;
+    // Position menu at mouse coordinates relative to container
+    const containerRect = this._elementRef.nativeElement.getBoundingClientRect();
+    let x = event.clientX - containerRect.left;
+    let y = event.clientY - containerRect.top;
 
-    // Prevent menu from going off-screen
-    if (x + 200 > window.innerWidth) x = window.innerWidth - 200;
-    if (y + 200 > window.innerHeight) y = window.innerHeight - 200;
+    // Prevent menu from going off-container bounds
+    const containerWidth = this._elementRef.nativeElement.offsetWidth;
+    const containerHeight = this._elementRef.nativeElement.offsetHeight;
+
+    if (x + 200 > containerWidth) x = containerWidth - 200;
+    if (y + 200 > containerHeight) y = containerHeight - 200;
 
     this.contextMenuPosition = { x, y };
 
@@ -760,6 +1119,87 @@ export class ArgentGridComponent<TData = any>
     }
   }
 
+  // ============================================================================
+  // TOOLTIP
+  // ============================================================================
+
+  onCanvasMouseMove(event: MouseEvent): void {
+    // Cancel any pending show and hide the current tooltip on every move
+    if (this._tooltipTimer) {
+      clearTimeout(this._tooltipTimer);
+      this._tooltipTimer = null;
+    }
+    this.tooltipVisible = false;
+
+    if (!this.canvasRenderer) return;
+
+    const hit = this.canvasRenderer.getHitTestResult(event);
+    const { rowIndex, columnIndex } = hit;
+    if (rowIndex < 0 || columnIndex < 0) return;
+
+    const columns = this.canvasRenderer.getAllColumns();
+    const column = columns[columnIndex];
+    if (!column) return;
+
+    const text = this.computeTooltipText(rowIndex, column);
+    if (!text) return;
+
+    this._tooltipTimer = setTimeout(() => {
+      const containerRect = this._elementRef.nativeElement.getBoundingClientRect();
+      let tx = event.clientX - containerRect.left + 14;
+      let ty = event.clientY - containerRect.top + 14;
+      // Keep within container bounds
+      const cw = this._elementRef.nativeElement.offsetWidth;
+      const ch = this._elementRef.nativeElement.offsetHeight;
+      if (tx + 220 > cw) tx = Math.max(0, tx - 234);
+      if (ty + 56 > ch) ty = Math.max(0, ty - 70);
+      this.tooltipText = text;
+      this.tooltipPosition = { x: tx, y: ty };
+      this.tooltipVisible = true;
+      this._cdr.detectChanges();
+    }, 500);
+  }
+
+  onCanvasMouseLeave(): void {
+    if (this._tooltipTimer) {
+      clearTimeout(this._tooltipTimer);
+      this._tooltipTimer = null;
+    }
+    if (this.tooltipVisible) {
+      this.tooltipVisible = false;
+      this._cdr.detectChanges();
+    }
+  }
+
+  private computeTooltipText(rowIndex: number, column: Column): string | null {
+    const colDef = this.getColumnDefForColumn(column) as ColDef<TData> | null;
+    if (!colDef || !this.isColDef(colDef)) return null;
+
+    const rowNode = this.gridApi?.getDisplayedRowAtIndex(rowIndex);
+    if (!rowNode?.data) return null;
+
+    // tooltipValueGetter takes priority (AG Grid parity)
+    if (typeof colDef.tooltipValueGetter === 'function') {
+      const val = colDef.field ? (rowNode.data as any)[colDef.field as string] : undefined;
+      return (
+        colDef.tooltipValueGetter({
+          value: val,
+          data: rowNode.data as TData,
+          node: rowNode,
+          column,
+        }) ?? null
+      );
+    }
+
+    // tooltipField — show the value of that field
+    if (colDef.tooltipField) {
+      const val = (rowNode.data as any)[colDef.tooltipField as string];
+      return val != null ? String(val) : null;
+    }
+
+    return null;
+  }
+
   closeContextMenu(): void {
     this.activeContextMenu = false;
     this.contextMenuCell = null;
@@ -789,6 +1229,14 @@ export class ArgentGridComponent<TData = any>
     if (!field || !this.gridApi) return;
 
     this.setFilterValues = this.gridService.getUniqueValues(field as string);
+
+    // Restore previously selected values from the current filter model
+    const existingFilter = this.gridApi.getFilterModel()[field as string] as any;
+    this.setFilterSelectedValues =
+      existingFilter?.filterType === 'set' && Array.isArray(existingFilter.values)
+        ? existingFilter.values
+        : null;
+
     const colDef = 'field' in col ? (col as ColDef<TData>) : null;
     this.setFilterValueFormatter = colDef?.valueFormatter
       ? (colDef.valueFormatter as any)
@@ -798,9 +1246,10 @@ export class ArgentGridComponent<TData = any>
       this.setFilterPosition = position;
     } else if (event) {
       const rect = (event.target as HTMLElement).getBoundingClientRect();
+      const containerRect = this._elementRef.nativeElement.getBoundingClientRect();
       this.setFilterPosition = {
-        x: rect.left,
-        y: rect.bottom + 5,
+        x: rect.left - containerRect.left,
+        y: rect.bottom - containerRect.top + 5,
       };
     }
 
@@ -908,7 +1357,8 @@ export class ArgentGridComponent<TData = any>
   ): void {
     this.activeFilterPopupColumn = col;
     const colDef = this.getColumnDefForColumn(col);
-    this.activeFilterPopupType = colDef?.filter === 'number' ? 'number' : 'text';
+    this.activeFilterPopupType =
+      colDef && this.isColDef(colDef) && colDef.filter === 'number' ? 'number' : 'text';
 
     // Initialize operator and values from current model or default
     const model = this.gridApi?.getFilterModel()[col.colId] as any;
@@ -921,7 +1371,11 @@ export class ArgentGridComponent<TData = any>
       this.filterPopupPosition = position;
     } else if (event) {
       const rect = (event.target as HTMLElement).getBoundingClientRect();
-      this.filterPopupPosition = { x: rect.left, y: rect.bottom + 5 };
+      const containerRect = this._elementRef.nativeElement.getBoundingClientRect();
+      this.filterPopupPosition = {
+        x: rect.left - containerRect.left,
+        y: rect.bottom - containerRect.top + 5,
+      };
     }
 
     setTimeout(() => {
@@ -993,9 +1447,16 @@ export class ArgentGridComponent<TData = any>
     this._cdr.detectChanges();
   }
 
+  openColumnsPanel(): void {
+    this.sideBarVisible = true;
+    this.activeToolPanel = 'columns';
+    this.closeHeaderMenu();
+    this._cdr.detectChanges();
+  }
+
   toggleColumnVisibility(col: Column): void {
     const colDef = this.getColumnDefForColumn(col);
-    if (colDef) {
+    if (colDef && this.isColDef(colDef)) {
       colDef.hide = col.visible; // Toggle
       this.initializeGrid(); // Re-initialize to handle visibility changes correctly
       this.canvasRenderer?.render();
@@ -1096,7 +1557,7 @@ export class ArgentGridComponent<TData = any>
 
     // Update original ColDef to ensure persistence
     const colDef = this.getColumnDefForColumn(col);
-    if (colDef) {
+    if (colDef && this.isColDef(colDef)) {
       colDef.sort = direction;
     }
 
@@ -1113,7 +1574,7 @@ export class ArgentGridComponent<TData = any>
 
     // Update the original column definition
     const colDef = this.getColumnDefForColumn(col);
-    if (colDef) {
+    if (colDef && this.isColDef(colDef)) {
       colDef.hide = true;
     }
 
@@ -1132,7 +1593,7 @@ export class ArgentGridComponent<TData = any>
 
     // Update the original column definition
     const colDef = this.getColumnDefForColumn(col);
-    if (colDef) {
+    if (colDef && this.isColDef(colDef)) {
       colDef.pinned = pin as any;
     }
 
@@ -1143,76 +1604,43 @@ export class ArgentGridComponent<TData = any>
     this.closeHeaderMenu();
   }
 
-  onColumnDropped(event: CdkDragDrop<any[]>, pinType: 'left' | 'right' | 'none'): void {
-    if (!this.columnDefs) return;
-
-    // Get current groups (using internal Columns)
-    const left = [...this.getLeftPinnedColumns()];
-    const center = [...this.getNonPinnedColumns()];
-    const right = [...this.getRightPinnedColumns()];
+  onColumnDropped(event: CdkDragDrop<any>, pinned: 'left' | 'right' | 'none'): void {
+    const col = event.item.data as Column;
+    if (!col) return;
 
-    const containerMap: { [key: string]: any[] } = {
-      'left-pinned': left,
-      scrollable: center,
-      'right-pinned': right,
-    };
-
-    const previousContainerData = containerMap[event.previousContainer.id];
-    const currentContainerData = containerMap[event.container.id];
+    const targetPinned = pinned === 'none' ? false : pinned;
 
-    if (event.previousContainer === event.container) {
-      moveItemInArray(currentContainerData, event.previousIndex, event.currentIndex);
-    } else {
-      transferArrayItem(
-        previousContainerData,
-        currentContainerData,
-        event.previousIndex,
-        event.currentIndex
-      );
-
-      // Update pinned state of the moved column in its original definition
-      const movedCol = currentContainerData[event.currentIndex] as Column;
-      const colDef = this.getColumnDefForColumn(movedCol);
-      if (colDef) {
-        colDef.pinned = pinType === 'none' ? null : (pinType as any);
-      }
+    if (col.pinned !== targetPinned) {
+      this.gridApi.setColumnPinned(col, targetPinned);
     }
 
-    // Map internal Columns back to their original ColDefs in the new order
-    const orderedVisibleColDefs: (ColDef<TData> | ColGroupDef<TData>)[] = [];
-    [...left, ...center, ...right].forEach((col) => {
-      const def = this.getColumnDefForColumn(col);
-      if (def) orderedVisibleColDefs.push(def);
-    });
-
-    // Reconstruct full columnDefs array, maintaining hidden columns
-    const hidden = this.columnDefs.filter((c) => {
-      if ('children' in c) return false;
-      return (c as ColDef).hide;
-    });
+    this.gridApi.moveColumn(col, event.currentIndex);
 
-    const newDefs = [...orderedVisibleColDefs, ...hidden];
-
-    this.onColumnDefsChanged(newDefs);
+    this.canvasRenderer?.render();
+    this._cdr.detectChanges();
   }
 
   // --- Column Resizing Logic ---
 
-  isResizable(col: Column | ColDef<TData> | ColGroupDef<TData>): boolean {
-    if ((col as any).colId === 'ag-Grid-SelectionColumn') return true;
-    if ('children' in col) return false;
-    const colDef = this.getColumnDefForColumn(col as any);
-    return colDef ? colDef.resizable !== false : true;
+  isResizable(item: Column | ColumnGroup | ColDef<TData> | ColGroupDef<TData>): boolean {
+    if ('children' in item) {
+      return (item as any).children.some((child: any) => this.isResizable(child));
+    }
+    const colId = (item as any).colId || (item as any).field?.toString();
+    if (colId === 'ag-Grid-SelectionColumn') return true;
+
+    const colDef = this.getColumnDefForColumn(item as any);
+    return colDef && this.isColDef(colDef) ? colDef.resizable !== false : true;
   }
 
-  onResizeMouseDown(event: MouseEvent, col: Column): void {
+  onResizeMouseDown(event: MouseEvent, item: Column | ColumnGroup): void {
     event.stopPropagation();
     event.preventDefault();
 
     this.isResizing = true;
-    this.resizeColumn = col;
+    this.resizeItem = item;
     this.resizeStartX = event.clientX;
-    this.resizeStartWidth = col.width;
+    this.resizeStartWidth = this.getItemWidth(item);
 
     const mouseMoveHandler = (e: MouseEvent) => this.onResizeMouseMove(e);
     const mouseUpHandler = () => {
@@ -1226,19 +1654,12 @@ export class ArgentGridComponent<TData = any>
   }
 
   private onResizeMouseMove(event: MouseEvent): void {
-    if (!this.isResizing || !this.resizeColumn) return;
+    if (!this.isResizing || !this.resizeItem) return;
 
     const deltaX = event.clientX - this.resizeStartX;
     const newWidth = Math.max(20, this.resizeStartWidth + deltaX);
 
-    // Update internal column width
-    this.resizeColumn.width = newWidth;
-
-    // Update original ColDef
-    const colDef = this.getColumnDefForColumn(this.resizeColumn);
-    if (colDef) {
-      colDef.width = newWidth;
-    }
+    this.applyResize(this.resizeItem!, newWidth);
 
     // Force re-render
     this.canvasRenderer?.render();
@@ -1247,7 +1668,29 @@ export class ArgentGridComponent<TData = any>
 
   private onResizeMouseUp(): void {
     this.isResizing = false;
-    this.resizeColumn = null;
+    this.resizeItem = null;
+  }
+
+  private applyResize(item: Column | ColumnGroup, newWidth: number): void {
+    if ('children' in item) {
+      const currentWidth = this.getItemWidth(item);
+      if (currentWidth === 0) return;
+
+      const ratio = newWidth / currentWidth;
+      item.children.forEach((child) => {
+        if (isColumnVisible(child)) {
+          const childWidth = this.getItemWidth(child);
+          this.applyResize(child, childWidth * ratio);
+        }
+      });
+    } else {
+      const finalWidth = Math.floor(newWidth);
+      (item as Column).width = finalWidth;
+      const colDef = this.getColumnDefForColumn(item as Column);
+      if (colDef && this.isColDef(colDef)) {
+        colDef.width = finalWidth;
+      }
+    }
   }
 
   // --- Floating Filter Logic ---
@@ -1297,7 +1740,7 @@ export class ArgentGridComponent<TData = any>
   private filterTimeout: any;
   onFloatingFilterInput(event: Event, col: Column | ColDef<TData> | ColGroupDef<TData>): void {
     const colDef = this.getColumnDefForColumn(col as any);
-    if (!colDef || 'children' in colDef) return;
+    if (!colDef || !this.isColDef(colDef)) return;
 
     const input = event.target as HTMLInputElement;
     const value = input.value;
@@ -1354,7 +1797,7 @@ export class ArgentGridComponent<TData = any>
     input: HTMLInputElement
   ): void {
     const colDef = this.getColumnDefForColumn(col as any);
-    if (!colDef || 'children' in colDef) return;
+    if (!colDef || !this.isColDef(colDef)) return;
 
     input.value = '';
     const colId = (col as any).colId || (col as any).field?.toString() || '';
@@ -1390,7 +1833,7 @@ export class ArgentGridComponent<TData = any>
 
     // Check if cell is editable
     const colDef = this.getColumnDefForColumn(column);
-    if (colDef && colDef.editable === false) return;
+    if (colDef && this.isColDef(colDef) && colDef.editable === false) return;
 
     // If already editing another cell, stop it first
     if (this.isEditing) {
@@ -1404,18 +1847,18 @@ export class ArgentGridComponent<TData = any>
     this.editingValue = value !== null && value !== undefined ? String(value) : '';
 
     // Calculate editor position based on row and column
-    const columns = this.gridApi.getAllColumns().filter((c) => c.visible);
+    const columns = this.gridApi.getAllColumns().filter((c) => isColumnVisible(c));
     let x = 0;
     for (const col of columns) {
       if (col.colId === colId) break;
-      x += col.width;
+      x += Math.floor(col.width || 150);
     }
 
     this.editorPosition = {
       x: x - this.canvasRenderer.currentScrollLeft,
-      y: rowIndex * this.rowHeight - this.canvasRenderer.currentScrollTop,
-      width: column.width,
-      height: this.rowHeight,
+      y: rowIndex * this.effectiveRowHeight - this.canvasRenderer.currentScrollTop,
+      width: Math.floor(column.width),
+      height: this.effectiveRowHeight,
     };
 
     this.isEditing = true;
@@ -1558,30 +2001,37 @@ export class ArgentGridComponent<TData = any>
     }
   }
   private getColumnDefForColumn(
-    column: Column | ColDef<TData> | ColGroupDef<TData>
-  ): ColDef<TData> | null {
+    column: Column | ColumnGroup | ColDef<TData> | ColGroupDef<TData>
+  ): ColDef<TData> | ColGroupDef<TData> | null {
     if (!this.columnDefs) return null;
 
-    const colId = (column as any).colId || (column as any).field?.toString();
+    const colId =
+      (column as any).colId || (column as any).field?.toString() || (column as any).groupId;
     if (!colId) return null;
 
     const defaultColDef = this.gridOptions?.defaultColDef || {};
 
-    for (const def of this.columnDefs) {
-      if ('children' in def) {
-        const found = def.children.find((c) => {
-          const cDef = c as ColDef;
-          return cDef.colId === colId || cDef.field?.toString() === colId;
-        });
-        if (found) return { ...defaultColDef, ...(found as ColDef<TData>) } as ColDef<TData>;
-      } else {
-        const cDef = def as ColDef;
-        if (cDef.colId === colId || cDef.field?.toString() === colId) {
-          return { ...defaultColDef, ...cDef } as ColDef<TData>;
+    const findDef = (
+      defs: (ColDef<TData> | ColGroupDef<TData>)[]
+    ): ColDef<TData> | ColGroupDef<TData> | null => {
+      for (const def of defs) {
+        const defId = (def as any).colId || (def as any).field?.toString() || (def as any).groupId;
+        if (defId === colId) {
+          return 'children' in def ? def : ({ ...defaultColDef, ...def } as ColDef<TData>);
+        }
+        if ('children' in def) {
+          const found = findDef(def.children);
+          if (found) return found;
         }
       }
-    }
-    return null;
+      return null;
+    };
+
+    return findDef(this.columnDefs);
+  }
+
+  private isColDef(def: any): def is ColDef<TData> {
+    return def && !('children' in def);
   }
 
   onRowClick(rowIndex: number, event: MouseEvent): void {