argent-grid 0.1.0 → 0.3.0

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

@@ -1,148 +1,255 @@
 <div class="argent-grid-container" [style.height]="height" [style.width]="width" (click)="onContainerClick($event)">
-  <div class="argent-grid-main-layout">
+  <div class="argent-grid-main-layout" cdkDropListGroup>
     <div class="argent-grid-content-area">
+      <!-- Row Group Panel -->
+      <div class="argent-grid-row-group-panel"
+           *ngIf="isRowGroupPanelVisible()"
+           cdkDropList
+           id="row-group-panel"
+           cdkDropListOrientation="horizontal"
+           (cdkDropListDropped)="onRowGroupDropped($event)">
+        <div class="row-group-placeholder" *ngIf="getRowGroupColumns().length === 0">
+          Drag columns here to group
+        </div>
+        <div *ngFor="let col of getRowGroupColumns(); trackBy: trackByRowGroup" class="row-group-pill">
+          <span class="pill-text">{{ getHeaderName(col) }}</span>
+          <span class="pill-close" (click)="removeRowGroup(col)">✕</span>
+        </div>
+      </div>
+
       <!-- Header Layer (DOM-based for accessibility) -->
       <div class="argent-grid-header">
-        <!-- Main Header Row -->
-        <div class="argent-grid-header-row">
-          <!-- Selection Column Header -->
-          <div
-            *ngIf="showSelectionColumn"
-            class="argent-grid-header-cell argent-grid-selection-header"
-            [style.width.px]="selectionColumnWidth"
-            (click)="onSelectionHeaderClick()">
-            <input type="checkbox"
-                   [checked]="isAllSelected"
-                   [indeterminate]="isIndeterminateSelection"
-                   (change)="onSelectionHeaderChange($event)" />
-          </div>
         
-          <!-- Left Pinned Columns -->
+        <div class="argent-grid-header-main">
+          <!-- Left Pinned Header -->
           <div class="argent-grid-header-pinned-left-container"
+               *ngIf="getLeftPinnedColumns().length > 0"
+               [style.display]="'grid'"
+               [style.grid-template-rows]="'repeat(' + gridApi.getHeaderDepth() + ', ' + effectiveHeaderHeight + 'px)'"
+               [style.grid-template-columns]="getGridTemplateColumns('left')"
                cdkDropList
-               id="left-pinned"
-               [cdkDropListConnectedTo]="['scrollable', 'right-pinned']"
+               id="left-pinned-list"
                cdkDropListOrientation="horizontal"
                (cdkDropListDropped)="onColumnDropped($event, 'left')">
-            <div
-              *ngFor="let col of getLeftPinnedColumns(); trackBy: trackByColumn"
-              class="argent-grid-header-cell argent-grid-header-cell-pinned-left"
-              [style.width.px]="getColumnWidth(col)"
-              [class.sortable]="isSortable(col)"
-              (click)="onHeaderClick(col)"
-              cdkDrag
-              [cdkDragData]="col">
-              <div class="argent-grid-header-content" cdkDragHandle>
-                <span class="header-text">{{ getHeaderName(col) }}</span>
-                <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
-              </div>
-              <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, col)" *ngIf="hasHeaderMenu(col)">
-                &#8942;
-              </div>
-              <div class="argent-grid-header-resize-handle" 
-                   *ngIf="isResizable(col)" 
-                   [class.resizing]="isResizing && resizeColumn === col"
-                   (mousedown)="onResizeMouseDown($event, col)">
-              </div>
-            </div>
-          </div>
-          
-          <!-- Scrollable Columns -->
-          <div class="argent-grid-header-scrollable"
-               #headerScrollable
-               cdkDropList
-               id="scrollable"
-               [cdkDropListConnectedTo]="['left-pinned', 'right-pinned']"
-               cdkDropListOrientation="horizontal"
-               (cdkDropListDropped)="onColumnDropped($event, 'none')">
-            <div class="argent-grid-header-row">
+            
+            <ng-container *ngFor="let entry of getSectionHeaderItems('left'); trackBy: trackByHeaderItem">
               <div
