platformcommons-web-lib 1.0.0

package/src/lib/modules/smart-table/components/smart-table/smart-table.component.ts

@@ -0,0 +1,1118 @@
+import { Component, EventEmitter, Input, OnInit, Output, OnChanges, SimpleChanges, AfterViewInit, OnDestroy, ViewChildren, QueryList, ElementRef, ChangeDetectorRef, NgZone, inject, LOCALE_ID, HostListener } from '@angular/core';
+import { TableConfig, TableColumn, TableAction, TableFilter, TableDataChangeEvent, TableRowSaveEvent } from '../../models/table-config.model';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+import { formatDate } from '@angular/common';
+import { Router } from '@angular/router';
+import { catchError, finalize, map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { of, forkJoin, Subject } from 'rxjs';
+
+@Component({
+  selector: 'lib-smart-table',
+  templateUrl: './smart-table.component.html',
+  styleUrls: ['./smart-table.component.scss'],
+  standalone: false
+})
+export class SmartTableComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  @Input() config!: TableConfig;
+
+  /**
+   * External data mode: pass table rows directly from the parent.
+   * When this input is provided, the component will NOT make any internal API calls.
+   * Instead, it emits sortChange / pageChange / searchChange / filterChange events
+   * so the parent can fetch and supply updated data.
+   */
+  @Input() tableData?: any[];
+
+  /**
+   * Total number of items — used by the pagination component when operating in
+   * external-data mode. Must be kept in sync by the parent.
+   */
+  @Input() totalItemsCount?: number;
+
+  @Output() action = new EventEmitter<{ action: TableAction, row: any }>();
+  @Output() topAction = new EventEmitter<TableAction>(); // For top bar buttons
+  @Output() filterChange = new EventEmitter<{ key: string, value: any }>();
+  @Output() rowSelect = new EventEmitter<any[]>();
+  @Output() columnClick = new EventEmitter<{ row: any, column: string }>();
+
+  /**
+   * Pre-selected row objects. These are tracked across pages.
+   * Matching incoming data rows (via rowIdField) will be checked automatically.
+   */
+  @Input() selectedRows: any[] = [];
+
+  /** Emitted in external-data mode when the user changes the sort column/direction. */
+  @Output() sortChange = new EventEmitter<TableDataChangeEvent>();
+  /** Emitted in external-data mode when the user changes the page or page size. */
+  @Output() pageChange = new EventEmitter<TableDataChangeEvent>();
+  /** Emitted in external-data mode when the user types in the search box. */
+  @Output() searchChange = new EventEmitter<TableDataChangeEvent>();
+  /** Emitted when an inline-edited or inline-added row is saved. */
+  @Output() rowSave = new EventEmitter<TableRowSaveEvent>();
+
+  data: any[] = [];
+  totalItems: number = 0;
+  currentPage: number = 1;
+  loading: boolean = false;
+  originalRowsCache = new Map<any, any>();
+  
+  // State
+  activeSort: { key: string, direction: 'ASC' | 'DESC' } = { key: '', direction: 'ASC' };
+  private isSortActive: boolean = false; // true only when orderBy is explicitly configured or user has sorted
+  activeFilters: { [key: string]: any } = {};
+  searchTerm: string = '';
+  stickyColumnStyles: { [key: string]: any } = {};
+  hasStickyColumns: boolean = false;
+  openDropdownId: string | null = null;
+  /** Viewport-relative position used to render the dropdown as position:fixed. */
+  dropdownPosition: { top: number; right: number } = { top: 0, right: 0 };
+  /** Items and row for the currently open dropdown — rendered in a portal outside the table. */
+  activeDropdownItems: any[] | null = null;
+  activeDropdownRow: any = null;
+
+  // --- Filter dropdown state ---
+  openFilterKey: string | null = null;
+  activeFilterLabels: { [key: string]: string } = {};
+  /** Viewport-relative position used to render the filter panel as position:fixed. */
+  filterPosition: { top: number; left: number } = { top: 0, left: 0 };
+  /** The filter config for the currently open filter panel. */
+  activeFilterData: any | null = null;
+
+  // --- Delete confirmation modal state ---
+  deleteModalOpen = false;
+  deleteModalConfig: any = {};
+  private pendingDeleteAction: { item: any; row: any } | null = null;
+
+  searchSubject = new Subject<string>();
+
+  @ViewChildren('stickyHeader') stickyHeaders!: QueryList<ElementRef>;
+  private resizeObserver: ResizeObserver | null = null;
+  private locale = inject(LOCALE_ID);
+
+  constructor(
+      private http: HttpClient, 
+      private router: Router,
+      private cdr: ChangeDetectorRef,
+      private ngZone: NgZone
+  ) { 
+      // Debounce search input
+      this.searchSubject.pipe(
+          debounceTime(this.config?.searchConfig?.debounceTime || 300),
+          distinctUntilChanged()
+      ).subscribe(term => {
+          this.searchTerm = term;
+          this.currentPage = 1;
+          if (this.tableData !== undefined) {
+              // External-data mode: delegate to parent via event
+              this.searchChange.emit(this.buildChangeEvent());
+          } else {
+              this.loadData();
+          }
+      });
+  }
+
+  ngOnInit(): void {
+    if (this.config) {
+      this.applyPaginationDefaults();
+      if (this.config.sortBy) {
+        this.activeSort.key = this.config.sortBy;
+      }
+      if (this.config.orderBy) {
+        this.activeSort.direction = this.config.orderBy;
+        this.isSortActive = true;
+      }
+      this.loadFilterOptions();
+
+      if (this.tableData !== undefined) {
+        // External-data mode: sync incoming data, skip internal API call
+        this.data = this.tableData;
+        if (this.totalItemsCount !== undefined) {
+          this.totalItems = this.totalItemsCount;
+        }
+      } else {
+        this.loadData();
+      }
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+      // External data changed — sync directly without an API call
+      if (changes['tableData']) {
+          this.data = this.tableData || [];
+      }
+      // Total count updated from parent
+      if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
+          this.totalItems = this.totalItemsCount;
+      }
+      // Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
+      if (changes['config'] && !changes['config'].firstChange) {
+          this.applyPaginationDefaults();
+          this.loadFilterOptions();
+          if (this.tableData === undefined) {
+              this.loadData();
+          }
+          setTimeout(() => this.calculateStickyPositions());
+      }
+      if (changes['selectedRows']) {
+          this.syncSelection();
+      }
+  }
+
+  ngAfterViewInit(): void {
+      this.setupResizeObserver();
+  }
+
+  ngOnDestroy(): void {
+      if (this.resizeObserver) {
+          this.resizeObserver.disconnect();
+      }
+  }
+
+  private setupResizeObserver(): void {
+      if (this.resizeObserver) {
+          this.resizeObserver.disconnect();
+      }
+      
+      this.resizeObserver = new ResizeObserver(() => {
+          this.ngZone.run(() => {
+              this.calculateStickyPositions();
+          });
+      });
+
+      if (this.stickyHeaders) {
+          this.stickyHeaders.changes.subscribe(() => {
+              this.observeHeaders();
+              // Also recalculate immediately
+              setTimeout(() => this.calculateStickyPositions());
+          });
+          this.observeHeaders();
+      }
+  }
+
+  private observeHeaders(): void {
+      if (!this.resizeObserver || !this.stickyHeaders) return;
+      this.stickyHeaders.forEach(header => {
+          this.resizeObserver!.observe(header.nativeElement);
+      });
+  }
+  
+  loadData(): void {
+    if (!this.config?.apiUrl) return;
+    
+    this.loading = true;
+    let params: HttpParams;
+
+    // --- Query Params Construction ---
+    if (this.config.queryParamsConfig) {
+      const qpConfig = this.config.queryParamsConfig;
+      const pageKey = qpConfig.pageKey || 'page';
+      const sizeKey = qpConfig.sizeKey || 'pageSize';
+      const pageIndex = this.currentPage + (qpConfig.pageIndexOffset || 0);
+
+      let paramsObj: any = {
+        [pageKey]: pageIndex.toString(),
+        [sizeKey]: (this.config.pagination?.pageSize || 10).toString()
+      };
+
+      if (this.activeSort.key) paramsObj['sortBy'] = this.activeSort.key;
+      // Only include orderBy if explicitly configured or user has sorted a column
+      if (this.isSortActive && this.activeSort.direction) paramsObj['orderBy'] = this.activeSort.direction;
+      
+      // Search Handling
+      if (this.searchTerm) {
+          const searchConfig = this.config.searchConfig;
+          const searchKey = searchConfig?.searchKey || 'search';
+          
+          if (searchConfig?.handling === 'nested_string' && qpConfig.nestedStringConfig) {
+             // Will be handled in nested string construction below
+          } else {
+             paramsObj[searchKey] = this.searchTerm;
+          }
+      }
+
+      // Filter Handling (and Search if nested)
+      if (qpConfig.filterHandling === 'nested_string' && qpConfig.nestedStringConfig) {
+        const { paramName, baseValue, separator, assignment } = qpConfig.nestedStringConfig;
+        let nestedString = baseValue || '';
+        const assign = assignment || '=';
+
+        // Add Filters
+        Object.keys(this.activeFilters).forEach(key => {
+          if (this.activeFilters[key]) {
+            const prefix = nestedString ? separator : '';
+            nestedString += `${prefix}${key}${assign}${this.activeFilters[key]}`;
+          }
+        });
+        
+        // Add Search if nested
+        if (this.searchTerm && this.config.searchConfig?.handling === 'nested_string') {
+             const searchKey = this.config.searchConfig.searchKey || 'SEARCH_TERM';
+             const prefix = nestedString ? separator : '';
+             nestedString += `${prefix}${searchKey}${assign}${this.searchTerm}`;
+        }
+
+        paramsObj[paramName] = nestedString;
+      } else {
+        // Standard handling
+        Object.keys(this.activeFilters).forEach(key => {
+          if (this.activeFilters[key]) paramsObj[key] = this.activeFilters[key];
+        });
+      }
+      params = new HttpParams({ fromObject: paramsObj });
+
+    } else {
+      // --- Default Behavior (Backward Compatibility) ---
+      let paramsObj: any = {};
+      
+      if (this.config.pagination?.enabled) {
+        paramsObj['page'] = this.currentPage;
+        paramsObj['pageSize'] = this.config.pagination.pageSize;
+      }
+
+      if (this.activeSort.key) {
+        paramsObj['sortBy'] = this.activeSort.key;
+        // Only include orderBy if explicitly configured or user has sorted a column
+        if (this.isSortActive) paramsObj['orderBy'] = this.activeSort.direction;
+      }
+
+      if (this.searchTerm) {
+        const searchKey = this.config.searchConfig?.searchKey || 'search';
+        paramsObj[searchKey] = this.searchTerm;
+      }
+
+      Object.keys(this.activeFilters).forEach(key => {
+          if (this.activeFilters[key]) {
+               paramsObj[key] = this.activeFilters[key];
+          }
+      });
+
+      // Custom Request Params Mapper (if provided)
+      if (this.config.requestParams) {
+         const customParams = this.config.requestParams(
+             this.currentPage, 
+             this.config.pagination?.pageSize || 10, 
+             this.activeSort.key, 
+             this.activeSort.direction, 
+             this.searchTerm, 
+             this.activeFilters
+         );
+         if (customParams instanceof HttpParams) {
+             // If function returns HttpParams, use it directly (caveat: might lose previous params if not careful in mapper)
+             params = customParams;
+         } else {
+             paramsObj = { ...paramsObj, ...customParams };
+             params = new HttpParams({ fromObject: paramsObj });
+         }
+      } else {
+         params = new HttpParams({ fromObject: paramsObj });
+      }
+    }
+
+    // --- Data Fetching ---
+    
+    // Check for separate count API
+    const totalCountConfig = this.config.pagination?.totalCountConfig;
+    let request$: any; // Observable
+
+    if (totalCountConfig?.source === 'separate' && totalCountConfig.apiUrl) {
+         const headers = this.getHeaders();
+         const method = this.config.apiMethod || 'GET';
+         const body = this.config.apiPayload || {};
+
+         const dataRequest$ = method === 'POST' ? this.http.post<any>(this.config.apiUrl, body, { params, headers }) : this.http.get<any>(this.config.apiUrl, { params, headers });
+         const countRequest$ = method === 'POST' ? this.http.post<any>(totalCountConfig.apiUrl, body, { params, headers }) : this.http.get<any>(totalCountConfig.apiUrl, { params, headers });
+
+         request$ = forkJoin({
+            data: dataRequest$,
+            count: countRequest$
+        }).pipe(
+            map(({ data, count }) => {
+                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
+                return {
+                    data: this.getValueByPath(data, dataPath),
+                    total: this.getValueByPath(count, totalCountConfig.responsePath || '')
+                };
+            })
+        );
+    } else {
+    
+    const headers = this.getHeaders();
+    const method = this.config.apiMethod || 'GET';
+    const body = this.config.apiPayload || {};
+    
+    const baseRequest$ = method === 'POST' ? this.http.post<any>(this.config.apiUrl, body, { params, headers }) : this.http.get<any>(this.config.apiUrl, { params, headers });
+
+    request$ = baseRequest$.pipe(
+        map(response => {
+                const dataPath = this.config.dataResponsePath !== undefined ? this.config.dataResponsePath : '';
+                const totalPath = totalCountConfig?.responsePath || '';
+                return {
+                    data: this.getValueByPath(response, dataPath),
+                    // If source is 'same', try to get total from response, else default 0
+                    total: totalCountConfig ? this.getValueByPath(response, totalPath) : 0
+                };
+            })
+        );
+    }
+
+    request$.pipe(
+        finalize(() => this.loading = false),
+        catchError(err => {
+          console.error('Table Data Fetch Error', err);
+          return of({ data: [], total: 0 }); 
+        })
+      )
+      .subscribe((result: any) => {
+          this.data = result.data || [];
+          if (this.config.pagination) {
+               this.totalItems = result.total || 0;
+          }
+          if (!this.config.columns || this.config.columns.length === 0) {
+                    if (this.data && this.data.length > 0) {
+                        this.config.columns = Object.keys(this.data[0]).map(key => ({
+                            key: key,
+                            label: this.toTitleCase(key),
+                            type: 'text',
+                            sortable: false,
+                            editable: false
+                        }));
+                    }
+                }
+          this.syncSelection();
+      });
+  }
+
+  /**
+   * Syncs the locally loaded data set with the externally provided selectedRows.
+   * Marks 'selected' property on row objects to reflect checkbox state.
+   */
+  private syncSelection(): void {
+    if (!this.data || !this.data.length || !this.config) return;
+
+    const idField = (this.config as any).rowIdField || 'id';
+    const selectedIds = new Set((this.selectedRows || []).map(r => r[idField]));
+
+    this.data.forEach(row => {
+      row.selected = selectedIds.has(row[idField]);
+    });
+  }
+
+  // --- Actions ---
+
+  onPageChange(page: number): void {
+    this.currentPage = page;
+    if (this.tableData !== undefined) {
+      this.pageChange.emit(this.buildChangeEvent());
+    } else {
+      this.loadData();
+    }
+  }
+
+  onPageSizeChange(size: number): void {
+    if (this.config.pagination) {
+        this.config.pagination.pageSize = size;
+        this.currentPage = 1; // Reset to first page
+        if (this.tableData !== undefined) {
+            this.pageChange.emit(this.buildChangeEvent());
+        } else {
+            this.loadData();
+        }
+    }
+  }
+
+  onSort(col: TableColumn): void {
+    if (!col.sortable) return;
+
+    if (this.activeSort.key === col.key) {
+      this.activeSort.direction = this.activeSort.direction === 'ASC' ? 'DESC' : 'ASC';
+    } else {
+      this.activeSort.key = col.key;
+      this.activeSort.direction = 'ASC';
+    }
+    this.isSortActive = true; // User has actively sorted, include orderBy in API call
+
+    if (this.tableData !== undefined) {
+      // External-data mode: let the parent handle the API call
+      this.sortChange.emit(this.buildChangeEvent());
+    } else {
+      this.loadData();
+    }
+  }
+
+  onSearch(event: Event): void {
+     const value = (event.target as HTMLInputElement).value;
+     this.searchSubject.next(value);
+  }
+
+  onFilterChange(key: string, event: Event): void {
+      const value = (event.target as HTMLSelectElement).value;
+      this.applyFilter(key, value);
+  }
+
+  private applyFilter(key: string, value: any): void {
+      this.activeFilters[key] = value;
+      this.currentPage = 1;
+      this.filterChange.emit({ key, value });
+      if (this.tableData === undefined) {
+          this.loadData();
+      }
+  }
+
+  toggleFilter(key: string, event: Event): void {
+      event.stopPropagation();
+      if (this.openFilterKey === key) {
+          this.openFilterKey = null;
+          this.activeFilterData = null;
+          return;
+      }
+      const trigger = event.currentTarget as HTMLElement;
+      const rect = trigger.getBoundingClientRect();
+      this.filterPosition = { top: rect.bottom + 6, left: rect.left };
+      this.openFilterKey = key;
+      this.activeFilterData = this.config.filters?.find(f => f.key === key) || null;
+  }
+
+  selectFilterOption(filter: any, opt: { label: string; value: any } | null): void {
+      const value = opt ? opt.value : '';
+      this.activeFilterLabels[filter.key] = opt ? opt.label : '';
+      this.applyFilter(filter.key, value);
+      this.openFilterKey = null;
+  }
+
+  getFilterDisplay(filter: any): string {
+      return this.activeFilterLabels[filter.key] || filter.label;
+  }
+
+  getValidFilterOptions(filter: any): any[] {
+      return (filter?.options || []).filter((opt: any) => opt.label != null && opt.label !== '');
+  }
+
+  isFilterActive(filter: any): boolean {
+      return !!this.activeFilterLabels[filter.key];
+  }
+
+  // --- Private helpers ---
+
+  /**
+   * Assembles the current table state into a `TableDataChangeEvent` object.
+   * Emitted to the parent in external-data mode so it can fetch and supply new data.
+   */
+  private buildChangeEvent(): TableDataChangeEvent {
+      return {
+          page: this.currentPage,
+          pageSize: this.config.pagination?.pageSize || 10,
+          sortBy: this.activeSort.key || undefined,
+          orderBy: this.isSortActive ? this.activeSort.direction : undefined,
+          searchTerm: this.searchTerm || undefined,
+          filters: { ...this.activeFilters }
+      };
+  }
+  
+  onAction(action: TableAction, row: any): void {
+      if (action.type === 'edit-row' as any) {
+          const idField = (this.config as any).rowIdField || 'id';
+          this.originalRowsCache.set(row[idField], JSON.parse(JSON.stringify(row)));
+          this.prepareDateFieldsForEdit(row);
+          row.isEditing = true;
+          this.action.emit({ action, row });
+          return;
+      }
+
+      if (action.type === 'callback' && action.callback) {
+          action.callback(row);
+      }
+      
+      if (action.type === 'route' && action.route) {
+          const url = this.replaceParams(action.route, row);
+          this.router.navigateByUrl(url);
+          return;
+      }
+
+      if (action.type === 'api') {
+          if (action.confirmationNeeded) {
+              const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+              if (!confirm(message)) return;
+          }
+          if (action.apiUrl) {
+              this.executeApiAction(action, row);
+          } else {
+             this.action.emit({ action, row });
+          }
+      } else {
+        this.action.emit({ action, row });
+      }
+  }
+
+  onActionItemClick(item: any, row: any, event: Event): void {
+      event.stopPropagation();
+      
+      if (item.type === 'edit-row') {
+          const idField = (this.config as any).rowIdField || 'id';
+          this.originalRowsCache.set(row[idField], JSON.parse(JSON.stringify(row)));
+          this.prepareDateFieldsForEdit(row);
+          row.isEditing = true;
+          this.action.emit({ action: item as TableAction, row });
+          this.closeDropdown();
+          return;
+      }
+
+      if (item.type === 'delete') {
+          this.openDeleteConfirmModal(item, row);
+          return;
+      }
+
+      if (item.type === 'callback' && item.callback) {
+          item.callback(row);
+      }
+      
+      if (item.type === 'route' && item.route) {
+          const url = this.replaceParams(item.route, row);
+          this.router.navigateByUrl(url);
+          return;
+      }
+
+      if (item.type === 'api') {
+          if (item.confirmationNeeded) {
+              const message = item.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+              if (!confirm(message)) return;
+          }
+          if (item.apiUrl) {
+              this.executeApiAction(item as TableAction, row);
+          } else {
+              this.action.emit({ action: item as TableAction, row });
+          }
+      } else {
+          this.action.emit({ action: item as TableAction, row });
+      }
+  }
+
+  private openDeleteConfirmModal(item: any, row: any): void {
+      const cfg = item.deleteConfig || {};
+      this.deleteModalConfig = {
+          title: cfg.modalTitle || 'Confirm Delete',
+          size: 'sm' as const,
+          headerTheme: 'dark' as const,
+          confirmButton: {
+              label: cfg.confirmLabel || 'Delete',
+              type: 'danger' as const
+          },
+          cancelButton: {
+              label: cfg.cancelLabel || 'Cancel',
+              show: true
+          }
+      };
+      this.deleteModalMessage = cfg.modalMessage || 'Are you sure you want to delete this item?';
+      this.pendingDeleteAction = { item, row };
+      this.deleteModalOpen = true;
+  }
+
+  deleteModalMessage = '';
+
+  onDeleteConfirm(): void {
+      this.deleteModalOpen = false;
+      if (!this.pendingDeleteAction) return;
+      const { item, row } = this.pendingDeleteAction;
+      const cfg = item.deleteConfig || {};
+      const idField = cfg.idField || 'id';
+      const url = cfg.apiUrl.replace(`:${idField}`, row[idField]);
+      this.pendingDeleteAction = null;
+
+      this.loading = true;
+      this.http.delete(url, { headers: this.getHeaders() }).pipe(
+          finalize(() => this.loading = false)
+      ).subscribe({
+          next: () => {
+              if (this.data.length === 1 && this.currentPage > 1) {
+                  this.currentPage--;
+              }
+              this.loadData();
+              this.action.emit({ action: item as TableAction, row });
+          },
+          error: (err) => console.error('[SmartTable] Delete API Error', err)
+      });
+  }
+
+  onDeleteCancel(): void {
+      this.deleteModalOpen = false;
+      this.pendingDeleteAction = null;
+  }
+
+  onTopAction(action: TableAction): void {
+      if (action.type === 'add-row' as any) {
+          const idField = (this.config as any).rowIdField || 'id';
+          const newRow: any = {
+              [idField]: 0,
+              isNew: true,
+              isEditing: true
+          };
+          if (this.config.columns) {
+              this.config.columns.forEach(col => {
+                  if (col.editConfig && col.editConfig.defaultValue !== undefined) {
+                      newRow[col.key] = col.dataType === 'date'
+                          ? this.toDateObject(col.editConfig.defaultValue)
+                          : col.editConfig.defaultValue;
+                  } else {
+                      newRow[col.key] = col.dataType === 'date' ? null : '';
+                  }
+                  if (col.subFields) {
+                      col.subFields.forEach(sub => {
+                          if (sub.editConfig && sub.editConfig.defaultValue !== undefined) {
+                              newRow[sub.key] = sub.dataType === 'date'
+                                  ? this.toDateObject(sub.editConfig.defaultValue)
+                                  : sub.editConfig.defaultValue;
+                          } else {
+                              newRow[sub.key] = sub.dataType === 'date' ? null : '';
+                          }
+                      });
+                  }
+              });
+          }
+          this.data = [newRow, ...this.data];
+          setTimeout(() => this.calculateStickyPositions());
+          this.topAction.emit(action);
+          return;
+      }
+
+      if (action.type === 'callback' && action.callback) {
+          action.callback(null); // No row for top action
+      }
+      
+      if (action.type === 'route' && action.route) {
+          // Since it's a top action, replaceParams with an empty object or handle statically 
+          const url = this.replaceParams(action.route, {});
+          this.router.navigateByUrl(url);
+          return;
+      }
+
+      if (action.type === 'api') {
+          if (action.confirmationNeeded) {
+              const message = action.confirmationMessage || this.config.labels?.defaultConfirmationMessage || 'Are you sure?';
+              if (!confirm(message)) return;
+          }
+          if (action.apiUrl) {
+             this.executeApiAction(action, null);
+          } else {
+             this.topAction.emit(action);
+          }
+      } else {
+          this.topAction.emit(action);
+      }
+  }
+
+  private executeApiAction(action: TableAction, row: any): void {
+      if (!action.apiUrl) return;
+      
+      const url = row ? this.replaceParams(action.apiUrl, row) : action.apiUrl;
+      const method = action.apiMethod || 'POST';
+      const headers = this.getHeaders();
+      const body = row ? row : {};
+      
+      this.loading = true;
+      this.http.request(method, url, { body, headers }).pipe(
+          finalize(() => this.loading = false)
+      ).subscribe({
+          next: () => {
+              this.loadData(); // reload on success
+              if (row) {
+                 this.action.emit({ action, row });
+              } else {
+                 this.topAction.emit(action);
+              }
+          },
+          error: (err) => {
+              console.error('API Action Error', err);
+          }
+      });
+  }
+
+  // --- Selection ---
+
+  onSelectAll(event: Event): void {
+      const checked = (event.target as HTMLInputElement).checked;
+      this.data.forEach(row => row.selected = checked);
+      this.updateSelectedRows();
+  }
+  
+  onRowSelect(row: any): void {
+      this.updateSelectedRows();
+  }
+  
+  updateSelectedRows(): void {
+      const idField = (this.config as any).rowIdField || 'id';
+      
+      // 1. Identify rows from the global selection that are NOT on the current page
+      const currentPageIds = new Set(this.data.map(r => r[idField]));
+      const otherPagesSelected = (this.selectedRows || []).filter(r => !currentPageIds.has(r[idField]));
+      
+      // 2. Identify currently selected rows on the current page
+      const currentPageSelected = this.data.filter(row => row.selected);
+      
+      // 3. Merge them to form the new global selection
+      this.selectedRows = [...otherPagesSelected, ...currentPageSelected];
+      
+      this.rowSelect.emit(this.selectedRows);
+  }
+
+  // --- Helpers ---
+
+  getCellValue(row: any, col: TableColumn): any {
+    // Support nested properties via labelPath or key
+    const path = col.labelPath || col.key;
+    let val = this.getValueByPath(row, path);
+
+    // Formatting (Date, etc.)
+    if (col.type === 'date' && val) {
+        if (col.dateFormat) {
+            try {
+                return formatDate(val, col.dateFormat, this.locale);
+            } catch (e) {
+                console.warn('Invalid date format or value', val, col.dateFormat);
+                return val;
+            }
+        }
+        return new Date(val).toLocaleDateString();
+    }
+
+    if (val === null || val === undefined || val === '') {
+        return col.emptyValue ?? this.config.emptyValue ?? '-';
+    }
+    return val;
+  }
+
+  getBadgeClass(row: any, col: TableColumn): string {
+      const val = this.getCellValue(row, col);
+      const strVal = String(val);
+      
+      // Config approach
+      if (col.badgeConfig && col.badgeConfig[strVal]) {
+          return `badge-${col.badgeConfig[strVal]}`;
+      }
+
+      // Default Logic
+      const status = strVal.toLowerCase();
+      
+      if (['active', 'completed', 'success', 'approved'].includes(status)) return 'badge-success';
+      if (['pending', 'in progress', 'waiting'].includes(status)) return 'badge-warning';
+      if (['rejected', 'failed', 'error', 'deleted'].includes(status)) return 'badge-danger';
+      if (['draft', 'inactive'].includes(status)) return 'badge-neutral';
+      
+      return 'badge-info'; // default
+  }
+  
+  getAscOpacity(key: string): number {
+    if (this.activeSort.key !== key) return 0.45;
+    return this.activeSort.direction === 'ASC' ? 1 : 0.2;
+  }
+
+  getDescOpacity(key: string): number {
+    if (this.activeSort.key !== key) return 0.45;
+    return this.activeSort.direction === 'DESC' ? 1 : 0.2;
+  }
+
+  private replaceParams(template: string, row: any): string {
+      return template.replace(/:([a-zA-Z0-9_]+)/g, (_, key) => row[key] || '');
+  }
+  
+  private loadFilterOptions(): void {
+    if (!this.config.filters) return;
+
+    this.config.filters.forEach(filter => {
+      if (filter.apiUrl && !filter.options) {
+        const headers = this.getHeaders();
+        let params = new HttpParams();
+
+        if (filter.handling === 'nested_string' && filter.nestedStringConfig) {
+          const { paramName, baseValue } = filter.nestedStringConfig;
+          if (baseValue) {
+            params = params.set(paramName, baseValue);
+          }
+        }
+
+        const method = filter.apiMethod || 'GET';
+        const body = filter.apiPayload || {};
+        
+        const request$ = method === 'POST' 
+            ? this.http.post<any>(filter.apiUrl, body, { headers, params }) 
+            : this.http.get<any>(filter.apiUrl, { headers, params });
+
+        request$.subscribe({
+          next: (response) => {
+            const data = filter.dataPath ? this.getValueByPath(response, filter.dataPath) : response;
+            if (!Array.isArray(data)) {
+              console.error(`Filter data for ${filter.key} is not an array`, data);
+              return;
+            }
+            filter.options = data.map((item: any) => {
+              const label = filter.labelPath ? this.getValueByPath(item, filter.labelPath) :
+                (filter.labelKey ? item[filter.labelKey] : item.label || item.name);
+              const value = filter.valuePath ? this.getValueByPath(item, filter.valuePath) :
+                (filter.valueKey ? item[filter.valueKey] : item.value || item.code);
+              return { label, value };
+            });
+
+            // Auto-populate matching column options
+            if (this.config.columns) {
+              const matchingColumn = this.config.columns.find(col => col.key === filter.key);
+              if (matchingColumn && matchingColumn.dataType === 'select' && !matchingColumn.options) {
+                matchingColumn.options = filter.options;
+              }
+            }
+          },
+          error: (err) => console.error(`Failed to load filter options for ${filter.key}:`, err)
+        });
+      }
+    });
+  }
+
+  private getValueByPath(obj: any, path: string): any {
+      if (!path || path === '') return obj;
+      return path.split('.').reduce((acc, part) => {
+          const match = part.match(/(\w+)\[(\d+)\]/);
+          if (match) {
+              return acc?.[match[1]]?.[parseInt(match[2])];
+          }
+          return acc?.[part];
+      }, obj);
+  }
+
+  private calculateStickyPositions(): void {
+      // We calculate positions based on rendered widths
+      if (!this.stickyHeaders || this.stickyHeaders.length === 0) return;
+
+      this.stickyColumnStyles = {};
+      let leftOffset = 0;
+      this.hasStickyColumns = false;
+
+      // Default: only the first data column is sticky
+      const stickyCount = this.config.stickyColumnCount !== undefined ? this.config.stickyColumnCount : 1;
+
+      // Checkbox width handling
+      if (this.config.selectable) {
+         const firstSticky = this.config.columns.find((c, i) => i < stickyCount || c.sticky);
+         if (firstSticky) {
+             // We can try to measure checkbox col if needed, but usually fixed 40px
+             // Or better, if we have a checkbox col ref, assume 40px for now as it is fixed in CSS
+             leftOffset = 40; 
+         }
+      }
+
+      const headerElements = this.stickyHeaders.toArray();
+
+      this.config.columns.forEach((col, index) => {
+          if (col.sticky || index < stickyCount) {
+              col.sticky = true;
+              this.hasStickyColumns = false; // Reset to true only after we set styles? No, wait. 
+              // Actually property is used in template to add class 'sticky-col'
+              // but we need to update Styles based on previous cols widths
+              
+              // Find corresponding header element
+              // Note: headerElements corresponds to columns indices
+              const headerEl = headerElements[index]?.nativeElement;
+              
+              if (headerEl) {
+                  // Set style for current column
+                  this.stickyColumnStyles[col.key] = { 
+                      left: `${leftOffset}px`
+                      // We DO NOT set width here, allowing it to be dynamic/auto
+                  };
+                  
+                  // Add THIS column's width to offset for the NEXT column
+                  // use getBoundingClientRect or offsetWidth
+                  leftOffset += headerEl.offsetWidth;
+              }
+              this.hasStickyColumns = true;
+          }
+      });
+      
+      this.cdr.detectChanges();
+  }
+
+  private toTitleCase(str: string): string {
+      return str
+          .replace(/([A-Z])/g, ' $1') // insert space before capital letters
+          .replace(/^./, (str) => str.toUpperCase()) // capitalize the first letter
+          .trim(); // remove any leading/trailing whitespace
+  }
+  
+  get columnCount(): number {
+      return this.config.columns.length;
+  }
+
+  get showPagination(): boolean {
+      if (!this.config?.pagination?.enabled) return false;
+      const pageSize = this.config.pagination.pageSize;
+      const effectiveTotal = this.totalItems > 0 ? this.totalItems : this.data.length;
+      return effectiveTotal > 10;
+  }
+
+  private applyPaginationDefaults(): void {
+      if (this.config?.pagination?.enabled) {
+          if (!this.config.pagination.pageSize) {
+              this.config.pagination.pageSize = 10;
+          }
+          if (!this.config.pagination.pageSizeOptions || this.config.pagination.pageSizeOptions.length === 0) {
+              this.config.pagination.pageSizeOptions = [5, 10, 20, 50, 100];
+          }
+      }
+  }
+
+  onColumnClick(row: any, col: TableColumn): void {
+      if (col.clickAction === 'callback') {
+          this.columnClick.emit({ row, column: col.key });
+      } else if (col.clickAction === 'route' && col.clickRoute) {
+          const url = this.replaceParams(col.clickRoute, row);
+          this.router.navigateByUrl(url);
+      }
+  }
+
+  private getHeaders(): HttpHeaders {
+      let headers = new HttpHeaders();
+      if (this.config.token) {
+          const headerName = this.config.tokenHeader || 'Authorization';
+          headers = headers.set(headerName, this.config.token);
+      }
+      return headers;
+  }
+
+  toggleDropdown(id: string, event: Event, items: any[], row: any): void {
+      event.stopPropagation();
+      if (this.openDropdownId === id) {
+        this.openDropdownId = null;
+        this.activeDropdownItems = null;
+        this.activeDropdownRow = null;
+        return;
+      }
+      const btn = event.currentTarget as HTMLElement;
+      const rect = btn.getBoundingClientRect();
+      const estimatedHeight = (items?.length || 1) * 44 + 8;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const top = spaceBelow < estimatedHeight + 4
+        ? Math.max(4, rect.top - estimatedHeight - 4)
+        : rect.bottom + 4;
+      this.dropdownPosition = {
+        top,
+        right: window.innerWidth - rect.right
+      };
+      this.openDropdownId = id;
+      this.activeDropdownItems = items || [];
+      this.activeDropdownRow = row;
+  }
+
+  @HostListener('document:click')
+  closeDropdown(): void {
+      this.openDropdownId = null;
+      this.activeDropdownItems = null;
+      this.activeDropdownRow = null;
+      this.openFilterKey = null;
+      this.activeFilterData = null;
+  }
+
+  onCancelRow(row: any, index: number): void {
+      if (row.isNew) {
+          this.data.splice(index, 1);
+      } else {
+          const idField = (this.config as any).rowIdField || 'id';
+          const original = this.originalRowsCache.get(row[idField]);
+          if (original) {
+              Object.assign(row, original);
+              this.originalRowsCache.delete(row[idField]);
+          }
+          row.isEditing = false;
+      }
+  }
+
+  onSaveRow(row: any): void {
+      const { isNew, isEditing, selected, ...payload } = row;
+      this.normalizeDateFieldsForSave(payload);
+      const idField = (this.config as any).rowIdField || 'id';
+
+      if (this.tableData !== undefined) {
+          this.rowSave.emit({ row: payload, isNew: !!isNew });
+          row.isEditing = false;
+          row.isNew = false;
+      } else {
+          this.loading = true;
+          const headers = this.getHeaders();
+          
+          if (isNew) {
+              const url = this.config.apiUrl || '';
+              this.http.post(url, payload, { headers }).pipe(
+                  finalize(() => this.loading = false)
+              ).subscribe({
+                  next: () => {
+                      row.isEditing = false;
+                      row.isNew = false;
+                      this.loadData();
+                  },
+                  error: (err) => {
+                      console.error('[SmartTable] Save Row Error', err);
+                  }
+              });
+          } else {
+              let url = this.config.apiUrl || '';
+              if (url) {
+                  if (url.includes(':id') || url.includes(':' + idField)) {
+                      url = this.replaceParams(url, row);
+                  } else {
+                      url = url.endsWith('/') ? `${url}${row[idField]}` : `${url}/${row[idField]}`;
+                  }
+              }
+              const method = this.config.apiMethod === 'POST' ? 'POST' : 'PUT';
+              this.http.request(method, url, { body: payload, headers }).pipe(
+                  finalize(() => this.loading = false)
+              ).subscribe({
+                  next: () => {
+                      row.isEditing = false;
+                      this.originalRowsCache.delete(row[idField]);
+                      this.loadData();
+                  },
+                  error: (err) => {
+                      console.error('[SmartTable] Update Row Error', err);
+                  }
+              });
+          }
+      }
+  }
+
+  // ── Date field helpers ─────────────────────────────────────────────────
+
+  /** Convert any parseable date value to a native Date object for mat-datepicker binding. */
+  private toDateObject(val: any): Date | null {
+      if (!val) return null;
+      if (val instanceof Date) return val;
+      const d = new Date(val);
+      return isNaN(d.getTime()) ? null : d;
+  }
+
+  /** Pre-process all date columns on a row before entering edit mode. */
+  private prepareDateFieldsForEdit(row: any): void {
+      this.config.columns.forEach(col => {
+          if (col.dataType === 'date' && row[col.key]) {
+              row[col.key] = this.toDateObject(row[col.key]);
+          }
+          if (col.subFields) {
+              col.subFields.forEach(sub => {
+                  if (sub.dataType === 'date' && row[sub.key]) {
+                      row[sub.key] = this.toDateObject(row[sub.key]);
+                  }
+              });
+          }
+      });
+  }
+
+  /** Normalize Date objects back to ISO strings before sending payloads. */
+  private normalizeDateFieldsForSave(payload: any): void {
+      this.config.columns.forEach(col => {
+          if (col.dataType === 'date' && payload[col.key] instanceof Date) {
+              payload[col.key] = payload[col.key].toISOString();
+          }
+          if (col.subFields) {
+              col.subFields.forEach(sub => {
+                  if (sub.dataType === 'date' && payload[sub.key] instanceof Date) {
+                      payload[sub.key] = payload[sub.key].toISOString();
+                  }
+              });
+          }
+      });
+  }
+}