argent-grid 0.1.0 → 0.3.0

package/src/lib/services/grid.service.ts

@@ -1,27 +1,33 @@
-import { Injectable, Inject, Optional } from '@angular/core';
-import { Subject } from 'rxjs';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { Injectable } from '@angular/core';
 import { Workbook } from 'exceljs';
-import {  GridApi,
-  GridOptions,
+import { Subject } from 'rxjs';
+import {
+  CellRange,
   ColDef,
   ColGroupDef,
   Column,
-  IRowNode,
+  ColumnGroup,
+  CsvExportParams,
+  ExcelExportParams,
   FilterModel,
   FilterModelItem,
-  SortModelItem,
+  GridApi,
+  GridOptions,
   GridState,
+  GroupRowNode,
+  IRowNode,
   RowDataTransaction,
   RowDataTransactionResult,
-  CsvExportParams,
-  ExcelExportParams,
-  GroupRowNode,
-  CellRange
+  SortDirection,
+  SortModelItem,
 } from '../types/ag-grid-types';
 
 @Injectable()
 export class GridService<TData = any> {
   private columns: Map<string, Column> = new Map();
+  private columnGroups: ColumnGroup[] = [];
+  private headerDepth = 1;
   private rowData: TData[] = [];
   private rowNodes: Map<string, IRowNode<TData>> = new Map();
   private displayedRowNodes: IRowNode<TData>[] = [];
@@ -34,7 +40,12 @@ export class GridService<TData = any> {
   private cellRanges: CellRange[] = [];
   private gridId: string = '';
   private gridOptions: GridOptions<TData> | null = null;
-  public gridStateChanged$ = new Subject<{ type: string, key?: string, value?: any }>();
+  public gridStateChanged$ = new Subject<{
+    type: string;
+    key?: string;
+    value?: any;
+    changedRowIndices?: number[];
+  }>();
 
   // Row height cache
   private cumulativeRowHeights: number[] = [];
@@ -47,7 +58,7 @@ export class GridService<TData = any> {
   // Pivoting state
   private pivotColumnDefs: (ColDef<TData> | ColGroupDef<TData>)[] | null = null;
   private isPivotMode = false;
-  
+
   createApi(
     columnDefs: (ColDef<TData> | ColGroupDef<TData>)[] | null,
     rowData: TData[] | null,
@@ -61,32 +72,78 @@ export class GridService<TData = any> {
     this.gridOptions = gridOptions ? { ...gridOptions } : {};
     this.isPivotMode = !!this.gridOptions.pivotMode;
 
-    this.initializeColumns();
-    
+    this.initializeColumns(true);
+
     // Trigger initial pipeline run
     this.applySorting();
     this.applyFiltering(); // This will trigger grouping if needed and initialize nodes
 
     return this.createGridApi();
   }
-  
+
   private generateGridId(): string {
     return `argent-grid-${Math.random().toString(36).substr(2, 9)}`;
   }
-  
-  private initializeColumns(): void {
+
+  private hasCheckboxSelection(): boolean {
+    const rowSelection = this.gridOptions?.rowSelection;
+    const isMultiMode =
+      rowSelection === 'multiple' ||
+      (typeof rowSelection === 'object' && rowSelection.mode === 'multiRow');
+
+    if (isMultiMode) return true;
+    if (this.gridOptions?.selectionColumnDef?.checkboxes) return true;
+    if (!this.columnDefs) return false;
+
+    const check = (defs: (ColDef | ColGroupDef)[]): boolean => {
+      return defs.some((def) => {
+        if ('children' in def) return check(def.children);
+        return !!def.checkboxSelection;
+      });
+    };
+
+    return check(this.columnDefs);
+  }
+
+  private initializeColumns(clearColumns: boolean = true): void {
     if (!this.columnDefs) {
       return;
     }
-    
+
+    const existingColumns = clearColumns ? [] : Array.from(this.columns.values());
     this.columns.clear();
+    this.columnGroups = [];
+    this.headerDepth = 1;
 
     const groupColumns = this.getGroupColumns();
     const isGrouping = groupColumns.length > 0;
     const groupDisplayType = this.gridOptions?.groupDisplayType || 'singleColumn';
 
-    // 1. Handle Auto Group Column (for singleColumn display)
-    if (isGrouping && (groupDisplayType === 'singleColumn' || !this.gridOptions?.groupDisplayType)) {
+    const topLevelColumns: (Column | ColumnGroup)[] = [];
+
+    // 1. Handle Selection Column
+    if (this.hasCheckboxSelection()) {
+      const selectionCol: Column = {
+        colId: 'ag-Grid-SelectionColumn',
+        field: 'ag-Grid-SelectionColumn',
+        headerName: '',
+        width: 50,
+        pinned: 'left',
+        visible: true,
+        sort: null,
+        checkboxSelection: true,
+        headerCheckboxSelection: true,
+        colIndex: 0,
+      };
+      this.columns.set(selectionCol.colId, selectionCol);
+      topLevelColumns.push(selectionCol);
+    }
+
+    // 2. Handle Auto Group Column (for singleColumn display)
+    if (
+      isGrouping &&
+      (groupDisplayType === 'singleColumn' || !this.gridOptions?.groupDisplayType)
+    ) {
       const autoGroupDef = this.gridOptions?.autoGroupColumnDef || {};
       const autoGroupCol: Column = {
         colId: 'ag-Grid-AutoColumn',
@@ -97,74 +154,387 @@ export class GridService<TData = any> {
         maxWidth: autoGroupDef.maxWidth,
         pinned: this.normalizePinned(autoGroupDef.pinned || 'left'),
         visible: true,
-        sort: null
+        sort: null,
+        colIndex: this.columns.size,
       };
       this.columns.set(autoGroupCol.colId, autoGroupCol);
+      topLevelColumns.push(autoGroupCol);
     }
 
-    // 2. Process regular columns
-    const columnsToProcess = (this.isPivotMode && this.pivotColumnDefs) ? 
-      [...this.columnDefs, ...this.pivotColumnDefs] : 
-      this.columnDefs;
+    // 3. Process columns
+    let currentLeafIndex = topLevelColumns.length;
+
+    const processDefs = (
+      defs: (ColDef<TData> | ColGroupDef<TData>)[],
+      level: number,
+      parent?: ColumnGroup
+    ): (Column | ColumnGroup)[] => {
+      return defs.map((def, index) => {
+        if ('children' in def) {
+          const groupId = def.groupId || `group-${index}-${level}`;
+          const group: ColumnGroup = {
+            groupId,
+            headerName: def.headerName,
+            children: [],
+            displayedChildren: [],
+            visible: true,
+            expanded: !!def.openByDefault,
+            parent,
+            level,
+            pinned: false,
+            columnGroupShow: def.columnGroupShow,
+            marryChildren: !!def.marryChildren,
+            colIndex: 0,
+          };
 
-    columnsToProcess.forEach((def, index) => {
-      if ('children' in def) {
-        // Column group
-        def.children.forEach((child, childIndex) => {
-          this.addColumn(child, index * 100 + childIndex, isGrouping);
-        });
-      } else {
-        this.addColumn(def, index, isGrouping);
+          const startIndex = currentLeafIndex;
+          group.children = processDefs(def.children, level + 1, group);
+          group.colIndex = startIndex;
+
+          const firstPinned = group.children.find((c) => 'pinned' in c && c.pinned)?.pinned;
+          group.pinned = firstPinned || false;
+
+          this.columnGroups.push(group);
+          return group;
+        } else {
+          const mergedDef = { ...this.gridOptions?.defaultColDef, ...def };
+          const colId = mergedDef.colId || mergedDef.field?.toString() || `col-${index}-${level}`;
+
+          // Preserve existing column if it exists to maintain width/order etc.
+          let column = existingColumns.find((c) => c.colId === colId);
+
+          let visible = !mergedDef.hide;
+          if (
+            isGrouping &&
+            mergedDef.rowGroup &&
+            visible &&
+            this.gridOptions?.groupHideOpenParents !== false
+          ) {
+            visible = false;
+          }
+
+          if (this.isPivotMode && mergedDef.pivot && visible) {
+            visible = false;
+          }
+
+          if (column) {
+            column.visible = visible;
+            column.parent = parent;
+            column.colIndex = currentLeafIndex++;
+            return column;
+          }
+
+          column = {
+            colId,
+            field: mergedDef.field?.toString(),
+            headerName: mergedDef.headerName,
+            width: mergedDef.width || 150,
+            minWidth: mergedDef.minWidth,
+            maxWidth: mergedDef.maxWidth,
+            pinned: this.normalizePinned(mergedDef.pinned),
+            visible: visible,
+            sort:
+              typeof mergedDef.sort === 'object' && mergedDef.sort !== null
+                ? (mergedDef.sort as any).sort
+                : mergedDef.sort || null,
+            sortIndex: mergedDef.sortIndex ?? undefined,
+            aggFunc: typeof mergedDef.aggFunc === 'string' ? mergedDef.aggFunc : null,
+            checkboxSelection: !!mergedDef.checkboxSelection,
+            headerCheckboxSelection: !!mergedDef.headerCheckboxSelection,
+            filter: mergedDef.filter,
+            parent,
+            columnGroupShow: mergedDef.columnGroupShow,
+            colIndex: currentLeafIndex++,
+          };
+
+          this.columns.set(colId, column);
+          return column;
+        }
+      });
+    };
+
+    const defsToProcess =
+      this.isPivotMode && this.pivotColumnDefs ? this.pivotColumnDefs : this.columnDefs || [];
+
+    topLevelColumns.push(...processDefs(defsToProcess, 0));
+
+    // 4. Add back any columns that were in existingColumns but not in defs
+    // (Only for normal columns, not internal Selection or AutoGroup columns
+    // which are handled in steps 1 and 2 above)
+    existingColumns.forEach((c) => {
+      if (
+        c.colId !== 'ag-Grid-SelectionColumn' &&
+        c.colId !== 'ag-Grid-AutoColumn' &&
+        !this.columns.has(c.colId)
+      ) {
+        this.columns.set(c.colId, c);
       }
     });
+
+    // 5. Calculate header depth
+    this.headerDepth = this.calculateHeaderDepth(topLevelColumns);
   }
 
-  private normalizePinned(pinned: boolean | 'left' | 'right' | null | undefined): 'left' | 'right' | false {
-    if (pinned === 'left' || pinned === true) return 'left';
-    if (pinned === 'right') return 'right';
-    return false;
+  private calculateHeaderDepth(columns: (Column | ColumnGroup)[]): number {
+    let maxDepth = 0;
+    const walk = (items: (Column | ColumnGroup)[], depth: number) => {
+      maxDepth = Math.max(maxDepth, depth);
+      items.forEach((item) => {
+        if ('children' in item) {
+          walk(item.children, depth + 1);
+        }
+      });
+    };
+    walk(columns, 1);
+    return maxDepth;
   }
-  
-  private addColumn(def: ColDef<TData>, index: number, isGrouping: boolean): void {
-    const colId = def.colId || def.field?.toString() || `col-${index}`;
-    
-    // Auto-hide columns that are being grouped (AG Grid default)
-    let visible = !def.hide;
-    if (isGrouping && def.rowGroup && visible && this.gridOptions?.groupHideOpenParents !== false) {
-      visible = false;
+
+  public getHeaderRows(): (Column | ColumnGroup)[][] {
+    const rows: (Column | ColumnGroup)[][] = [];
+    for (let i = 0; i < this.headerDepth; i++) {
+      rows[i] = [];
     }
 
-    // Auto-hide columns that are being pivoted
-    if (this.isPivotMode && def.pivot && visible) {
-      visible = false;
+    const walk = (items: (Column | ColumnGroup)[], level: number) => {
+      items.forEach((item) => {
+        rows[level].push(item);
+        if ('children' in item) {
+          walk(item.children, level + 1);
+        }
+      });
+    };
+
+    const topItems: (Column | ColumnGroup)[] = [];
+
+    if (this.hasCheckboxSelection()) {
+      topItems.push(this.columns.get('ag-Grid-SelectionColumn')!);
     }
 
-    // Auto-hide value columns if in pivot mode (they appear under pivot keys)
-    if (this.isPivotMode && def.aggFunc && visible && !colId.startsWith('pivot_')) {
-      visible = false;
+    const isGrouping = this.getGroupColumns().length > 0;
+    const groupDisplayType = this.gridOptions?.groupDisplayType || 'singleColumn';
+    if (
+      isGrouping &&
+      (groupDisplayType === 'singleColumn' || !this.gridOptions?.groupDisplayType)
+    ) {
+      topItems.push(this.columns.get('ag-Grid-AutoColumn')!);
     }
 
-    // In pivot mode, hide columns that are not part of grouping or pivot results
-    if (this.isPivotMode && visible && !def.rowGroup && !colId.startsWith('pivot_') && colId !== 'ag-Grid-AutoColumn') {
-      visible = false;
+    const defsToProcess =
+      this.isPivotMode && this.pivotColumnDefs ? this.pivotColumnDefs : this.columnDefs || [];
+
+    const processTop = (
+      defs: (ColDef<TData> | ColGroupDef<TData>)[],
+      level: number
+    ): (Column | ColumnGroup)[] => {
+      return defs.map((def, index) => {
+        if ('children' in def) {
+          const groupId = def.groupId || `group-${index}-${level}`;
+          return this.columnGroups.find((g) => g.groupId === groupId)!;
+        } else {
+          const colId = def.colId || def.field?.toString() || `col-${index}-${level}`;
+          return this.columns.get(colId)!;
+        }
+      });
+    };
+
+    topItems.push(...processTop(defsToProcess, 0));
+
+    walk(topItems, 0);
+    return rows;
+  }
+
+  public toggleColumnGroup(groupId: string, expanded: boolean): void {
+    const group = this.columnGroups.find((g) => g.groupId === groupId);
+    if (group) {
+      group.expanded = expanded;
+      this.gridStateChanged$.next({ type: 'columnGroupExpanded', key: groupId, value: expanded });
     }
+  }
 
-    const column: Column = {
-      colId,
-      field: def.field?.toString(),
-      headerName: def.headerName,
-      width: def.width || 150,
-      minWidth: def.minWidth,
-      maxWidth: def.maxWidth,
-      pinned: this.normalizePinned(def.pinned),
-      visible: visible,
-      sort: (typeof def.sort === 'object' && def.sort !== null) ? (def.sort as any).sort : def.sort || null,
-      sortIndex: def.sortIndex ?? undefined,
-      aggFunc: typeof def.aggFunc === 'string' ? def.aggFunc : null
+  public addRowGroupColumn(colId: string): void {
+    if (!this.columnDefs) return;
+
+    const updateDef = (defs: (ColDef<TData> | ColGroupDef<TData>)[]) => {
+      defs.forEach((def) => {
+        if ('children' in def) {
+          updateDef(def.children);
+        } else if (def.colId === colId || def.field === colId) {
+          def.rowGroup = true;
+        }
+      });
+    };
+
+    this.expandedGroups.clear();
+    updateDef(this.columnDefs);
+    this.initializeColumns(false);
+    this.applyFiltering();
+    this.gridStateChanged$.next({ type: 'columnsChanged' });
+  }
+
+  public removeRowGroupColumn(colId: string): void {
+    if (!this.columnDefs) return;
+
+    const updateDef = (defs: (ColDef<TData> | ColGroupDef<TData>)[]) => {
+      defs.forEach((def) => {
+        if ('children' in def) {
+          updateDef(def.children);
+        } else if (def.colId === colId || def.field === colId) {
+          def.rowGroup = false;
+        }
+      });
+    };
+
+    this.expandedGroups.clear();
+    updateDef(this.columnDefs);
+    this.initializeColumns(false);
+    this.applyFiltering();
+    this.gridStateChanged$.next({ type: 'columnsChanged' });
+  }
+
+  public setRowGroupColumns(colIds: string[]): void {
+    if (!this.columnDefs) return;
+
+    const updateDef = (defs: (ColDef<TData> | ColGroupDef<TData>)[]) => {
+      defs.forEach((def) => {
+        if ('children' in def) {
+          updateDef(def.children);
+        } else {
+          def.rowGroup = colIds.includes(def.colId || def.field?.toString() || '');
+        }
+      });
     };
-    this.columns.set(colId, column);
+
+    this.expandedGroups.clear();
+    updateDef(this.columnDefs);
+    this.initializeColumns(false);
+    this.applyFiltering();
+    this.gridStateChanged$.next({ type: 'columnsChanged' });
   }
-  
+
+  public setColumnPinned(col: string | Column, pinned: 'left' | 'right' | boolean): void {
+    const colId = typeof col === 'string' ? col : col.colId;
+    const column = this.columns.get(colId);
+    if (column) {
+      column.pinned = this.normalizePinned(pinned);
+
+      // Also update ColDef
+      if (this.columnDefs) {
+        const updateDef = (defs: (ColDef<TData> | ColGroupDef<TData>)[]) => {
+          defs.forEach((def) => {
+            if ('children' in def) updateDef(def.children);
+            else if (def.colId === colId || def.field === colId) {
+              def.pinned = column.pinned === false ? null : column.pinned;
+            }
+          });
+        };
+        updateDef(this.columnDefs);
+      }
+
+      this.initializeColumns(false);
+      this.gridStateChanged$.next({ type: 'columnsChanged' });
+    }
+  }
+
+  public moveColumn(col: string | Column, toIndex: number): void {
+    const colId = typeof col === 'string' ? col : col.colId;
+    const column = this.columns.get(colId);
+
+    if (column) {
+      const allCols = Array.from(this.columns.values());
+      const fromIdx = allCols.findIndex((c) => c.colId === colId);
+
+      // We want to find the target position relative to the section
+      const sectionCols = allCols.filter((c) => c.pinned === column.pinned);
+      const targetCol = sectionCols[toIndex];
+
+      let toIdx = -1;
+      if (targetCol) {
+        toIdx = allCols.findIndex((c) => c.colId === targetCol.colId);
+      } else {
+        // Drop at end of section
+        if (toIndex >= sectionCols.length) {
+          const lastInSection = sectionCols[sectionCols.length - 1];
+          if (lastInSection) {
+            toIdx = allCols.findIndex((c) => c.colId === lastInSection.colId);
+          }
+        } else {
+          const firstInSection = sectionCols[0];
+          if (firstInSection) {
+            toIdx = allCols.findIndex((c) => c.colId === firstInSection.colId);
+          }
+        }
+      }
+
+      if (toIdx !== -1 && fromIdx !== toIdx) {
+        moveItemInArray(allCols, fromIdx, toIdx);
+
+        // Also move in columnDefs if present
+        if (this.columnDefs) {
+          const fromDefIdx = this.columnDefs.findIndex(
+            (d) => !('children' in d) && (d.colId === colId || d.field?.toString() === colId)
+          );
+          if (fromDefIdx !== -1 && targetCol) {
+            const toDefIdx = this.columnDefs.findIndex(
+              (d) =>
+                !('children' in d) &&
+                (d.colId === targetCol.colId || d.field?.toString() === targetCol.colId)
+            );
+            if (toDefIdx !== -1) {
+              moveItemInArray(this.columnDefs, fromDefIdx, toDefIdx);
+            }
+          }
+        }
+
+        this.columns.clear();
+        allCols.forEach((c) => this.columns.set(c.colId, c));
+
+        this.initializeColumns(false);
+        this.gridStateChanged$.next({ type: 'columnsChanged' });
+      }
+    }
+  }
+
+  public setColumnVisible(col: string | Column, visible: boolean): void {
+    const colId = typeof col === 'string' ? col : col.colId;
+    const column = this.columns.get(colId);
+    if (column) {
+      column.visible = visible;
+      this.gridStateChanged$.next({ type: 'columnsChanged' });
+    }
+  }
+
+  public setColumnWidth(col: string | Column, width: number): void {
+    const colId = typeof col === 'string' ? col : col.colId;
+    const column = this.columns.get(colId);
+    if (column) {
+      column.width = Math.floor(width);
+      this.gridStateChanged$.next({ type: 'columnsChanged' });
+    }
+  }
+
+  public setColumnSort(col: string | Column, sort: SortDirection, multiSort?: boolean): void {
+    const colId = typeof col === 'string' ? col : col.colId;
+    const column = this.columns.get(colId);
+    if (column) {
+      column.sort = sort;
+      if (!multiSort) {
+        this.columns.forEach((c) => {
+          if (c.colId !== colId) c.sort = null;
+        });
+      }
+      this.applySorting();
+      this.gridStateChanged$.next({ type: 'sortChanged' });
+    }
+  }
+
+  private normalizePinned(
+    pinned: boolean | 'left' | 'right' | null | undefined
+  ): 'left' | 'right' | false {
+    if (pinned === 'left' || pinned === true) return 'left';
+    if (pinned === 'right') return 'right';
+    return false;
+  }
+
   private getRowId(data: TData, index: number): string {
     // 1. Try custom callback from gridOptions
     if (this.gridOptions?.getRowId) {
@@ -175,15 +545,17 @@ export class GridService<TData = any> {
     const anyData = data as any;
     return anyData?.id?.toString() || anyData?.Id?.toString() || `row-${index}`;
   }
-  
+
   private createGridApi(): GridApi<TData> {
-    return {
+    const api: any = {};
+
+    Object.assign(api, {
       // Column API
       getColumnDefs: () => this.columnDefs,
       setColumnDefs: (colDefs) => {
         this.columnDefs = colDefs;
         this.groupingDirty = true;
-        this.initializeColumns();
+        this.initializeColumns(true);
       },
       getColumn: (key) => {
         const colId = typeof key === 'string' ? key : key.colId;
@@ -193,7 +565,13 @@ export class GridService<TData = any> {
       getDisplayedRowAtIndex: (index) => {
         return this.displayedRowNodes[index] || null;
       },
-      
+      getHeaderRows: () => this.getHeaderRows(),
+      getHeaderDepth: () => this.headerDepth,
+      getHeaderHeight: () => {
+        const headerHeight = this.gridOptions?.headerHeight || this.gridOptions?.rowHeight || 32;
+        return this.headerDepth * headerHeight;
+      },
+
       // Row Data API
       getRowData: () => [...this.filteredRowData],
       setRowData: (rowData) => {
@@ -207,25 +585,25 @@ export class GridService<TData = any> {
       getDisplayedRowCount: () => this.displayedRowNodes.length,
       getAggregations: () => this.calculateColumnAggregations(this.filteredRowData),
       getRowNode: (id) => this.rowNodes.get(id) || null,
-      
+
       // Selection API
-      getSelectedRows: () => Array.from(this.rowNodes.values()).filter(n => n.selected),
-      getSelectedNodes: () => Array.from(this.rowNodes.values()).filter(n => n.selected),
+      getSelectedRows: () => Array.from(this.rowNodes.values()).filter((n) => n.selected),
+      getSelectedNodes: () => Array.from(this.rowNodes.values()).filter((n) => n.selected),
       selectAll: () => {
-        this.rowNodes.forEach(node => {
+        this.rowNodes.forEach((node) => {
           node.selected = true;
           this.selectedRows.add(node.id!);
         });
         this.gridStateChanged$.next({ type: 'selectionChanged' });
       },
       deselectAll: () => {
-        this.rowNodes.forEach(node => {
+        this.rowNodes.forEach((node) => {
           node.selected = false;
         });
         this.selectedRows.clear();
         this.gridStateChanged$.next({ type: 'selectionChanged' });
       },
-      
+
       // Filter API
       setFilterModel: (model) => {
         this.filterModel = model;
@@ -238,7 +616,7 @@ export class GridService<TData = any> {
         this.gridStateChanged$.next({ type: 'filterChanged' });
       },
       isFilterPresent: () => Object.keys(this.filterModel).length > 0,
-      
+
       // Sort API
       setSortModel: (model) => {
         this.sortModel = model;
@@ -247,12 +625,8 @@ export class GridService<TData = any> {
         this.gridStateChanged$.next({ type: 'sortChanged' });
       },
       getSortModel: () => [...this.sortModel],
-      onSortChanged: () => {
-        this.applySorting();
-        this.applyFiltering(); // Re-filter and re-group after sort
-        this.gridStateChanged$.next({ type: 'sortChanged' });
-      },
-      
+      // onSortChanged handled below
+
       // Pagination API
       paginationGetPageSize: () => 100,
       paginationSetPageSize: () => {},
@@ -262,57 +636,92 @@ export class GridService<TData = any> {
       paginationGoToLastPage: () => {},
       paginationGoToNextPage: () => {},
       paginationGoToPreviousPage: () => {},
-      
+
       // Export API
-      exportDataAsCsv: (params) => this.exportAsCsv(params),
+      exportDataAsCsv: (params) => this.exportAsCsv(params, api),
       exportDataAsExcel: (params) => this.exportAsExcel(params),
-      
+      downloadFile: (content, fileName, mimeType) => this.downloadFile(content, fileName, mimeType),
+
       // Clipboard API
-      copyToClipboard: () => {},
-      cutToClipboard: () => {},
-      pasteFromClipboard: () => {},
-      
+      copyToClipboard: () => {
+        try {
+          const selectedData = api.getSelectedRows().map((node) => node.data);
+          const csv = selectedData.map((row) => Object.values(row as any).join(',')).join('\n');
+          if (typeof navigator !== 'undefined' && (navigator as any).clipboard) {
+            (navigator as any).clipboard.writeText(csv);
+          }
+        } catch (_e) {
+          // Ignore clipboard errors
+        }
+      },
+      cutToClipboard: () => {
+        api.copyToClipboard();
+      },
+      pasteFromClipboard: () => {
+        try {
+          if (typeof navigator !== 'undefined' && (navigator as any).clipboard) {
+            (navigator as any).clipboard.readText();
+          }
+        } catch (_e) {
+          // Ignore clipboard errors
+        }
+      },
+
       // Grid State API
       getState: () => this.getGridState(),
       applyState: (state) => this.applyGridState(state),
-      
+
+      // State Persistence API
+      saveState: (key?: string) => this.saveState(key),
+      restoreState: (key?: string) => this.restoreState(key),
+      clearState: (key?: string) => this.clearState(key),
+      hasState: (key?: string) => this.hasState(key),
+      setState: (state: GridState) => this.setState(state),
+      getUniqueValues: (field: string) => this.getUniqueValues(field),
+
       // Focus API
       setFocusedCell: () => {},
       getFocusedCell: () => null,
-      
+
       // Refresh API
       refreshCells: () => {},
       refreshRows: (params) => {
         if (params?.rowNodes) {
-          params.rowNodes.forEach(node => {
+          params.rowNodes.forEach((_node) => {
             // Trigger cell refresh
           });
         }
       },
       refreshHeader: () => {},
-      
+
       // Scroll API
       ensureIndexVisible: () => {},
       ensureColumnVisible: () => {},
-      
+
       // Destroy API
       destroy: () => {
         this.columns.clear();
         this.rowNodes.clear();
         this.rowData = [];
       },
-      
+
       // Grid Information
       getGridId: () => this.gridId,
-      getGridOption: (key) => this.gridOptions ? this.gridOptions[key] : undefined as any,
+      getGridOption: (key) => (this.gridOptions ? this.gridOptions[key] : (undefined as any)),
       setGridOption: (key, value) => {
         if (!this.gridOptions) {
           this.gridOptions = {} as GridOptions<TData>;
         }
+        if (this.gridOptions[key] === value) return;
         this.gridOptions[key] = value;
+
+        if (key === 'rowHeight' || key === 'detailRowHeight') {
+          this.updateRowHeightCache();
+        }
+
         this.gridStateChanged$.next({ type: 'optionChanged', key: key as string, value });
       },
-      
+
       // Group Expansion
       setRowNodeExpanded: (node, expanded) => {
         if (node.id && (node.group || node.master)) {
@@ -321,13 +730,13 @@ export class GridService<TData = any> {
           } else {
             this.expandedGroups.delete(node.id);
           }
-          
+
           if (node.group) {
             this.applyGrouping();
           } else {
             this.initializeRowNodesFromFilteredData();
           }
-          
+
           this.gridStateChanged$.next({ type: 'groupExpanded', value: expanded });
         }
       },
@@ -349,9 +758,9 @@ export class GridService<TData = any> {
         }
       },
       isPivotMode: () => this.isPivotMode,
-      
+
       // Range Selection API
-      getCellRanges: () => this.cellRanges.length > 0 ? [...this.cellRanges] : null,
+      getCellRanges: () => (this.cellRanges.length > 0 ? [...this.cellRanges] : null),
       addCellRange: (range) => {
         this.cellRanges = [range]; // For now only support single range
         this.gridStateChanged$.next({ type: 'rangeSelectionChanged' });
@@ -361,38 +770,321 @@ export class GridService<TData = any> {
           this.cellRanges = [];
           this.gridStateChanged$.next({ type: 'rangeSelectionChanged' });
         }
-      }
-    };
+      },
+
+      // Column Operations
+      autoSizeColumns: (colKeys) => {
+        // Basic implementation - set reasonable widths
+        colKeys.forEach((key) => {
+          const col = typeof key === 'string' ? this.columns.get(key) : key;
+          if (col) {
+            col.width = 150;
+          }
+        });
+      },
+      getColumnState: () => {
+        return Array.from(this.columns.values()).map((col) => ({
+          colId: col.colId,
+          width: col.width,
+          hide: !col.visible,
+          pinned: col.pinned,
+          sort: col.sort,
+          sortIndex: col.sortIndex,
+        }));
+      },
+      applyColumnState: (state) => {
+        if (Array.isArray(state)) {
+          state.forEach((colState) => {
+            const col = this.columns.get(colState.colId);
+            if (col) {
+              col.width = colState.width;
+              col.visible = !colState.hide;
+              col.pinned = colState.pinned;
+              col.sort = colState.sort;
+              col.sortIndex = colState.sortIndex;
+            }
+          });
+        }
+      },
+      resetColumnState: () => {
+        // Reset to initial state
+        if (this.columnDefs) {
+          this.initializeColumns();
+        }
+      },
+
+      // Cell Editing
+      startEditingCell: (_params) => {
+        // Basic implementation
+      },
+      stopEditing: () => {
+        // Basic implementation
+      },
+      getEditingCells: () => {
+        return [];
+      },
+      flashCells: (_params) => {
+        // Basic implementation
+      },
+
+      // Row Operations
+      resetRowHeights: () => {
+        this.updateRowHeightCache();
+      },
+      getRowHeightForRow: (rowIndex) => {
+        const node = this.displayedRowNodes[rowIndex];
+        return node?.rowHeight || this.gridOptions?.rowHeight || 32;
+      },
+
+      // Scroll Operations
+      setScrollPosition: (_params) => {
+        // Basic implementation
+      },
+      getScrollPosition: () => {
+        return { top: 0, left: 0 };
+      },
+      sizeColumnsToFit: (width) => {
+        const cols = Array.from(this.columns.values()).filter((c) => c.visible);
+        if (cols.length > 0) {
+          const colWidth = Math.floor(width / cols.length);
+          cols.forEach((col) => (col.width = colWidth));
+        }
+      },
+
+      // Pivot Mode
+      getPivotColumns: () => {
+        return [];
+      },
+      getValueColumns: () => {
+        return [];
+      },
+      toggleColumnGroup: (groupId, expanded) => this.toggleColumnGroup(groupId, expanded),
+      addRowGroupColumn: (colId) => this.addRowGroupColumn(colId),
+      removeRowGroupColumn: (colId) => this.removeRowGroupColumn(colId),
+      setRowGroupColumns: (colIds) => this.setRowGroupColumns(colIds),
+      getRowGroupColumns: () => this.getGroupColumns(),
+      getGroupDisplayType: () => {
+        return this.gridOptions?.groupDisplayType || 'singleColumn';
+      },
+      setColumnPinned: (col, pinned) => this.setColumnPinned(col, pinned),
+      moveColumn: (col, toIndex) => this.moveColumn(col, toIndex),
+      setColumnVisible: (col, visible) => this.setColumnVisible(col, visible),
+      setColumnWidth: (col, width) => this.setColumnWidth(col, width),
+      setColumnSort: (col, sort, multiSort) => this.setColumnSort(col, sort, multiSort),
+      onSortChanged: () => this.applySorting(),
+
+      // Tool Panels
+      setSideBarVisible: (_visible) => {
+        // Basic implementation
+      },
+      openToolPanel: (_panelId) => {
+        // Basic implementation
+      },
+      closeToolPanel: () => {
+        // Basic implementation
+      },
+      enableFilterToolPanel: () => {
+        // Basic implementation
+      },
+      enableColumnsToolPanel: () => {
+        // Basic implementation
+      },
+      getToolPanel: (_panelId) => {
+        return null;
+      },
+      isToolPanelShowing: () => {
+        return false;
+      },
+
+      // Context Menu
+      getContextMenuItems: () => {
+        return [];
+      },
+      getMainMenuItems: () => {
+        return [];
+      },
+      getHeaderContextMenuItems: () => {
+        return [];
+      },
+
+      // Event Handling
+      addEventListener: (_eventType, _listener) => {
+        // Basic implementation
+      },
+      removeEventListener: (_eventType, _listener) => {
+        // Basic implementation
+      },
+      dispatchEvent: (_event) => {
+        // Basic implementation
+      },
+      getEventPath: () => {
+        return [];
+      },
+
+      // Rendering
+      getRenderedNodes: () => {
+        return [...this.displayedRowNodes];
+      },
+      getFirstRenderedRow: () => {
+        return 0;
+      },
+      getLastRenderedRow: () => {
+        return this.displayedRowNodes.length - 1;
+      },
+      getVerticalPixelRange: () => {
+        return { start: 0, end: this.getTotalHeight() };
+      },
+      getHorizontalPixelRange: () => {
+        const cols = Array.from(this.columns.values()).filter((c) => c.visible);
+        const width = cols.reduce((sum, col) => sum + col.width, 0);
+        return { start: 0, end: width };
+      },
+      getPinnedWidth: () => {
+        const leftPinned = Array.from(this.columns.values()).filter((c) => c.pinned === 'left');
+        return leftPinned.reduce((sum, col) => sum + col.width, 0);
+      },
+      getRightPinnedWidth: () => {
+        const rightPinned = Array.from(this.columns.values()).filter((c) => c.pinned === 'right');
+        return rightPinned.reduce((sum, col) => sum + col.width, 0);
+      },
+      getHScrollPosition: () => {
+        return 0;
+      },
+      getVScrollPosition: () => {
+        return 0;
+      },
+
+      // Localization
+      getLocaleText: () => {
+        return '';
+      },
+      setLocaleText: (_locale, _texts) => {
+        // Basic implementation
+      },
+
+      // Charts
+      getChartModels: () => {
+        return [];
+      },
+      getChartToolbarItems: () => {
+        return [];
+      },
+      hidePopup: () => {
+        // Basic implementation
+      },
+      getSparklineOptions: () => {
+        return [];
+      },
+
+      // Grid State
+      getGridPanel: () => {
+        return null;
+      },
+      getRowContainerElement: () => {
+        return null;
+      },
+      getBodyElement: () => {
+        return null;
+      },
+      getHeaderElements: () => {
+        return [];
+      },
+      getCenterElements: () => {
+        return [];
+      },
+      getLeftElements: () => {
+        return [];
+      },
+      getRightElements: () => {
+        return [];
+      },
+
+      // Disabled State
+      setDisabled: (_disabled) => {
+        // Basic implementation
+      },
+      isDisabled: () => {
+        return false;
+      },
+
+      // Row Information
+      getRowPosition: (rowIndex) => {
+        return this.getRowY(rowIndex);
+      },
+      getRowStyle: (_rowIndex) => {
+        return null;
+      },
+      getRowClass: (_rowIndex) => {
+        return null;
+      },
+      getRowId: (node) => {
+        return node.id;
+      },
+      isRowMaster: (node) => {
+        return !!node.master;
+      },
+      getColumnGroups: () => {
+        return [];
+      },
+      getColumnGroup: () => {
+        return null;
+      },
+
+      // Aggregation
+      refreshAggregatedCols: () => {
+        // Basic implementation
+      },
+
+      // ForEach Operations
+      forEachNode: (callback) => {
+        this.rowNodes.forEach((node) => callback(node));
+      },
+      forEachNodeAfterFilter: (callback) => {
+        this.displayedRowNodes.forEach((node) => callback(node));
+      },
+      forEachNodeAfterFilterAndSort: (callback) => {
+        this.displayedRowNodes.forEach((node) => callback(node));
+      },
+    });
+
+    return api;
   }
-  
-  private applyTransaction(transaction: RowDataTransaction<TData>): RowDataTransactionResult | null {
+
+  private applyTransaction(
+    transaction: RowDataTransaction<TData>
+  ): RowDataTransactionResult | null {
     const result: RowDataTransactionResult = {
       add: [],
       update: [],
-      remove: []
+      remove: [],
     };
-    
+
     let dataChanged = false;
+    // Track changed row indices for efficient rendering
+    const changedRowIndices: number[] = [];
 
     if (transaction.add) {
+      const startIndex = this.rowData.length;
       transaction.add.forEach((data, index) => {
-        const id = this.getRowId(data, this.rowData.length + index);
+        const _id = this.getRowId(data, this.rowData.length + index);
         this.rowData.push(data);
         dataChanged = true;
-        
+        changedRowIndices.push(startIndex + index);
+
         // We'll create the actual node during the pipeline re-run
         // but we can return a placeholder result for now as AG Grid does
       });
     }
-    
+
     if (transaction.update) {
-      transaction.update.forEach(data => {
+      transaction.update.forEach((data) => {
         const id = this.getRowId(data, 0);
-        const index = this.rowData.findIndex(r => this.getRowId(r, 0) === id);
+        const index = this.rowData.findIndex((r) => this.getRowId(r, 0) === id);
         if (index !== -1) {
           this.rowData[index] = data;
           dataChanged = true;
-          
+          changedRowIndices.push(index);
+
           const existingNode = this.rowNodes.get(id);
           if (existingNode) {
             existingNode.data = data;
@@ -403,16 +1095,18 @@ export class GridService<TData = any> {
     }
 
     if (transaction.remove) {
-      transaction.remove.forEach(data => {
+      transaction.remove.forEach((data) => {
         const anyData = data as any;
-        const dataId = anyData?.id;
+        const _dataId = anyData?.id;
         const id = this.getRowId(data, 0);
-        
-        const index = this.rowData.findIndex(r => this.getRowId(r, 0) === id);
+
+        const index = this.rowData.findIndex((r) => this.getRowId(r, 0) === id);
         if (index !== -1) {
-          const removedData = this.rowData.splice(index, 1)[0];
+          const _removedData = this.rowData.splice(index, 1)[0];
           dataChanged = true;
-          
+          // For removes, we mark the row as changed but it's being deleted
+          // The component will handle this appropriately
+
           const node = this.rowNodes.get(id);
           if (node) {
             this.rowNodes.delete(id);
@@ -426,22 +1120,26 @@ export class GridService<TData = any> {
       this.groupingDirty = true;
       this.applySorting();
       this.applyFiltering();
-      
+
       // Populate result.add after pipeline has run so we have the nodes
       if (transaction.add) {
-        transaction.add.forEach(data => {
+        transaction.add.forEach((data) => {
           const id = this.getRowId(data, 0);
           const node = this.rowNodes.get(id);
           if (node) result.add.push(node);
         });
       }
 
-      this.gridStateChanged$.next({ type: 'transactionApplied' });
+      // Emit transactionApplied with changed row indices for efficient rendering
+      this.gridStateChanged$.next({
+        type: 'transactionApplied',
+        changedRowIndices,
+      });
     }
 
     return result;
   }
-  
+
   private applySorting(): void {
     this.groupingDirty = true;
     if (this.sortModel.length === 0) {
@@ -479,8 +1177,8 @@ export class GridService<TData = any> {
       this.filteredRowData = [...this.rowData];
     } else {
       // Apply filters with AND logic
-      this.filteredRowData = this.rowData.filter(row => {
-        return Object.keys(this.filterModel).every(colId => {
+      this.filteredRowData = this.rowData.filter((row) => {
+        return Object.keys(this.filterModel).every((colId) => {
           const filterItem = this.filterModel[colId];
           if (!filterItem) return true;
 
@@ -502,7 +1200,7 @@ export class GridService<TData = any> {
     this.cumulativeRowHeights = [];
     let currentTotal = 0;
 
-    this.displayedRowNodes.forEach(node => {
+    this.displayedRowNodes.forEach((node) => {
       this.cumulativeRowHeights.push(currentTotal);
       const height = node.rowHeight || defaultHeight;
       currentTotal += height;
@@ -511,24 +1209,30 @@ export class GridService<TData = any> {
     this.totalHeight = currentTotal;
   }
 
-  private getRowY(index: number): number {
-    if (index < 0 || index >= this.cumulativeRowHeights.length) return 0;
+  /**
+   * Get the Y position for a row index
+   */
+  getRowY(index: number): number {
+    if (index <= 0) return 0;
+    if (index >= this.cumulativeRowHeights.length) return this.totalHeight;
     return this.cumulativeRowHeights[index];
   }
 
   private getRowAtY(y: number): number {
     if (this.cumulativeRowHeights.length === 0) return 0;
-    
+
     // Binary search for the row at position y
     let low = 0;
     let high = this.cumulativeRowHeights.length - 1;
-    
+
     while (low <= high) {
       const mid = Math.floor((low + high) / 2);
       const rowY = this.cumulativeRowHeights[mid];
-      const nextRowY = mid < this.cumulativeRowHeights.length - 1 ? 
-                       this.cumulativeRowHeights[mid + 1] : this.totalHeight;
-      
+      const nextRowY =
+        mid < this.cumulativeRowHeights.length - 1
+          ? this.cumulativeRowHeights[mid + 1]
+          : this.totalHeight;
+
       if (y >= rowY && y < nextRowY) {
         return mid;
       } else if (y < rowY) {
@@ -537,7 +1241,7 @@ export class GridService<TData = any> {
         low = mid + 1;
       }
     }
-    
+
     return low >= this.cumulativeRowHeights.length ? this.cumulativeRowHeights.length - 1 : low;
   }
 
@@ -547,9 +1251,9 @@ export class GridService<TData = any> {
 
   private getGroupColumns(): string[] {
     if (!this.columnDefs) return [];
-    
+
     const groupCols: string[] = [];
-    this.columnDefs.forEach(def => {
+    this.columnDefs.forEach((def) => {
       if ('rowGroup' in def && def.rowGroup === true && def.field) {
         groupCols.push(def.field as string);
       }
@@ -559,9 +1263,9 @@ export class GridService<TData = any> {
 
   private getPivotColumns(): string[] {
     if (!this.columnDefs) return [];
-    
+
     const pivotCols: string[] = [];
-    this.columnDefs.forEach(def => {
+    this.columnDefs.forEach((def) => {
       if ('pivot' in def && def.pivot === true && def.field) {
         pivotCols.push(def.field as string);
       }
@@ -571,9 +1275,9 @@ export class GridService<TData = any> {
 
   private getValueColumns(): ColDef<TData>[] {
     if (!this.columnDefs) return [];
-    
+
     const valueCols: ColDef<TData>[] = [];
-    this.columnDefs.forEach(def => {
+    this.columnDefs.forEach((def) => {
       if (!('children' in def) && def.aggFunc && def.field) {
         valueCols.push(def);
       }
@@ -584,7 +1288,7 @@ export class GridService<TData = any> {
   private generatePivotColumnDefs(): void {
     const pivotColumns = this.getPivotColumns();
     const valueColumns = this.getValueColumns();
-    
+
     if (pivotColumns.length === 0 || valueColumns.length === 0) {
       this.pivotColumnDefs = null;
       return;
@@ -592,8 +1296,8 @@ export class GridService<TData = any> {
 
     // 1. Find all unique pivot keys
     const pivotKeys = new Set<string>();
-    this.filteredRowData.forEach(row => {
-      const key = pivotColumns.map(col => (row as any)[col]).join('_');
+    this.filteredRowData.forEach((row) => {
+      const key = pivotColumns.map((col) => (row as any)[col]).join('_');
       pivotKeys.add(key);
     });
 
@@ -602,8 +1306,8 @@ export class GridService<TData = any> {
     // 2. Generate column groups for each pivot key
     const newPivotColDefs: (ColDef<TData> | ColGroupDef<TData>)[] = [];
 
-    sortedPivotKeys.forEach(pivotKey => {
-      const children: ColDef<TData>[] = valueColumns.map(valCol => {
+    sortedPivotKeys.forEach((pivotKey) => {
+      const children: ColDef<TData>[] = valueColumns.map((valCol) => {
         const valueName = valCol.headerName || String(valCol.field);
         return {
           ...valCol,
@@ -612,13 +1316,13 @@ export class GridService<TData = any> {
           // We use a custom field accessor for pivoted data
           field: `pivotData.${pivotKey}.${String(valCol.field)}` as any,
           pivot: false, // These are the results, not the pivot sources
-          rowGroup: false
+          rowGroup: false,
         };
       });
 
       newPivotColDefs.push({
         headerName: pivotKey,
-        children: children
+        children: children,
       });
     });
 
@@ -627,7 +1331,7 @@ export class GridService<TData = any> {
 
   private applyGrouping(): void {
     const groupColumns = this.getGroupColumns();
-    
+
     if (this.isPivotMode) {
       this.generatePivotColumnDefs();
       // If we have pivot columns but weren't grouping, we need to initialize them
@@ -645,28 +1349,54 @@ export class GridService<TData = any> {
     // Only re-group if filters or data changed
     if (this.groupingDirty || !this.cachedGroupedData) {
       this.cachedGroupedData = this.groupByColumns(this.filteredRowData, groupColumns, 0);
-      
+
       if (this.isPivotMode) {
-        // Already called above, but we do it again after grouping to be sure 
+        // Already called above, but we do it again after grouping to be sure
         // (though in Pivot Mode we usually want grouping)
         this.generatePivotColumnDefs();
         this.initializeColumns(); // Re-initialize with new pivot columns
         this.gridStateChanged$.next({ type: 'columnsChanged' });
       }
-      
+
       this.groupingDirty = false;
+
+      // Apply default expansion only on structural/data changes
+      const defaultExpanded = this.gridOptions?.groupDefaultExpanded ?? 0;
+      if (defaultExpanded !== 0) {
+        this.applyDefaultExpansion(this.cachedGroupedData, 0, defaultExpanded);
+      }
     }
 
-    // Re-initialize from cache (respects current expansion state)
-    this.updateExpansionStateInCache(this.cachedGroupedData);
+    // Re-initialize from cache (respects current expansion state in this.expandedGroups)
+    this.syncExpansionStateFromSet(this.cachedGroupedData);
     this.initializeRowNodesFromGroupedData();
   }
 
-  private updateExpansionStateInCache(groupedData: (TData | GroupRowNode<TData>)[]): void {
+  private applyDefaultExpansion(
+    groupedData: (TData | GroupRowNode<TData>)[],
+    level: number,
+    defaultExpanded: number
+  ): void {
+    const isDefaultExpanded = defaultExpanded === -1 || level < defaultExpanded;
+    if (!isDefaultExpanded) return;
+
+    for (const item of groupedData) {
+      if (this.isGroupRowNode(item)) {
+        this.expandedGroups.add(item.id);
+        if (item.children) {
+          this.applyDefaultExpansion(item.children, level + 1, defaultExpanded);
+        }
+      }
+    }
+  }
+
+  private syncExpansionStateFromSet(groupedData: (TData | GroupRowNode<TData>)[]): void {
     for (const item of groupedData) {
       if (this.isGroupRowNode(item)) {
         item.expanded = this.expandedGroups.has(item.id);
-        this.updateExpansionStateInCache(item.children);
+        if (item.children) {
+          this.syncExpansionStateFromSet(item.children);
+        }
       }
     }
   }
@@ -687,7 +1417,7 @@ export class GridService<TData = any> {
           children: data,
           expanded: true,
           aggregation: this.calculateAggregations(data, 'Summary'),
-          pivotData: this.calculatePivotData(data)
+          pivotData: this.calculatePivotData(data),
         };
         return [rootGroup];
       }
@@ -698,19 +1428,19 @@ export class GridService<TData = any> {
     const groups = new Map<any, TData[]>();
 
     // Group data by the current field
-    data.forEach(item => {
+    data.forEach((item) => {
       const key = (item as any)[groupField];
       if (!groups.has(key)) {
         groups.set(key, []);
       }
-      groups.get(key)!.push(item);
+      groups.get(key)?.push(item);
     });
 
     // Create group nodes
     const result: (TData | GroupRowNode<TData>)[] = [];
     groups.forEach((items, key) => {
       const children = this.groupByColumns(items, groupColumns, level + 1);
-      
+
       const groupNode: GroupRowNode<TData> = {
         id: `group-${groupField}-${key}-${level}`,
         groupKey: key,
@@ -719,16 +1449,16 @@ export class GridService<TData = any> {
         children,
         expanded: this.expandedGroups.has(`group-${groupField}-${key}-${level}`),
         aggregation: this.calculateAggregations(items, groupField),
-        pivotData: this.isPivotMode ? this.calculatePivotData(items) : undefined
+        pivotData: this.isPivotMode ? this.calculatePivotData(items) : undefined,
       };
-      
+
       result.push(groupNode);
     });
 
     return result;
   }
 
-  private calculateAggregations(data: TData[], groupField: string): { [field: string]: any } {
+  private calculateAggregations(data: TData[], _groupField: string): { [field: string]: any } {
     return this.calculateColumnAggregations(data);
   }
 
@@ -737,12 +1467,12 @@ export class GridService<TData = any> {
     const pivotGroups = new Map<string, TData[]>();
 
     // Sub-group by pivot columns within this row group
-    data.forEach(item => {
-      const key = pivotColumns.map(col => (item as any)[col]).join('_');
+    data.forEach((item) => {
+      const key = pivotColumns.map((col) => (item as any)[col]).join('_');
       if (!pivotGroups.has(key)) {
         pivotGroups.set(key, []);
       }
-      pivotGroups.get(key)!.push(item);
+      pivotGroups.get(key)?.push(item);
     });
 
     const pivotData: { [pivotKey: string]: { [field: string]: any } } = {};
@@ -755,18 +1485,20 @@ export class GridService<TData = any> {
 
   public calculateColumnAggregations(data: TData[]): { [field: string]: any } {
     const aggregations: { [field: string]: any } = {};
-    
+
     if (!this.columnDefs) return aggregations;
 
-    this.columnDefs.forEach(def => {
+    this.columnDefs.forEach((def) => {
       // Skip column groups
       if ('children' in def) return;
-      
+
       if (!def.field || !def.aggFunc) return;
-      
+
       const field = def.field as string;
-      const values = data.map(item => (item as any)[field]).filter(v => v !== null && v !== undefined);
-      
+      const values = data
+        .map((item) => (item as any)[field])
+        .filter((v) => v !== null && v !== undefined);
+
       if (values.length === 0) return;
 
       if (typeof def.aggFunc === 'function') {
@@ -779,13 +1511,14 @@ export class GridService<TData = any> {
             aggregations[field] = values.reduce((sum, v) => sum + (Number(v) || 0), 0);
             break;
           case 'avg':
-            aggregations[field] = values.reduce((sum, v) => sum + (Number(v) || 0), 0) / values.length;
+            aggregations[field] =
+              values.reduce((sum, v) => sum + (Number(v) || 0), 0) / values.length;
             break;
           case 'min':
-            aggregations[field] = Math.min(...values.map(v => Number(v) || 0));
+            aggregations[field] = Math.min(...values.map((v) => Number(v) || 0));
             break;
           case 'max':
-            aggregations[field] = Math.max(...values.map(v => Number(v) || 0));
+            aggregations[field] = Math.max(...values.map((v) => Number(v) || 0));
             break;
           case 'count':
             aggregations[field] = values.length;
@@ -803,7 +1536,7 @@ export class GridService<TData = any> {
     // DO NOT CLEAR this.rowNodes - reuse existing nodes to preserve state
     this.displayedRowNodes = [];
     const flattened = this.flattenGroupedDataWithLevel(this.cachedGroupedData || []);
-    
+
     flattened.forEach((entry, index) => {
       const { item, level } = entry;
       let id: string;
@@ -815,11 +1548,11 @@ export class GridService<TData = any> {
         // Group node
         id = item.id;
         // Re-use aggregation data from the group node
-        data = { 
+        data = {
           ...item.aggregation,
           pivotData: item.pivotData,
           [item.groupField]: item.groupKey,
-          'ag-Grid-AutoColumn': item.groupKey 
+          'ag-Grid-AutoColumn': item.groupKey,
         } as TData;
         isGroup = true;
         expanded = item.expanded;
@@ -856,11 +1589,30 @@ export class GridService<TData = any> {
           firstChild: index === 0,
           lastChild: index === flattened.length - 1,
           rowIndex: index,
-          displayedRowIndex: index
+          displayedRowIndex: index,
+          setSelected: (selected: boolean, clearSelection: boolean = false) => {
+            const changed = node.selected !== selected || clearSelection;
+            if (!changed) return;
+
+            if (clearSelection) {
+              this.rowNodes.forEach((n) => {
+                n.selected = false;
+              });
+              this.selectedRows.clear();
+            }
+
+            node.selected = selected;
+            if (selected) {
+              this.selectedRows.add(node.id!);
+            } else {
+              this.selectedRows.delete(node.id!);
+            }
+            this.gridStateChanged$.next({ type: 'selectionChanged' });
+          },
         };
         this.rowNodes.set(id, node);
       }
-      
+
       this.displayedRowNodes.push(node);
     });
 
@@ -874,11 +1626,11 @@ export class GridService<TData = any> {
   private flattenGroupedDataWithLevel(
     groupedData: (TData | GroupRowNode<TData>)[],
     level: number = 0,
-    result: { item: TData | GroupRowNode<TData>, level: number }[] = []
-  ): { item: TData | GroupRowNode<TData>, level: number }[] {
+    result: { item: TData | GroupRowNode<TData>; level: number }[] = []
+  ): { item: TData | GroupRowNode<TData>; level: number }[] {
     for (const item of groupedData) {
       result.push({ item, level });
-      
+
       if (this.isGroupRowNode(item)) {
         if (item.expanded) {
           this.flattenGroupedDataWithLevel(item.children, level + 1, result);
@@ -904,11 +1656,43 @@ export class GridService<TData = any> {
         return this.matchesDateFilter(String(value), type, filter, filterTo);
       case 'boolean':
         return this.matchesBooleanFilter(value, filter);
+      case 'set':
+        return this.matchesSetFilter(value, filterItem);
       default:
         return true;
     }
   }
 
+  private matchesSetFilter(value: any, filterItem: FilterModelItem): boolean {
+    // Set filter: value must be in the selected values array
+    const filterValues = filterItem.values;
+    if (!Array.isArray(filterValues) || filterValues.length === 0) {
+      return true; // No filter applied
+    }
+    return filterValues.includes(value);
+  }
+
+  /**
+   * Get unique values for a column (for Set Filter)
+   */
+  getUniqueValues(field: string): any[] {
+    const values = new Set<any>();
+
+    this.rowData.forEach((data) => {
+      const value = (data as any)[field];
+      if (value !== null && value !== undefined) {
+        values.add(value);
+      }
+    });
+
+    return Array.from(values).sort((a, b) => {
+      if (typeof a === 'string' && typeof b === 'string') {
+        return a.localeCompare(b);
+      }
+      return String(a).localeCompare(String(b));
+    });
+  }
+
   private matchesTextFilter(value: string, type: string | undefined, filter: any): boolean {
     if (!type || filter === null || filter === undefined) {
       return true;
@@ -935,8 +1719,13 @@ export class GridService<TData = any> {
     }
   }
 
-  private matchesNumberFilter(value: number, type: string | undefined, filter: any, filterTo?: any): boolean {
-    if (type === undefined || filter === null || filter === undefined || isNaN(value)) {
+  private matchesNumberFilter(
+    value: number,
+    type: string | undefined,
+    filter: any,
+    filterTo?: any
+  ): boolean {
+    if (type === undefined || filter === null || filter === undefined || Number.isNaN(value)) {
       return true;
     }
 
@@ -955,15 +1744,21 @@ export class GridService<TData = any> {
         return value < filterNum;
       case 'lessThanOrEqual':
         return value <= filterNum;
-      case 'inRange':
+      case 'inRange': {
         const filterToNum = Number(filterTo);
         return value >= filterNum && value <= filterToNum;
+      }
       default:
         return true;
     }
   }
 
-  private matchesDateFilter(value: string, type: string | undefined, filter: any, filterTo?: any): boolean {
+  private matchesDateFilter(
+    value: string,
+    type: string | undefined,
+    filter: any,
+    filterTo?: any
+  ): boolean {
     if (!type || !filter) {
       return true;
     }
@@ -1005,16 +1800,16 @@ export class GridService<TData = any> {
     this.groupingDirty = true;
     // DO NOT CLEAR this.rowNodes - reuse existing nodes
     this.displayedRowNodes = [];
-    
+
     // Separate rows by pinned state
     const pinnedTopRows: TData[] = [];
     const pinnedBottomRows: TData[] = [];
     const normalRows: TData[] = [];
-    
-    this.filteredRowData.forEach(data => {
+
+    this.filteredRowData.forEach((data) => {
       const anyData = data as any;
       const pinned = anyData?.pinned;
-      
+
       if (pinned === 'top') {
         pinnedTopRows.push(data);
       } else if (pinned === 'bottom') {
@@ -1023,15 +1818,16 @@ export class GridService<TData = any> {
         normalRows.push(data);
       }
     });
-    
+
     const orderedRows = [...pinnedTopRows, ...normalRows, ...pinnedBottomRows];
 
     orderedRows.forEach((data, index) => {
       const id = this.getRowId(data, index);
       const anyData = data as any;
       const rowPinned = anyData?.pinned || false;
-      const isMaster = this.gridOptions?.masterDetail && 
-                      (this.gridOptions.isRowMaster ? this.gridOptions.isRowMaster(data) : true);
+      const isMaster =
+        this.gridOptions?.masterDetail &&
+        (this.gridOptions.isRowMaster ? this.gridOptions.isRowMaster(data) : true);
 
       let node = this.rowNodes.get(id);
       if (node) {
@@ -1058,11 +1854,30 @@ export class GridService<TData = any> {
           firstChild: index === 0,
           lastChild: index === orderedRows.length - 1,
           rowIndex: index,
-          displayedRowIndex: this.displayedRowNodes.length
+          displayedRowIndex: this.displayedRowNodes.length,
+          setSelected: (selected: boolean, clearSelection: boolean = false) => {
+            const changed = node.selected !== selected || clearSelection;
+            if (!changed) return;
+
+            if (clearSelection) {
+              this.rowNodes.forEach((n) => {
+                n.selected = false;
+              });
+              this.selectedRows.clear();
+            }
+
+            node.selected = selected;
+            if (selected) {
+              this.selectedRows.add(node.id!);
+            } else {
+              this.selectedRows.delete(node.id!);
+            }
+            this.gridStateChanged$.next({ type: 'selectionChanged' });
+          },
         };
         this.rowNodes.set(id!, node);
       }
-      
+
       this.displayedRowNodes.push(node);
 
       // If master row is expanded, insert a detail node
@@ -1085,7 +1900,11 @@ export class GridService<TData = any> {
             firstChild: false,
             lastChild: false,
             rowIndex: null,
-            displayedRowIndex: this.displayedRowNodes.length
+            displayedRowIndex: this.displayedRowNodes.length,
+            setSelected: (selected: boolean) => {
+              detailNode!.selected = selected;
+              this.gridStateChanged$.next({ type: 'selectionChanged' });
+            },
           };
           this.rowNodes.set(detailId, detailNode);
         } else {
@@ -1097,7 +1916,7 @@ export class GridService<TData = any> {
 
     this.updateRowHeightCache();
   }
-  
+
   private compareValues(a: any, b: any): number {
     if (a === b) return 0;
     if (a === null || a === undefined) return 1;
@@ -1107,10 +1926,10 @@ export class GridService<TData = any> {
     }
     return String(a).localeCompare(String(b));
   }
-  
+
   private getGridState(): GridState {
     const filterState: { [key: string]: FilterModelItem } = {};
-    Object.keys(this.filterModel).forEach(key => {
+    Object.keys(this.filterModel).forEach((key) => {
       const item = this.filterModel[key];
       if (item) {
         filterState[key] = item;
@@ -1119,24 +1938,24 @@ export class GridService<TData = any> {
 
     // Get pinned columns
     const allColumns = Array.from(this.columns.values());
-    const leftPinned = allColumns.filter(c => c.pinned === 'left').map(c => c.colId);
-    const rightPinned = allColumns.filter(c => c.pinned === 'right').map(c => c.colId);
+    const leftPinned = allColumns.filter((c) => c.pinned === 'left').map((c) => c.colId);
+    const rightPinned = allColumns.filter((c) => c.pinned === 'right').map((c) => c.colId);
 
     return {
       sort: { sortModel: [...this.sortModel] },
       filter: filterState,
       columnPinning: { left: leftPinned, right: rightPinned },
-      columnOrder: allColumns.map(col => ({
+      columnOrder: allColumns.map((col) => ({
         colId: col.colId,
         width: col.width,
         hide: !col.visible,
         pinned: col.pinned,
         sort: col.sort,
-        sortIndex: col.sortIndex
-      }))
+        sortIndex: col.sortIndex,
+      })),
     };
   }
-  
+
   private applyGridState(state: GridState): void {
     if (state.sort) {
       this.sortModel = state.sort.sortModel;
@@ -1146,7 +1965,7 @@ export class GridService<TData = any> {
       this.filterModel = state.filter;
     }
     if (state.columnOrder) {
-      state.columnOrder.forEach(colState => {
+      state.columnOrder.forEach((colState) => {
         const column = this.columns.get(colState.colId);
         if (column) {
           column.width = colState.width;
@@ -1158,42 +1977,42 @@ export class GridService<TData = any> {
       });
     }
   }
-  
-  private exportAsCsv(params?: CsvExportParams): void {
+
+  private exportAsCsv(params?: CsvExportParams, api?: any): void {
     const fileName = params?.fileName || 'export.csv';
     const delimiter = params?.delimiter || ',';
     const skipHeader = params?.skipHeader || false;
     const columnKeys = params?.columnKeys;
 
     // Get columns to export
-    let columnsToExport = this.getAllColumns().filter(col => col.visible);
+    let columnsToExport = this.getAllColumns().filter((col) => col.visible);
     if (columnKeys && columnKeys.length > 0) {
-      columnsToExport = columnsToExport.filter(col => columnKeys.includes(col.colId));
+      columnsToExport = columnsToExport.filter((col) => columnKeys.includes(col.colId));
     }
 
     // Build headers
-    const headers = columnsToExport.map(col => {
+    const headers = columnsToExport.map((col) => {
       const headerName = col.headerName || col.colId;
       // Escape quotes and wrap in quotes if contains delimiter
       if (headerName.includes(delimiter) || headerName.includes('"') || headerName.includes('\n')) {
-        return '"' + headerName.replace(/"/g, '""') + '"';
+        return `"${headerName.replace(/"/g, '""')}"`;
       }
       return headerName;
     });
 
     // Build rows
-    const rows = this.rowData.map(data => {
-      return columnsToExport.map(col => {
+    const rows = this.rowData.map((data) => {
+      return columnsToExport.map((col) => {
         const value = (data as any)[col.field!];
         let cellValue = '';
-        
+
         if (value !== null && value !== undefined) {
           cellValue = String(value);
         }
-        
+
         // Escape quotes and wrap in quotes if contains special chars
         if (cellValue.includes(delimiter) || cellValue.includes('"') || cellValue.includes('\n')) {
-          return '"' + cellValue.replace(/"/g, '""') + '"';
+          return `"${cellValue.replace(/"/g, '""')}"`;
         }
         return cellValue;
       });
@@ -1202,12 +2021,16 @@ export class GridService<TData = any> {
     // Build CSV content
     let csvContent = '';
     if (!skipHeader) {
-      csvContent += headers.join(delimiter) + '\n';
+      csvContent += `${headers.join(delimiter)}\n`;
     }
-    csvContent += rows.map(row => row.join(delimiter)).join('\n');
+    csvContent += rows.map((row) => row.join(delimiter)).join('\n');
 
     // Download CSV
-    this.downloadFile(csvContent, fileName, 'text/csv;charset=utf-8;');
+    if (api) {
+      api.downloadFile(csvContent, fileName, 'text/csv;charset=utf-8;');
+    } else {
+      this.downloadFile(csvContent, fileName, 'text/csv;charset=utf-8;');
+    }
   }
 
   private exportAsExcel(params?: ExcelExportParams): void {
@@ -1216,9 +2039,9 @@ export class GridService<TData = any> {
     const skipHeader = params?.skipHeader || false;
 
     // Get columns to export
-    let columnsToExport = this.getAllColumns().filter(col => col.visible);
+    let columnsToExport = this.getAllColumns().filter((col) => col.visible);
     if (params?.columnKeys && params.columnKeys.length > 0) {
-      columnsToExport = columnsToExport.filter(col => params.columnKeys!.includes(col.colId));
+      columnsToExport = columnsToExport.filter((col) => params.columnKeys?.includes(col.colId));
     }
 
     const workbook = new Workbook();
@@ -1226,18 +2049,18 @@ export class GridService<TData = any> {
 
     // Add headers
     if (!skipHeader) {
-      const headerRow = worksheet.addRow(columnsToExport.map(col => col.headerName || col.colId));
+      const headerRow = worksheet.addRow(columnsToExport.map((col) => col.headerName || col.colId));
       headerRow.font = { bold: true };
       headerRow.fill = {
         type: 'pattern',
         pattern: 'solid',
-        fgColor: { argb: 'FFF0F0F0' }
+        fgColor: { argb: 'FFF0F0F0' },
       };
     }
 
     // Add data
-    this.rowData.forEach(data => {
-      const rowValues = columnsToExport.map(col => {
+    this.rowData.forEach((data) => {
+      const rowValues = columnsToExport.map((col) => {
         const value = (data as any)[col.field!];
         return value !== null && value !== undefined ? value : '';
       });
@@ -1245,9 +2068,9 @@ export class GridService<TData = any> {
     });
 
     // Auto-fit columns (basic implementation)
-    worksheet.columns.forEach((column, i) => {
+    worksheet.columns.forEach((column, _i) => {
       let maxLength = 0;
-      column.eachCell!({ includeEmpty: true }, (cell) => {
+      column.eachCell?.({ includeEmpty: true }, (cell) => {
         const columnLength = cell.value ? cell.value.toString().length : 10;
         if (columnLength > maxLength) {
           maxLength = columnLength;
@@ -1257,8 +2080,10 @@ export class GridService<TData = any> {
     });
 
     // Generate buffer and download
-    workbook.xlsx.writeBuffer().then(buffer => {
-      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+    workbook.xlsx.writeBuffer().then((buffer) => {
+      const blob = new Blob([buffer], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      });
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
@@ -1267,11 +2092,11 @@ export class GridService<TData = any> {
       URL.revokeObjectURL(url);
     });
   }
-  
+
   private getAllColumns(): Column[] {
     return Array.from(this.columns.values());
   }
-  
+
   private downloadFile(content: string, fileName: string, mimeType: string): void {
     const blob = new Blob([content], { type: mimeType });
     const url = URL.createObjectURL(blob);
@@ -1281,4 +2106,148 @@ export class GridService<TData = any> {
     link.click();
     URL.revokeObjectURL(url);
   }
+
+  // ============================================================================
+  // STATE PERSISTENCE API
+  // ============================================================================
+
+  /**
+   * Get current grid state
+   * Includes: columns (order, size, visibility, pinning), filters, sort, grouping
+   */
+  getState(): GridState {
+    const columns = this.getAllColumns();
+
+    return {
+      columnOrder: columns.map((col) => ({
+        colId: col.colId,
+        width: col.width,
+        hide: !col.visible,
+        pinned: col.pinned,
+        sort: col.sort,
+        sortIndex: col.sortIndex,
+        aggFunc: col.aggFunc,
+      })),
+      filter: { ...this.filterModel },
+      sort: { sortModel: [...this.sortModel] },
+      rowGrouping: {
+        rowGroupCols: this.getGroupColumns(),
+        valueCols: [],
+        pivotCols: [],
+        isPivotMode: false,
+      },
+    };
+  }
+
+  /**
+   * Restore grid state
+   * Applies column state, filters, sort, and grouping
+   */
+  setState(state: GridState): void {
+    // Restore column state
+    if (state.columnOrder) {
+      const newColumnDefs: (ColDef<TData> | ColGroupDef<TData>)[] = [];
+
+      state.columnOrder.forEach((colState) => {
+        const colDef = this.columnDefs?.find((d) =>
+          'children' in d
+            ? false
+            : (d as ColDef<TData>).colId === colState.colId ||
+              (d as ColDef<TData>).field === colState.colId
+        );
+
+        if (colDef && !('children' in colDef)) {
+          newColumnDefs.push({
+            ...colDef,
+            width: colState.width,
+            hide: colState.hide,
+            pinned: colState.pinned || false,
+            sort: colState.sort,
+            sortIndex: colState.sortIndex,
+            rowGroup: colState.rowGroupIndex !== undefined,
+          });
+        }
+      });
+
+      if (newColumnDefs.length > 0) {
+        this.columnDefs = newColumnDefs;
+        this.initializeColumns();
+      }
+    }
+
+    // Restore filters
+    if (state.filter) {
+      this.filterModel = { ...state.filter };
+      this.applyFiltering();
+    }
+
+    // Restore sort
+    if (state.sort?.sortModel && state.sort.sortModel.length > 0) {
+      this.sortModel = [...state.sort.sortModel];
+      this.applyFiltering(); // This will trigger sorting
+    }
+
+    // Restore row grouping (handled through column state)
+    // Row grouping is applied when columns are restored with rowGroup: true
+
+    // Emit state change event
+    this.gridStateChanged$.next({ type: 'state-restored' });
+  }
+
+  /**
+   * Save grid state to LocalStorage
+   * @param key - Storage key (default: 'argent-grid-state')
+   */
+  saveState(key: string = 'argent-grid-state'): void {
+    try {
+      const state = this.getState();
+      localStorage.setItem(key, JSON.stringify(state));
+      this.gridStateChanged$.next({ type: 'state-saved', key });
+    } catch (error) {
+      console.warn('Failed to save grid state:', error);
+    }
+  }
+
+  /**
+   * Restore grid state from LocalStorage
+   * @param key - Storage key (default: 'argent-grid-state')
+   * @returns true if state was restored, false if no state found
+   */
+  restoreState(key: string = 'argent-grid-state'): boolean {
+    try {
+      const stateJson = localStorage.getItem(key);
+      if (!stateJson) {
+        return false;
+      }
+
+      const state: GridState = JSON.parse(stateJson);
+      this.setState(state);
+      this.gridStateChanged$.next({ type: 'state-restored', key });
+      return true;
+    } catch (error) {
+      console.warn('Failed to restore grid state:', error);
+      return false;
+    }
+  }
+
+  /**
+   * Clear grid state from LocalStorage
+   * @param key - Storage key (default: 'argent-grid-state')
+   */
+  clearState(key: string = 'argent-grid-state'): void {
+    try {
+      localStorage.removeItem(key);
+      this.gridStateChanged$.next({ type: 'state-cleared', key });
+    } catch (error) {
+      console.warn('Failed to clear grid state:', error);
+    }
+  }
+
+  /**
+   * Check if state exists in LocalStorage
+   * @param key - Storage key (default: 'argent-grid-state')
+   */
+  hasState(key: string = 'argent-grid-state'): boolean {
+    return localStorage.getItem(key) !== null;
+  }
 }