-                *ngFor="let col of getNonPinnedColumns(); trackBy: trackByColumn"
-                class="argent-grid-header-cell"
-                [style.width.px]="getColumnWidth(col)"
-                [class.sortable]="isSortable(col)"
-                (click)="onHeaderClick(col)"
+                *ngIf="isColumnVisible(entry.item)"
+                class="argent-grid-header-cell argent-grid-header-cell-pinned-left"
+                [class.argent-grid-header-group-cell]="isColumnGroup(entry.item)"
+                [class.center-content]="!isColumnGroup(entry.item) && entry.item.colId === 'ag-Grid-SelectionColumn'"
+                [style.grid-column]="getLeftPinnedColIndex(entry.item) + ' / span ' + getItemColSpan(entry.item)"
+                [style.grid-row]="(entry.rowIndex + 1) + ' / span ' + getItemRowSpan(entry.item, entry.rowIndex)"
+                [style.width.px]="getItemWidth(entry.item)"
+                [style.height.px]="getItemRowSpan(entry.item, entry.rowIndex) * effectiveHeaderHeight"
+                [class.sortable]="!isColumnGroup(entry.item) && isSortable(entry.item)"
+                (click)="!isColumnGroup(entry.item) && onHeaderClick(entry.item)"
                 cdkDrag
-                [cdkDragData]="col">
+                [cdkDragDisabled]="isColumnGroup(entry.item) || entry.item.colId === 'ag-Grid-SelectionColumn'"
+                [cdkDragData]="entry.item">
                 <div class="argent-grid-header-content" cdkDragHandle>
-                  <span class="header-text">{{ getHeaderName(col) }}</span>
-                  <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
+                  <div *ngIf="!isColumnGroup(entry.item) && hasHeaderCheckbox(entry.item)" class="argent-grid-header-checkbox">
+                    <input type="checkbox"
+                           [checked]="isAllSelected"
+                           [indeterminate]="isIndeterminateSelection"
+                           (click)="$event.stopPropagation()"
+                           (change)="onSelectionHeaderChange($event)" />
+                  </div>
+                  <span class="header-text">{{ getHeaderName(entry.item) }}</span>
+                  <span class="group-toggle" *ngIf="isColumnGroup(entry.item) && hasExpansionToggle(entry.item)" (click)="toggleGroup(entry.item, $event)">
+                     {{ entry.item.expanded ? '−' : '+' }}
+                  </span>
+                  <span class="sort-indicator" *ngIf="!isColumnGroup(entry.item) && getSortIndicator(entry.item)">{{ getSortIndicator(entry.item) }}</span>
+                </div>
+                <div class="argent-grid-header-filter-icon"
+                     [class.active]="isColumnFiltered(entry.item)"
+                     (click)="onHeaderFilterClick($event, entry.item)"
+                     *ngIf="!isColumnGroup(entry.item) && hasHeaderFilterButton(entry.item)"
+                     title="Filter">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M0.5 1.5h9L6 6V9H4V6Z"/></svg>
                 </div>
-                <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, col)" *ngIf="hasHeaderMenu(col)">
+                <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, entry.item)" *ngIf="!isColumnGroup(entry.item) && hasHeaderMenu(entry.item)">
                   &#8942;
                 </div>
                 <div class="argent-grid-header-resize-handle" 
-                     *ngIf="isResizable(col)" 
-                     [class.resizing]="isResizing && resizeColumn === col"
-                     (mousedown)="onResizeMouseDown($event, col)">
+                     *ngIf="isResizable(entry.item)" 
+                     [class.resizing]="isResizing && resizeItem === entry.item"
+                     (mousedown)="onResizeMouseDown($event, entry.item)">
                 </div>
               </div>
+            </ng-container>
+          </div>
+          
+          <!-- Scrollable Header -->
+          <div class="argent-grid-header-scrollable" #headerScrollable>
+            <div class="argent-grid-header-scrollable-content"
+                 [style.display]="'grid'"
+                 [style.grid-template-rows]="'repeat(' + gridApi.getHeaderDepth() + ', ' + effectiveHeaderHeight + 'px)'"
+                 [style.grid-template-columns]="getGridTemplateColumns('none')"
+                 [style.width.px]="getScrollableHeaderWidth()"
+                 cdkDropList
+                 id="scrollable-list"
+                 cdkDropListOrientation="horizontal"
+                 (cdkDropListDropped)="onColumnDropped($event, 'none')">
+              
+              <ng-container *ngFor="let entry of getSectionHeaderItems('none'); trackBy: trackByHeaderItem">
+                <div
+                  *ngIf="isColumnVisible(entry.item)"
+                  class="argent-grid-header-cell"
+                  [class.argent-grid-header-group-cell]="isColumnGroup(entry.item)"
+                  [style.grid-column]="getScrollableColIndex(entry.item) + ' / span ' + getItemColSpan(entry.item)"
+                  [style.grid-row]="(entry.rowIndex + 1) + ' / span ' + getItemRowSpan(entry.item, entry.rowIndex)"
+                  [style.width.px]="getItemWidth(entry.item)"
+                  [style.height.px]="getItemRowSpan(entry.item, entry.rowIndex) * effectiveHeaderHeight"
+                  [class.sortable]="!isColumnGroup(entry.item) && isSortable(entry.item)"
+                  (click)="!isColumnGroup(entry.item) && onHeaderClick(entry.item)"
+                  cdkDrag
+                  [cdkDragDisabled]="isColumnGroup(entry.item) || entry.item.colId === 'ag-Grid-SelectionColumn'"
+                  [cdkDragData]="entry.item">
+                  <div class="argent-grid-header-content" cdkDragHandle>
+                    <span class="header-text">{{ getHeaderName(entry.item) }}</span>
+                    <span class="group-toggle" *ngIf="isColumnGroup(entry.item) && hasExpansionToggle(entry.item)" (click)="toggleGroup(entry.item, $event)">
+                       {{ entry.item.expanded ? '−' : '+' }}
+                    </span>
+                    <span class="sort-indicator" *ngIf="!isColumnGroup(entry.item) && getSortIndicator(entry.item)">{{ getSortIndicator(entry.item) }}</span>
+                  </div>
+                  <div class="argent-grid-header-filter-icon"
+                       [class.active]="isColumnFiltered(entry.item)"
+                       (click)="onHeaderFilterClick($event, entry.item)"
+                       *ngIf="!isColumnGroup(entry.item) && hasHeaderFilterButton(entry.item)"
+                       title="Filter">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M0.5 1.5h9L6 6V9H4V6Z"/></svg>
+                  </div>
+                  <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, entry.item)" *ngIf="!isColumnGroup(entry.item) && hasHeaderMenu(entry.item)">
+                    &#8942;
+                  </div>
+                  <div class="argent-grid-header-resize-handle" 
+                       *ngIf="isResizable(entry.item)" 
+                       [class.resizing]="isResizing && resizeItem === entry.item"
+                       (mousedown)="onResizeMouseDown($event, entry.item)">
+                  </div>
+                </div>
+              </ng-container>
             </div>
           </div>
           
-          <!-- Right Pinned Columns -->
+          <!-- Right Pinned Header -->
           <div class="argent-grid-header-pinned-right-container"
+               *ngIf="getRightPinnedColumns().length > 0"
+               [style.display]="'grid'"
+               [style.grid-template-rows]="'repeat(' + gridApi.getHeaderDepth() + ', ' + effectiveHeaderHeight + 'px)'"
+               [style.grid-template-columns]="getGridTemplateColumns('right')"
                cdkDropList
-               id="right-pinned"
-               [cdkDropListConnectedTo]="['left-pinned', 'scrollable']"
+               id="right-pinned-list"
                cdkDropListOrientation="horizontal"
                (cdkDropListDropped)="onColumnDropped($event, 'right')">
-            <div
-              *ngFor="let col of getRightPinnedColumns(); trackBy: trackByColumn"
-              class="argent-grid-header-cell argent-grid-header-cell-pinned-right"
-              [style.width.px]="getColumnWidth(col)"
-              [class.sortable]="isSortable(col)"
-              (click)="onHeaderClick(col)"
-              cdkDrag
-              [cdkDragData]="col">
-              <div class="argent-grid-header-content" cdkDragHandle>
-                <span class="header-text">{{ getHeaderName(col) }}</span>
-                <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
-              </div>
-              <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, col)" *ngIf="hasHeaderMenu(col)">
-                &#8942;
-              </div>
-              <div class="argent-grid-header-resize-handle" 
-                   *ngIf="isResizable(col)" 
-                   [class.resizing]="isResizing && resizeColumn === col"
-                   (mousedown)="onResizeMouseDown($event, col)">
+            
+            <ng-container *ngFor="let entry of getSectionHeaderItems('right'); trackBy: trackByHeaderItem">
+              <div
+                *ngIf="isColumnVisible(entry.item)"
+                class="argent-grid-header-cell argent-grid-header-cell-pinned-right"
+                [class.argent-grid-header-group-cell]="isColumnGroup(entry.item)"
+                [style.grid-column]="getRightPinnedColIndex(entry.item) + ' / span ' + getItemColSpan(entry.item)"
+                [style.grid-row]="(entry.rowIndex + 1) + ' / span ' + getItemRowSpan(entry.item, entry.rowIndex)"
+                [style.width.px]="getItemWidth(entry.item)"
+                [style.height.px]="getItemRowSpan(entry.item, entry.rowIndex) * effectiveHeaderHeight"
+                [class.sortable]="!isColumnGroup(entry.item) && isSortable(entry.item)"
+                (click)="!isColumnGroup(entry.item) && onHeaderClick(entry.item)"
+                cdkDrag
+                [cdkDragDisabled]="isColumnGroup(entry.item) || entry.item.colId === 'ag-Grid-SelectionColumn'"
+                [cdkDragData]="entry.item">
+                <div class="argent-grid-header-content" cdkDragHandle>
+                  <span class="header-text">{{ getHeaderName(entry.item) }}</span>
+                  <span class="group-toggle" *ngIf="isColumnGroup(entry.item) && hasExpansionToggle(entry.item)" (click)="toggleGroup(entry.item, $event)">
+                     {{ entry.item.expanded ? '−' : '+' }}
+                  </span>
+                  <span class="sort-indicator" *ngIf="!isColumnGroup(entry.item) && getSortIndicator(entry.item)">{{ getSortIndicator(entry.item) }}</span>
+                </div>
+                <div class="argent-grid-header-filter-icon"
+                     [class.active]="isColumnFiltered(entry.item)"
+                     (click)="onHeaderFilterClick($event, entry.item)"
+                     *ngIf="!isColumnGroup(entry.item) && hasHeaderFilterButton(entry.item)"
+                     title="Filter">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="currentColor"><path d="M0.5 1.5h9L6 6V9H4V6Z"/></svg>
+                </div>
+                <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, entry.item)" *ngIf="!isColumnGroup(entry.item) && hasHeaderMenu(entry.item)">
+                  &#8942;
+                </div>
+                <div class="argent-grid-header-resize-handle" 
+                     *ngIf="isResizable(entry.item)" 
+                     [class.resizing]="isResizing && resizeItem === entry.item"
+                     (mousedown)="onResizeMouseDown($event, entry.item)">
+                </div>
               </div>
-            </div>
+            </ng-container>
+          </div>
+
+          <!-- Vertical Scrollbar Spacer -->
+          <div class="argent-grid-header-scrollbar-spacer" 
+               *ngIf="scrollbarWidth > 0"
+               [style.width.px]="scrollbarWidth">
           </div>
         </div>
 
         <!-- Floating Filter Row -->
-        <div class="argent-grid-header-row floating-filter-row" *ngIf="hasFloatingFilters()">
-          <!-- Selection Column Padding -->
-          <div *ngIf="showSelectionColumn" class="argent-grid-header-cell" [style.width.px]="selectionColumnWidth"></div>
-
+        <div class="floating-filter-row" *ngIf="hasFloatingFilters()">
           <!-- Left Pinned Filters -->
-          <div class="argent-grid-header-pinned-left-container">
-            <div
-              *ngFor="let col of getLeftPinnedColumns(); trackBy: trackByColumn"
-              class="argent-grid-header-cell argent-grid-header-cell-pinned-left"
-              [style.width.px]="getColumnWidth(col)">
-              <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
-                <input #filterInput
-                       class="floating-filter-input"
-                       [type]="getFilterInputType(col)"
-                       [value]="getFloatingFilterValue(col)"
-                       (input)="onFloatingFilterInput($event, col)"
-                       [placeholder]="'Filter...'" />
-                <span class="floating-filter-clear"
-                      *ngIf="hasFilterValue(col, filterInput)"
-                      (click)="clearFloatingFilter(col, filterInput)">✕</span>
+          <div class="argent-grid-header-pinned-left-container" *ngIf="getLeftPinnedColumns().length > 0">
+            <ng-container *ngFor="let col of getLeftPinnedColumns()">
+              <div *ngIf="isColumnVisible(col)"
+                   class="argent-grid-floating-filter-cell"
+                   [style.width.px]="getItemWidth(col)">
+                <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
+                  <input #filterInput
+                         class="floating-filter-input"
+                         [type]="getFilterInputType(col)"
+                         [value]="getFloatingFilterValue(col)"
+                         (input)="onFloatingFilterInput($event, col)"
+                         [placeholder]="'Filter...'" />
+                  <span class="floating-filter-clear" 
+                        *ngIf="hasFilterValue(col, filterInput)"
+                        (click)="clearFloatingFilter(col, filterInput)">✕</span>
+                </div>
               </div>
-            </div>
+            </ng-container>
           </div>
-
           <!-- Scrollable Filters -->
           <div class="argent-grid-header-scrollable" #headerScrollableFilter>
-            <div class="argent-grid-header-row">
-              <div
-                *ngFor="let col of getNonPinnedColumns(); trackBy: trackByColumn"
-                class="argent-grid-header-cell"
-                [style.width.px]="getColumnWidth(col)">
+            <div class="argent-grid-header-row" [style.width.px]="getScrollableHeaderWidth()">
+              <ng-container *ngFor="let col of getNonPinnedColumns()">
+                <div *ngIf="isColumnVisible(col)"
+                     class="argent-grid-floating-filter-cell"
+                     [style.width.px]="getItemWidth(col)">
+                  <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
+                    <button class="floating-filter-btn" 
+                            *ngIf="isSetFilter(col)"
+                            [class.active]="hasSetFilterValue(col)"
+                            (click)="openSetFilter($event, col)">
+                      <span class="filter-label">{{ getFloatingFilterValue(col) || 'All' }}</span>
+                      <span class="filter-count" *ngIf="hasSetFilterValue(col)">🔽 {{ getSetFilterCount(col) }}</span>
+                    </button>
+                    <ng-container *ngIf="!isSetFilter(col)">
+                      <input #filterInput
+                             class="floating-filter-input"
+                             [type]="getFilterInputType(col)"
+                             [value]="getFloatingFilterValue(col)"
+                             (input)="onFloatingFilterInput($event, col)"
+                             [placeholder]="'Filter...'" />
+                      <span class="floating-filter-clear" 
+                            *ngIf="hasFilterValue(col, filterInput)"
+                            (click)="clearFloatingFilter(col, filterInput)">✕</span>
+                    </ng-container>
+                  </div>
+                </div>
+              </ng-container>
+            </div>
+          </div>
+          <!-- Right Pinned Filters -->
+          <div class="argent-grid-header-pinned-right-container" *ngIf="getRightPinnedColumns().length > 0">
+            <ng-container *ngFor="let col of getRightPinnedColumns()">
+              <div *ngIf="isColumnVisible(col)"
+                   class="argent-grid-floating-filter-cell"
+                   [style.width.px]="getItemWidth(col)">
                 <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
                   <input #filterInput
                          class="floating-filter-input"
@@ -150,42 +257,29 @@
                          [value]="getFloatingFilterValue(col)"
                          (input)="onFloatingFilterInput($event, col)"
                          [placeholder]="'Filter...'" />
-                  <span class="floating-filter-clear"
+                  <span class="floating-filter-clear" 
                         *ngIf="hasFilterValue(col, filterInput)"
                         (click)="clearFloatingFilter(col, filterInput)">✕</span>
                 </div>
               </div>
-            </div>
+            </ng-container>
           </div>
 
-          <!-- Right Pinned Filters -->
-          <div class="argent-grid-header-pinned-right-container">
-            <div
-              *ngFor="let col of getRightPinnedColumns(); trackBy: trackByColumn"
-              class="argent-grid-header-cell argent-grid-header-cell-pinned-right"
-              [style.width.px]="getColumnWidth(col)">
-              <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
-                <input #filterInput
-                       class="floating-filter-input"
-                       [type]="getFilterInputType(col)"
-                       [value]="getFloatingFilterValue(col)"
-                       (input)="onFloatingFilterInput($event, col)"
-                       [placeholder]="'Filter...'" />
-                <span class="floating-filter-clear"
-                      *ngIf="hasFilterValue(col, filterInput)"
-                      (click)="clearFloatingFilter(col, filterInput)">✕</span>
-              </div>
-            </div>
+          <!-- Vertical Scrollbar Spacer -->
+          <div class="argent-grid-header-scrollbar-spacer" 
+               *ngIf="scrollbarWidth > 0"
+               [style.width.px]="scrollbarWidth">
           </div>
         </div>
       </div>
 
-      <!-- Canvas Layer for Data Viewport with virtual scrolling -->
+      <!-- Canvas Layer for Data Viewport -->
       <div class="argent-grid-viewport" #viewport>
-        <!-- Spacer to create scrollbars for virtual scrolling -->
         <div class="argent-grid-scroll-spacer" [style.height.px]="totalHeight" [style.width.px]="totalWidth"></div>
-        
-        <canvas #gridCanvas class="argent-grid-canvas" (contextmenu)="onCanvasContextMenu($event)"></canvas>
+        <canvas #gridCanvas class="argent-grid-canvas"
+                (contextmenu)="onCanvasContextMenu($event)"
+                (mousemove)="onCanvasMouseMove($event)"
+                (mouseleave)="onCanvasMouseLeave()"></canvas>
         
         <!-- Cell Editor Overlay -->
         <div class="argent-grid-cell-editor" 
@@ -207,48 +301,29 @@
       </div>
     </div>
 
-    <!-- Side Bar / Tool Panels -->
+    <!-- Side Bar -->
     <div class="argent-grid-side-bar" *ngIf="sideBarVisible" [class.has-active-panel]="!!activeToolPanel">
       <div class="side-bar-buttons">
         <div class="side-bar-button" [class.active]="activeToolPanel === 'columns'" (click)="toggleToolPanel('columns')">
           Columns
         </div>
-        <div class="side-bar-button" [class.active]="activeToolPanel === 'filters'" (click)="toggleToolPanel('filters')">
+        <!-- Hide Filters tool panel for now as it is not functional yet -->
+        <!-- <div class="side-bar-button" [class.active]="activeToolPanel === 'filters'" (click)="toggleToolPanel('filters')">
           Filters
-        </div>
+        </div> -->
       </div>
       
       <div class="tool-panel-content" *ngIf="activeToolPanel">
-        <!-- Columns Tool Panel -->
         <div class="columns-tool-panel" *ngIf="activeToolPanel === 'columns'">
           <h3>Columns</h3>
-            <div class="column-list" 
-               cdkDropList 
-               (cdkDropListDropped)="onSidebarColumnDropped($event)">
-            <div *ngFor="let col of getAllColumns()" 
-                 class="column-item" 
-                 cdkDrag
-                 [cdkDragData]="col">
-              <div *cdkDragPreview class="sidebar-drag-preview">
-                <span class="column-drag-handle">⠿</span>
-                <span>{{ getHeaderName(col) }}</span>
-              </div>
-              <div *cdkDragPlaceholder class="sidebar-drag-placeholder"></div>
-              
+          <div class="column-list" cdkDropList (cdkDropListDropped)="onSidebarColumnDropped($event)">
+            <div *ngFor="let col of getAllColumns()" class="column-item" cdkDrag [cdkDragData]="col">
               <span class="column-drag-handle" cdkDragHandle>⠿</span>
               <input type="checkbox" [checked]="col.visible" (change)="toggleColumnVisibility(col)" />
               <span class="column-label">{{ getHeaderName(col) }}</span>
             </div>
           </div>
         </div>
-
-        <!-- Filters Tool Panel -->
-        <div class="filters-tool-panel" *ngIf="activeToolPanel === 'filters'">
-          <h3>Filters</h3>
-          <div class="filter-placeholder">
-            Filters coming soon...
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -258,63 +333,76 @@
     <ng-content select="[overlay]"></ng-content>
   </div>
 
-  <!-- Header Menu Overlay -->
-  <div class="argent-grid-header-menu" 
-       *ngIf="activeHeaderMenu"
-       [style.top.px]="headerMenuPosition.y"
-       [style.left.px]="headerMenuPosition.x"
-       (click)="$event.stopPropagation()">
-    <div class="menu-item" (click)="sortColumnMenu('asc')">
-      <span class="menu-icon">↑</span> Sort Ascending
-    </div>
-    <div class="menu-item" (click)="sortColumnMenu('desc')">
-      <span class="menu-icon">↓</span> Sort Descending
-    </div>
-    <div class="menu-item" (click)="sortColumnMenu(null)">
-      <span class="menu-icon">✕</span> Clear Sort
-    </div>
-    <div class="menu-divider"></div>
-    <div class="menu-item" (click)="hideColumnMenu()">
-      <span class="menu-icon">ø</span> Hide Column
-    </div>
-    <div class="menu-item" (click)="pinColumnMenu('left')">
-      <span class="menu-icon">«</span> Pin Left
-    </div>
-    <div class="menu-item" (click)="pinColumnMenu('right')">
-      <span class="menu-icon">»</span> Pin Right
-    </div>
-    <div class="menu-item" (click)="pinColumnMenu(null)">
-      <span class="menu-icon">↺</span> Unpin
-    </div>
+  <!-- Menus and Popups -->
+  <div class="argent-grid-header-menu" *ngIf="activeHeaderMenu" [style.top.px]="headerMenuPosition.y" [style.left.px]="headerMenuPosition.x" (click)="$event.stopPropagation()">
+    <ng-container *ngFor="let item of headerMenuItems">
+      <div *ngIf="item.separator" class="menu-divider"></div>
+      <div *ngIf="!item.separator" class="menu-item" (click)="!item.disabled && item.action(); !item.subMenu && closeHeaderMenu()">
+        <span class="menu-icon" *ngIf="item.icon">{{ item.icon }}</span>
+        <span class="menu-text">{{ item.name }}</span>
+      </div>
+    </ng-container>
+  </div>
+
+  <!-- Set Filter Popup -->
+  <div *ngIf="activeSetFilter" class="set-filter-popup" [style.left.px]="setFilterPosition.x" [style.top.px]="setFilterPosition.y" (clickOutside)="closeSetFilter()" clickOutside>
+    <argent-set-filter [values]="setFilterValues" [initialSelectedValues]="setFilterSelectedValues" [valueFormatter]="setFilterValueFormatter" (filterChanged)="onSetFilterChanged($event)"></argent-set-filter>
   </div>
 
-  <!-- Context Menu Overlay -->
-  <div class="argent-grid-context-menu" 
-       *ngIf="activeContextMenu"
-       [style.top.px]="contextMenuPosition.y"
-       [style.left.px]="contextMenuPosition.x"
-       (click)="$event.stopPropagation()">
+  <!-- Context Menu -->
+  <div class="context-menu-popup" *ngIf="activeContextMenu" [style.top.px]="contextMenuPosition.y" [style.left.px]="contextMenuPosition.x" (click)="$event.stopPropagation()">
     <ng-container *ngFor="let item of contextMenuItems">
       <div *ngIf="item.separator" class="menu-divider"></div>
-      <div *ngIf="!item.separator" 
-           class="menu-item" 
-           [class.disabled]="item.disabled"
-           [class.has-submenu]="item.subMenu && item.subMenu.length > 0"
-           (click)="!item.disabled && item.action(); !item.subMenu && closeContextMenu()">
+      <div *ngIf="!item.separator" class="menu-item" [class.disabled]="item.disabled" [class.has-submenu]="item.subMenu"
+           (click)="!item.disabled && !item.subMenu && item.action(); !item.subMenu && closeContextMenu()">
         <span class="menu-icon" *ngIf="item.icon">{{ item.icon }}</span>
         <span class="menu-text">{{ item.name }}</span>
-        <span class="menu-arrow" *ngIf="item.subMenu && item.subMenu.length > 0">▶</span>
-        
-        <!-- Sub-menu -->
-        <div class="argent-grid-context-menu sub-menu" *ngIf="item.subMenu && item.subMenu.length > 0">
-          <div *ngFor="let subItem of item.subMenu" 
-               class="menu-item"
-               (click)="subItem.action(); closeContextMenu(); $event.stopPropagation()">
-            <span class="menu-icon" *ngIf="subItem.icon">{{ subItem.icon }}</span>
-            <span class="menu-text">{{ subItem.name }}</span>
+        <span class="menu-chevron" *ngIf="item.subMenu">&#9654;</span>
+        <div class="sub-menu" *ngIf="item.subMenu">
+          <div *ngFor="let sub of item.subMenu" class="menu-item"
+               (click)="!sub.disabled && sub.action(); closeContextMenu(); $event.stopPropagation()">
+            <span class="menu-icon" *ngIf="sub.icon">{{ sub.icon }}</span>
+            <span class="menu-text">{{ sub.name }}</span>
           </div>
         </div>
       </div>
     </ng-container>
   </div>
+
+  <!-- Tooltip -->
+  <div class="ag-tooltip" *ngIf="tooltipVisible"
+       [style.left.px]="tooltipPosition.x"
+       [style.top.px]="tooltipPosition.y">{{ tooltipText }}</div>
+
+  <!-- Filter Popup -->
+  <div *ngIf="activeFilterPopup" class="filter-popup" [style.left.px]="filterPopupPosition.x" [style.top.px]="filterPopupPosition.y" (clickOutside)="closeFilterPopup()" clickOutside (click)="$event.stopPropagation()">
+    <div class="filter-popup-content">
+      <div class="filter-popup-header">
+        Filter {{ getHeaderName(activeFilterPopupColumn!) }}
+      </div>
+      <select class="filter-operator-select" [value]="activeFilterOperator" (change)="onFilterPopupOperatorChange($any($event.target).value)">
+        <option *ngFor="let op of (activeFilterPopupType === 'number' ? numberFilterOperators : textFilterOperators)" [value]="op.value">{{ op.label }}</option>
+      </select>
+      
+      <div class="filter-input-container">
+        <input class="filter-input" 
+               [type]="activeFilterPopupType === 'number' ? 'number' : 'text'" 
+               [value]="filterValue1"
+               (input)="onFilterPopupInput($event, false)"
+               placeholder="Filter..." />
+      </div>
+      
+      <div class="filter-input-container" *ngIf="activeFilterOperator === 'inRange'">
+        <input class="filter-input" 
+               [type]="activeFilterPopupType === 'number' ? 'number' : 'text'" 
+               [value]="filterValue2"
+               (input)="onFilterPopupInput($event, true)"
+               placeholder="to..." />
+      </div>
+      
+      <div class="filter-popup-footer">
+        <button class="filter-clear-btn" (click)="clearColumnFilter(activeFilterPopupColumn!)">Clear Filter</button>
+      </div>
+    </div>
+  </div>
 </div>