ms-data-grid 0.0.16 → 0.0.17

package/src/lib/data-grid/data-grid.component.ts

@@ -0,0 +1,4216 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  OnChanges,
+  SimpleChanges,
+  ElementRef,
+  ViewChild,
+  AfterViewInit,
+  HostListener,
+  ChangeDetectorRef,
+  EventEmitter,
+  NgZone,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { SplitColumnsService } from '../services/split-columns.service';
+import { CommonService } from '../services/common.service';
+import { SwapColumnsService } from '../services/swap-columns.service';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragEnd,
+  CdkDragEnter,
+  CdkDragExit,
+  CdkDragMove,
+  CdkDragSortEvent,
+  CdkDragStart,
+  DragDrop,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+  query,
+  stagger,
+} from '@angular/animations';
+import { CdkDropList } from '@angular/cdk/drag-drop';
+import { STATUSES_BADGE_MAP } from './statuses';
+import { CopyServiceService } from '../services/copy-service.service';
+
+interface CellPosition {
+  rowIndex: number;
+  colIndex: number;
+  subColIndex: number;
+  field: string;
+  key: string;
+}
+export const sortingAnimation = trigger('listSort', [
+  transition('* => *', [
+    // Query all elements entering or leaving
+    query(':enter, :leave', style({ position: 'absolute', width: '100%' }), { optional: true }),
+
+    // Animate leaving elements upward with fade out
+    query(':leave', [
+      animate('300ms ease-in', style({ transform: 'translateY(-20px)', opacity: 0 }))
+    ], { optional: true }),
+
+    // Stagger the entering elements for a smoother effect
+    query(':enter', [
+      style({ transform: 'translateY(20px)', opacity: 0 }),
+      stagger(50, [
+        animate('300ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
+      ])
+    ], { optional: true })
+  ])
+]);
+@Component({
+  selector: 'data-grid',
+  templateUrl: './data-grid.component.html',
+  styleUrls: ['./data-grid.component.scss', '../css/bootstrap.css'],
+  animations: [
+    trigger('accordionToggle', [
+      state(
+        'collapsed',
+        style({ height: '0px', overflow: 'unset' })
+      ),
+      state('expanded', style({ height: '*', overflow: 'unset' })),
+      transition('collapsed <=> expanded', animate('300ms ease-in')),
+    ]),
+    trigger('slideToggle', [
+      transition(':enter', [
+        style({ height: '0px', opacity: 0, overflow: 'hidden' }),
+        animate('300ms ease-out', style({ height: '*', opacity: 1 }))
+      ]),
+      transition(':leave', [
+        style({ height: '*', opacity: 1, overflow: 'hidden' }),
+        animate('300ms ease-in', style({ height: '0px', opacity: 0 }))
+      ])
+    ]),
+    trigger('slideUp', [
+      state('void', style({ transform: 'translateY(100%)', opacity: 0 })),
+      state('*', style({ transform: 'translateY(0)', opacity: 1 })),
+      transition('void => *', animate('300ms ease-out')),
+      transition('* => void', animate('300ms ease-in')),
+    ])
+  ],
+})
+export class DataGridComponent implements OnChanges, AfterViewInit {
+  //  **************************************//
+  //  **************************************//
+  // **********  Input Goes Here *********** //
+  //  **************************************//
+  //  **************************************//
+
+  // Pagination Config Store Here
+  @Input() paginationConfig: any = {};
+
+  // The dataset store here;
+  @Input() dataSet: any[] = [];
+
+  // The columns Store Here
+  @Input() columns: any[] = [];
+
+  // Row Height;
+  @Input() rowHeight: number = 44;
+
+  // Header Row Height;
+  @Input() headerRowHeight: number = 44;
+
+  // Show Vertical Borders;
+  @Input() showVerticalBorder: boolean = true;
+
+  // Even Rows Background Color;
+  @Input() evenRowsBackgroundColor: string | undefined = undefined;
+
+  // Even Rows Background Color;
+  @Input() oddRowsBackgroundColor: string | undefined = undefined;
+
+  // Header Rows Background Color;
+  @Input() headerBackgroundColor: string = '#eaeaea';
+
+  // Header Rows Background Color;
+  @Input() checkboxesBackgroundColor: string = '#eaeaea';
+
+  // Show Columns Grouping;
+  @Input() showColumnsGrouping: boolean = false;
+
+  // Row Hovered Background color;
+  @Input() rowHoverColor: string | undefined = 'rgba(0, 123, 255, 0.1)';
+
+  // Left PinnedBackground color;
+  @Input() leftPinnedBackgroundColor: string | undefined = '#000';
+
+  // Body Background color;
+  @Input() bodyBackgroundColor: string | undefined = '#fff';
+
+  // Right Pinned Background color;
+  @Input() rightPinnedBackgroundColor: string | undefined = '#000';
+
+  // Side Menu Background color;
+  @Input() sidemenuBackgroundColor: string | undefined = '#000';
+
+  // Body text color;
+  @Input() bodyTextColor: string | undefined = '#000';
+
+  // Header text color;
+  @Input() headerTextColor: string | undefined = '#000';
+
+  // Header text size;
+  @Input() headerTextFontsSize: number | undefined = 16;
+
+  // Body text color;
+  @Input() bodyTextFontsSize: number | undefined = 16;
+
+  // Header font weight;
+  @Input() headerFontWeight: number | undefined = 500;
+
+  // Body Font Weight;
+  @Input() bodyFontWeight: number | undefined = 400;
+
+  // Checked Row Background Color;
+  @Input() checkedRowBackgroundColor: string | undefined = '';
+
+  // dropdowns Background Color;
+  @Input() dropdownsBackgroundColor: string | undefined = '';
+
+  // Footer row Height;
+  @Input() footerRowHeight: number = 46;
+
+  // Footer row Height;
+  @Input() topGroupedBadgesBackgroundColor: string | undefined = '';
+
+  // Show Row wise grouping;
+  @Input() showRowsGrouping: boolean | undefined = false;
+
+  // Show Row wise grouping;
+  @Input() showFilterRow: boolean | undefined = false;
+
+  // Show Row wise grouping;
+  @Input() fontFaimly: string | undefined = 'sans-serif';
+
+  // Show SideColumn;
+  @Input() showSideMenu: boolean = false;
+
+  // Footer Padding
+  @Input() footerPadding: number = 3
+
+
+  // Footer Padding
+  @Input() topFilterRowHeight: number = 50;
+
+  // Show Rows shading
+  @Input() rowShadingEnabled: boolean = false;
+
+  // Show Rows shading
+  @Input() showSerialNumber: boolean = false;
+
+  // Single Spa Url Attach to icons
+  @Input() singleSpaAssetsPath: string = 'assets/';
+
+
+  // Applied Filters
+  @Input() filtersConfig: any[] = [];
+
+
+  // Applied Filters
+  @Input() loading: boolean = false;
+
+  //Vertical Scrollbar style
+  @Input() verticalScrollbarWidth: 'auto' | 'thin' = 'auto';
+
+  //Horizintal Scrollbar style
+  @Input() horizintalScrollbarWidth: 'auto' | 'thin' = 'auto';
+
+  // Show Cell details box
+  @Input() showCellDetailsBox: boolean = false;
+
+  //Date format
+
+  @Input() dateFormat: string = 'dd/MM/yyyy'
+
+  //Date format
+  @Input() tableSearch: string = '';
+
+
+  //Date format
+  @Input() actions: any[] = ['edit', 'delete'];
+
+
+  // Table Config for paginations is here
+  @Input() config: any;
+
+
+  // Selection task bar
+  @Input() showTaskbar = false
+
+  // Table Name for state manage
+  @Input() tableName = true
+
+
+  // Listing type
+  @Input() listingType: string | boolean = '';
+
+  // Listing type
+
+  @Input() checkboxState: { reset: boolean } = {
+    reset: true
+  }
+
+  // Taskbar actions
+  @Input() taskbarActions: any[] = []
+
+
+  // Sorting Config to show sort icons
+  @Input() sortingConfig: { field: string, order_by: string } | null = null;
+
+
+  @Input() tableFilterViewId: any = '';
+
+
+  @Input() selectedTableLayout: any = 'medium'
+
+  @Input() closeDropdown: { preset: { closed: boolean, loading: boolean } } = { preset: { closed: false, loading: false } };
+
+  // Table View
+
+  // GlobalSearch
+  @Input() globalSearchText: string = '';
+
+  // Nested Table Row Fontsize
+  @Input() nestedTablerowFontsize = 14;
+
+  // Nested table row Header row Height
+  @Input() nestedTableHeaderRowHeight = 40;
+
+  // Nested Table row height
+  @Input() nestedTablerowHeight = 36;
+
+
+  @Input() gridType: string = '';
+
+  @Input() currencySymbol: string = '$';
+
+
+  @Input() leftPinnedBoxshadow: string = '#4b4b4b 1px 1px 5px 0px';
+
+  @Input() rightPinnedBoxshadow: string = '#4b4b4b 4px 1px 6px 0px';
+
+  // GlobalSearch
+  @Input() selectedRowsBackgroundColor: string = '#8ac5ff';
+
+  // GlobalSearch
+  @Input() nestedTableHeaderBAckgroundColor: string = '#eaeaea';
+
+  @Input() tableView: any[] = [];
+
+  @Input() keepMultipleExpandedDetails = false;
+
+
+  @Input() showTotalAmountRow = false;
+
+  @Input() tableType = '';
+
+  @Input() columnThreedotsMunuConfig = {
+    showPinleft: true,
+    showPinright: true,
+    showAscending: true,
+    showDescending: true,
+    showFilter: true,
+    showRowsGrouping: this.showRowsGrouping,
+    showAutosizeAllColumns: false,
+    showAutosizeThisColumn: false,
+    showChoseColumns: false,
+    showResetColumns: false,
+  };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  // ///////////////////////////////////////////////////////////////////////////////////////////
+  // ///////////////////////////////////////////////////////////////////////////////////////////
+  //                         Out Put Events
+  // ///////////////////////////////////////////////////////////////////////////////////////////
+  // ///////////////////////////////////////////////////////////////////////////////////////////
+
+
+
+  //Change Table Layout
+  @Output() public changeLayout = new EventEmitter<any>();
+
+  // Filter Apply event;
+  @Output() public filterOptions = new EventEmitter<any>();
+
+  @Output() genericEvent: EventEmitter<any> = new EventEmitter();
+
+  @Output() tablePresetConfig: EventEmitter<any> = new EventEmitter();
+
+  @Output() sortingOrderOptions: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output() createUpdateConfigListing: EventEmitter<any> = new EventEmitter<any>();
+
+
+
+
+
+
+
+
+
+  groupedColumns: any[] = [];
+  activeCol: any = null;
+  activeFilterCell: any = null;
+  showActionsDropDown = false;
+  sideMenuVisible = false;
+  pivotMode: boolean = false;
+  columnSearch: string = '';
+  expandAllAccordians = true;
+  currentOpenedSideMenue: 'cols' | 'filtrs' | null = null;
+  originalColumns: any[] = [];
+  originalDataSet: any[] = [];
+  activeTopButton: string | null = '';
+  filterColumnsList: any[] = [];
+  groupBoxPadding = 200;
+  presetName: string = '';
+  presetFilter: any = '';
+  searchTextPresetTable = '';
+  addFilterColumnInput = '';
+  searchInDropdown = '';
+  addFilterDropdownSearch = ''
+  topShowHideColumns = '';
+  choseColumnsSearch = ''
+  editinDropdownSearch = '';
+  isThreeDotsFilterOpen = false;
+  confirmDelete = false;
+  fontFamilies: string[] = [
+    // Common Excel fonts
+    'Arial',
+    'Arial Black',
+    'Bahnschrift',
+    'Calibri',
+    'Cambria',
+    'Cambria Math',
+    'Candara',
+    'Comic Sans MS',
+    'Consolas',
+    'Constantia',
+    'Corbel',
+    'Courier New',
+    'Ebrima',
+    'Franklin Gothic Medium',
+    'Gabriola',
+    'Gadugi',
+    'Georgia',
+    'Impact',
+    'Ink Free',
+    'Javanese Text',
+    'Leelawadee UI',
+    'Lucida Console',
+    'Lucida Sans Unicode',
+    'Malgun Gothic',
+    'Microsoft Himalaya',
+    'Microsoft JhengHei',
+    'Microsoft New Tai Lue',
+    'Microsoft PhagsPa',
+    'Microsoft Sans Serif',
+    'Microsoft Tai Le',
+    'Microsoft YaHei',
+    'Microsoft Yi Baiti',
+    'Mongolian Baiti',
+    'MS Gothic',
+    'MS PGothic',
+    'MS UI Gothic',
+    'MV Boli',
+    'Nirmala UI',
+    'Palatino Linotype',
+    'Segoe Print',
+    'Segoe Script',
+    'Segoe UI',
+    'Segoe UI Historic',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'SimSun',
+    'Sitka Small',
+    'Sylfaen',
+    'Symbol',
+    'Tahoma',
+    'Times New Roman',
+    'Trebuchet MS',
+    'Verdana',
+    'Webdings',
+    'Wingdings',
+    'Yu Gothic',
+    'sans-serif',
+    'serif',
+    'monospace'
+  ];
+
+  fontSizes: string[] = [
+    '8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32'
+  ];
+
+
+
+
+  constructor(
+    private columnService: SplitColumnsService,
+    private cdr: ChangeDetectorRef,
+    public commonSevice: CommonService,
+    private swapColumnService: SwapColumnsService,
+    private elementRef: ElementRef,
+    private ngZone: NgZone,
+    private copyService: CopyServiceService
+  ) { }
+
+  @ViewChild('cellText', { static: false }) cellText!: ElementRef;
+  async ngAfterViewInit() {
+    setTimeout(async () => {
+      // this.updateFlattenedData();
+      // this.computeViewportRows();
+      // this.updateVisibleRows(0);
+      // this.cdr.detectChanges();
+      await this.SetColumnsDefaultWidth();
+      await this.refreshHeaders()
+      this.updateFlattenedData();
+      this.computeViewportRows();
+      this.updateVisibleRows(0);
+      if (this.cellText) {
+        const observer = new ResizeObserver(() => {
+          this.cdr.detectChanges();
+        });
+        observer.observe(this.cellText.nativeElement);
+      }
+      this.cdr.detectChanges();
+    }, 300);
+
+
+  }
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if (changes['filtersConfig']) {
+      await this.applyFilteroptionList();
+      this.checkFilterChangesEffect();
+    }
+    if (changes['columns']?.currentValue?.length) {
+      // this.columns = this.columnService.setColumnsQuery(this.columns);
+      this.originalColumns = structuredClone(this.columns);
+      if (this.dataGridContainer?.nativeElement?.offsetWidth) {
+        await this.SetColumnsDefaultWidth();
+        await this.updateColumnWidthsAndGroups();
+        await this.refreshPreviewColumns();
+        this.setSectionsWidth();
+        this.cdr.detectChanges();
+      }
+      this.generateDropListIds();
+      this.cdr.detectChanges();
+
+      requestAnimationFrame(() => {
+
+        this.cdr.detectChanges();
+      });
+    }
+    if (changes['dataSet']) {
+      this.dataSet = this.dataSet?.map((row, i) => ({
+        ...row,
+        __virtualIndex: i + 1
+      }));
+      this.originalDataSet = structuredClone(this.dataSet);
+      this.expandedCells.clear();
+      this.updateFlattenedData();
+      this.cdr.detectChanges();
+      setTimeout(() => {
+        if (this.mainScroll?.nativeElement) {
+          this.computeViewportRows();
+          this.updateVisibleRows(0);
+        }
+      }, 100);
+      if (this.centerPinnedHeader?.nativeElement) {
+        void this.centerPinnedHeader.nativeElement.offsetWidth;
+        if (this.centerScrollableBody?.nativeElement) {
+          this.centerScrollableBody.nativeElement.scrollLeft = this.centerPinnedHeader?.nativeElement?.scrollLeft;
+        }
+        this.cdr.detectChanges();
+      }
+
+    }
+    if (changes['checkboxState']?.currentValue?.reset) {
+      this.selectedRows.clear();
+      this.cdr.detectChanges();
+    }
+    if (changes['closeDropdown']) {
+      if (this.closeDropdown.preset.closed) {
+        this.activeTopButton = null;
+      }
+    }
+    if (changes['oddRowsBackgroundColor']) {
+      this.rowShadingEnabled = this.oddRowsBackgroundColor ? this.rowShadingEnabled = true : false;
+    }
+  }
+
+
+
+  async applyFilteroptionList() {
+    const updatedColumns = await this.commonSevice.applyFiltersToColumns(this.columns, this.filtersConfig);
+    this.columns = [...updatedColumns];
+    this.cdr.detectChanges();
+  }
+  leftPinnedColumns: any[] = [];
+  centerColumns: any[] = [];
+  rightPinnedColumns: any[] = [];
+
+  previewLeftPinnedColumns: any[] = [];
+  previewCenterColumns: any[] = [];
+  previewRightPinnedColumns: any[] = [];
+
+  // Main Container Template References
+  @ViewChild('dataGridContainer')
+  dataGridContainer!: ElementRef<HTMLDivElement>;
+
+  // Body Template References
+  @ViewChild('leftPinnedBody')
+  leftPinnedBody!: ElementRef<HTMLDivElement>;
+  @ViewChild('centerPinnedBody')
+  centerPinnedBody!: ElementRef<HTMLDivElement>;
+  @ViewChild('rightPinnedBody')
+  rightPinnedBody!: ElementRef<HTMLDivElement>;
+
+  // Headers Template References
+  @ViewChild('leftPinnedHeader')
+  leftPinnedHeader!: ElementRef<HTMLDivElement>;
+  @ViewChild('centerPinnedHeader')
+  centerPinnedHeader!: ElementRef<HTMLDivElement>;
+  @ViewChild('rightPinnedHeader')
+  rightPinnedHeader!: ElementRef<HTMLDivElement>;
+
+  @ViewChild('columnsGroupedBox')
+  columnsGroupedBox!: ElementRef<HTMLDivElement>;
+
+  // Center Fake scrollbard
+  @ViewChild('centerFakeScrollbar')
+  centerFakeScrollbar!: ElementRef<HTMLDivElement>;
+  async updateColumnWidthsAndGroups(columns: any = null) {
+    if (!this.dataGridContainer) return;
+
+    const containerWidth = this.dataGridContainer.nativeElement.offsetWidth;
+
+    // Wrap in a promise so we can await
+    const { left, center, right }: any = await new Promise(resolve => {
+      const prepared = this.columnService.prepareColumns(
+        columns ? columns : this.columns,
+        containerWidth
+      );
+      resolve(prepared);
+    });
+
+    this.leftPinnedColumns = left;
+    this.centerColumns = center;
+    this.rightPinnedColumns = right;
+    await new Promise(r => setTimeout(r, 0));
+    this.cdr.detectChanges();
+  }
+
+  async refreshPreviewColumns(columns: any = null) {
+    if (!this.dataGridContainer) return;
+
+    const containerWidth = this.dataGridContainer.nativeElement.offsetWidth;
+
+    // Wrap prepareColumns in a Promise to make it awaitable
+    const { left, center, right }: any = await new Promise(resolve => {
+      const prepared = this.columnService.prepareColumns(
+        columns ? columns : this.columns,
+        containerWidth
+      );
+      resolve(prepared);
+    });
+
+    this.previewLeftPinnedColumns = left;
+    this.previewCenterColumns = center;
+    this.previewRightPinnedColumns = right;
+    await new Promise(r => setTimeout(r, 10));
+    this.cdr.detectChanges();
+  }
+
+
+  async SetColumnsDefaultWidth() {
+    const containerWidth = this.dataGridContainer?.nativeElement.offsetWidth;
+    this.columns = this.columnService.assignDefaultWidths(
+      this.columns,
+      containerWidth
+    );
+    await new Promise(resolve => setTimeout(resolve, 0));
+    this.cdr.detectChanges();
+  }
+
+
+  setSectionsWidth() {
+    const left = document.querySelector('.left-pinned-body') as HTMLElement;
+    const center = document.querySelector(
+      '.center-scrollable-body'
+    ) as HTMLElement;
+    const right = document.querySelector('.right-pinned-body') as HTMLElement;
+    if (left) {
+      left.style.minWidth = `${this.leftPinnedHeader.nativeElement.offsetWidth}`;
+    }
+    if (center) {
+      left.style.minWidth = `${this.centerPinnedHeader.nativeElement.offsetWidth}`;
+    }
+    if (right) {
+      left.style.minWidth = `${this.rightPinnedHeader.nativeElement.offsetWidth}`;
+    }
+  }
+
+  // onCenterBodyScroll(): void {
+  //   const scrollTop = this.centerPinnedBody.nativeElement.scrollTop;
+  //   const scrollLeft = this.centerPinnedBody.nativeElement.scrollLeft;
+
+  //   // Sync vertical scroll with left & right pinned bodies
+  //   this.leftPinnedBody.nativeElement.scrollTop = scrollTop;
+  //   this.rightPinnedBody.nativeElement.scrollTop = scrollTop;
+
+  //   // Sync horizontal scroll with center header
+  //   this.centerPinnedHeader.nativeElement.scrollLeft = scrollLeft;
+  //   this.centerFakeScrollbar.nativeElement.scrollLeft = scrollLeft;
+  // }
+
+  onLeftBodyScroll(): void {
+    const scrollTop = this.leftPinnedBody.nativeElement.scrollTop;
+    this.centerPinnedBody.nativeElement.scrollTop = scrollTop;
+    this.rightPinnedBody.nativeElement.scrollTop = scrollTop;
+  }
+  onRightBodyScroll(): void {
+    const scrollTop = this.rightPinnedBody.nativeElement.scrollTop;
+    this.centerPinnedBody.nativeElement.scrollTop = scrollTop;
+    this.leftPinnedBody.nativeElement.scrollTop = scrollTop;
+  }
+
+  fakeScrollbarScrollLeft = 0;
+  onFakeScroll(event: Event) {
+    const target = event.target as HTMLElement;
+    this.fakeScrollbarScrollLeft = target.scrollLeft;
+    this.centerPinnedBody.nativeElement.scrollLeft = target.scrollLeft;
+    this.centerPinnedHeader.nativeElement.scrollLeft = target.scrollLeft;
+  }
+
+
+
+
+  getNestedValue(obj: any, field: string): any {
+    return field.split('.').reduce((acc, part) => acc && acc[part], obj);
+  }
+
+  isNestedValueArray(obj: any, field: string): boolean {
+    if (!obj || !field) return false;
+    const value = field
+      .split('.')
+      .reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
+    return Array.isArray(value);
+  }
+
+  onResizeGroup(event: MouseEvent, col: any, isRightPinned?: boolean): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const startX = event.clientX;
+    const children = col.children || [];
+    if (!children.length) return;
+
+    const childWidths: { field: string; width: number }[] = children.map(
+      (child: any) => {
+        const el = document.querySelector(
+          `[field="${child.field}"]`
+        ) as HTMLElement;
+        return {
+          field: child.field,
+          width: el?.offsetWidth || 0,
+        };
+      }
+    );
+
+    const totalInitialWidth = childWidths.reduce(
+      (sum, col) => sum + col.width,
+      0
+    );
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      let deltaX = moveEvent.clientX - startX;
+
+      if (isRightPinned) {
+        deltaX = -deltaX;
+      }
+
+      // Prevent shrinking too small
+      if (totalInitialWidth + deltaX < children.length * 80) return;
+
+      let totalNewWidth = 0;
+
+      childWidths.forEach((child) => {
+        const ratio = child.width / totalInitialWidth;
+        const newWidth = Math.max(child.width + deltaX * ratio, 80);
+        totalNewWidth += newWidth;
+
+        const childEls = document.querySelectorAll(`[field="${child.field}"]`);
+        childEls.forEach((el: Element) => {
+          const elHtml = el as HTMLElement;
+          elHtml.style.minWidth = `${newWidth}px`;
+          elHtml.style.width = `${newWidth}px`;
+        });
+
+        this.updateColumnWidthInSourceByField(child.field, newWidth);
+      });
+
+      // ✅ Update group header width in DOM
+      const groupHeaderEl = document.querySelector(
+        `[group="${col.header}"]`
+      ) as HTMLElement;
+      if (groupHeaderEl) {
+        groupHeaderEl.style.width = `${totalNewWidth}px`;
+        this.cdr.detectChanges();
+      }
+    };
+
+    const onMouseUp = () => {
+      if (this.tableFilterViewId) {
+        this.savePreset('mouseUp');
+      }
+      this.refreshHeaders();
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+      const event = {
+        columns: this.columns,
+        type: 'createUpdateConfigListing',
+      }
+      this.createUpdateConfigListing.emit(event);
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }
+
+  private updateColumnWidthInSourceByField(field: string, width: number): void {
+    const update = (columns: any[]) => {
+      for (const col of columns) {
+        if (col.children?.length) {
+          update(col.children);
+        } else if (col.field === field) {
+          col.width = width;
+        }
+      }
+    };
+
+    update(this.columns);
+    this.cdr.detectChanges();
+  }
+
+  onResizeColumn(event: MouseEvent, col: any): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const startX = event.clientX;
+
+    const targetEl = document.querySelector(
+      `[field="${col.field}"]`
+    ) as HTMLElement;
+    const initialWidth = targetEl?.offsetWidth || 150;
+
+    const matchingEls = document.querySelectorAll(`[field="${col.field}"]`);
+
+    // 👉 Add highlight while resizing
+    if (col?.pinned == 'right') {
+      matchingEls.forEach((el: Element) => {
+        (el as HTMLElement).classList.add('resizing-highlight-right');
+      });
+    } else {
+      matchingEls.forEach((el: Element) => {
+        (el as HTMLElement).classList.add('resizing-highlight');
+      });
+    }
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      let deltaX = moveEvent.clientX - startX;
+
+      // 👉 Reverse if the column is pinned to the right
+      if (col.pinned === 'right') {
+        deltaX = -deltaX;
+      }
+
+      let newWidth = initialWidth + deltaX;
+      if (newWidth < 80) return;
+
+      matchingEls.forEach((el: Element) => {
+        const element = el as HTMLElement;
+        element.style.minWidth = `${newWidth}px`;
+        element.style.width = `${newWidth}px`;
+      });
+
+      this.updateColumnWidthInSourceByField(col.field, newWidth);
+      col.width = newWidth;
+    };
+
+    const onMouseUp = () => {
+      if (this.tableFilterViewId) {
+        this.savePreset('mouseUp');
+      }
+      this.refreshHeaders();
+      const event = {
+        columns: this.columns,
+        type: 'createUpdateConfigListing',
+      }
+      this.createUpdateConfigListing.emit(event);
+
+      matchingEls.forEach((el: Element) => {
+        (el as HTMLElement).classList.remove('resizing-highlight');
+        (el as HTMLElement).classList.remove('resizing-highlight-right');
+      });
+
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }
+
+
+
+  onResizeGroupBox(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const startX = event.clientX;
+
+    const targetEl = document.getElementById('groupBoxHeaderDiv');
+    const initialWidth = targetEl?.offsetWidth || 150;
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.clientX - startX;
+
+      let newWidth = initialWidth + deltaX;
+      if (newWidth < 100) newWidth = 100;
+
+      if (targetEl) {
+        targetEl.style.width = `${newWidth}px`;
+        targetEl.style.minWidth = `${newWidth}px`;
+        this.groupBoxPadding = newWidth;
+      }
+    };
+
+    const onMouseUp = () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  }
+
+
+  onFilterChange(col: any): void {
+    const filterValue = col.filterValue?.toLowerCase() || '';
+  }
+
+  // Get Body Height
+  get bodyWrapperHeight(): string {
+    const rows = this.showColumnsGrouping && this.showFilterRow ? 3 : (this.showColumnsGrouping || this.showFilterRow ? 2 : 1);
+    const offset = this.rowHeight * rows + 17;
+    return `calc(100% - ${offset}px)`;
+  }
+
+  // Row Hover Logic Here
+  hoveredRowId: string | number | null = null;
+  onRowHover(row: any): void {
+    this.hoveredRowId = row._id || row.id;
+  }
+
+  onRowLeave(): void {
+    this.hoveredRowId = null;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    this.isVisible = false;
+    if (
+      !this.hasParentWithClass(target, [
+        'three-dots',
+        'filter-icon-wrapper',
+        'column-menu',
+        'filter-menu',
+      ])
+    ) {
+      this.activeCol = null;
+      this.activeFilterCell = null;
+    }
+    if (!this.elementRef.nativeElement.contains(event.target)) {
+      this.showActionsDropDown = false;
+    }
+    const insideTopFilterRow = target.closest('.filter-tags') || target.closest('.add-filter-button-menu') ||
+      target.closest('.table-right-top-actions') || target.closest('.table-layout') || target.closest('.filter-row-filter-wrapper');
+    const isClickedInsideThreeDotsFilter = target.closest('.three-dots-filter') || target.closest('.filter-menu-container');
+    if (!isClickedInsideThreeDotsFilter) {
+      this.closeThreeDotsMenuFilter();
+    }
+    if (!insideTopFilterRow) {
+      this.closeFilterDropdowns(event);
+    }
+    if (!target.closest('.set-default-preset')) {
+      document.querySelector('.set-default-preset')?.classList?.remove('show');
+    }
+
+    if (!target.closest('.data-grid-table-wrapper')) {
+      this.selectedKeys.clear();
+      this.activeCell = '';
+    }
+  }
+
+
+  closeThreeDotsMenuFilter() {
+    this.isThreeDotsFilterOpen = false;
+  }
+
+
+  closeFilterDropdowns(event: MouseEvent) {
+    this.isFilterOpen = false;
+    this.isActiveFilterOpen = false;
+    this.activeTopButton = '';
+    this.activeFilterCell = null;
+  }
+
+  private hasParentWithClass(
+    element: HTMLElement,
+    classList: string[]
+  ): boolean {
+    let el: HTMLElement | null = element;
+
+    while (el !== null) {
+      if (
+        el.classList &&
+        classList.some((className) => el!.classList.contains(className))
+      ) {
+        return true;
+      }
+      el = el.parentElement;
+    }
+
+    return false;
+  }
+
+  isMenueHidden = false;
+  openThreeDotsMenu(event: MouseEvent, child: any) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isMenueHidden = true;
+    const containerWidth = this.dataGridContainer?.nativeElement?.offsetWidth;
+    this.activeCol = child;
+    this.activeFilterCell = null;
+    const x = event.clientX;
+    setTimeout(() => {
+      const element = document.querySelector('.column-menu') as HTMLElement;
+      if (element) {
+        if (x > (containerWidth / 2)) {
+          element.style.left = `${x - 240}px`;
+        } else {
+          element!.style.left = `${x}px`;
+        }
+      }
+      this.isMenueHidden = false;
+      this.cdr.detectChanges();
+    }, 0);
+  }
+  // ////////////////////////////////////////////////////////////////////////////////////////
+  // ////////////////////////////////////////////////////////////////////////////////////////
+  // Column Three Dots Actions
+  // //////////////////////////////////////////////////////////////////////////////////////
+  // //////////////////////////////////////////////////////////////////////////////////////
+  sortAsc(col: any) {
+    if (!col.is_sortable) return;
+    col!.order_by = 'asc';
+    const event = {
+      order: 'asc',
+      column: col
+    }
+    this.cdr.detectChanges();
+    this.sortingOrderOptions.emit(event);
+  }
+
+  sortDesc(col: any) {
+    if (!col.is_sortable) return;
+    col!.order_by = 'desc';
+    const event = {
+      order: 'desc',
+      column: col
+    }
+    this.cdr.detectChanges();
+    this.sortingOrderOptions.emit(event);
+  }
+
+  resetSort(col: any) {
+    this.sortingConfig = { field: '', order_by: '' };
+    const event = { field: null, order_by: null }
+    this.cdr.detectChanges();
+    this.sortingOrderOptions.emit(event);
+  }
+
+
+  async updateColumnPinInSourceByField(
+    column: any,
+    pinned: 'left' | 'right' | null
+  ) {
+    const update = (columns: any[]) => {
+      for (const col of columns) {
+        if (col.children?.length) {
+          update(col.children);
+        } else if (col.field === column.field) {
+          col.pinned = pinned;
+        }
+      }
+    };
+    this.activeCol = null;
+    update(this.columns);
+    this.updateColumnWidthsAndGroups();
+    this.refreshPreviewColumns();
+    this.cdr.detectChanges();
+    const event = {
+      columns: this.columns,
+      type: 'createUpdateConfigListing',
+    }
+    this.createUpdateConfigListing.emit(event);
+  }
+
+  autosizeColumn(cols: any | any[]): void {
+    this.activeCol = null;
+
+    // Normalize input to an array
+    const columnsToResize = Array.isArray(cols) ? cols : [cols];
+
+    // Helper: Flatten all visible leaf columns
+    const getVisibleLeafColumns = (columns: any[]): any[] => {
+      const result: any[] = [];
+      for (const column of columns) {
+        if (column.children && Array.isArray(column.children)) {
+          result.push(...getVisibleLeafColumns(column.children));
+        } else if (column.is_visible) {
+          result.push(column);
+        }
+      }
+      return result;
+    };
+
+    const visibleColumns = getVisibleLeafColumns(this.columns);
+    const visibleCount = visibleColumns.length;
+
+    if (visibleCount === 0) return;
+
+    const containerWidth =
+      this.dataGridContainer?.nativeElement?.offsetWidth ?? 0;
+    const equalWidth = Math.floor(containerWidth / visibleCount);
+
+    // Resize each passed column
+    for (const col of columnsToResize) {
+      if (col && col.field) {
+        col.width = equalWidth;
+        this.updateColumnWidthInSourceByField(col.field, equalWidth);
+      }
+    }
+
+    this.updateColumnWidthsAndGroups();
+
+    setTimeout(() => {
+      const sendData = {
+        columns: this.columns,
+        filters: this.filtersConfig,
+        no_of_records: this.paginationConfig.pageSize,
+        type: this.tableType,
+      };
+      this.createUpdateConfigListing.emit(sendData);
+    }, 1000);
+    this.refreshPreviewColumns();
+  }
+
+  getGroupWidth(group: any): number {
+    return (
+      group?.children
+        ?.filter((col: any) => col?.is_visible)
+        ?.reduce((acc: number, col: any) => acc + (col?.width || 0), 0) || 0
+    );
+  }
+
+  autosizeAllColumns(): void {
+    this.activeCol = null;
+
+    const getVisibleLeafColumns = (columns: any[]): any[] => {
+      const result: any[] = [];
+
+      for (const column of columns) {
+        if (column.children && Array.isArray(column.children)) {
+          result.push(...getVisibleLeafColumns(column.children));
+        } else if (column.is_visible !== false) {
+          result.push(column);
+        }
+      }
+
+      return result;
+    };
+
+    const visibleColumns = getVisibleLeafColumns(this.columns);
+    const visibleCount = visibleColumns.length;
+
+    if (visibleCount === 0) return;
+
+    const containerWidth =
+      this.dataGridContainer?.nativeElement?.offsetWidth ?? 0;
+    const equalWidth = Math.max(Math.floor(containerWidth / visibleCount), 150);
+
+    // Update widths for all visible columns
+    visibleColumns.forEach((col) => {
+      col.width = equalWidth;
+      this.updateColumnWidthInSourceByField(col.field, equalWidth);
+    });
+
+    this.refreshHeaders();
+    this.cdr.detectChanges();
+    setTimeout(() => {
+      const sendData = {
+        columns: this.columns,
+        filters: this.filtersConfig,
+        no_of_records: this.paginationConfig.pageSize,
+        type: this.tableType,
+      };
+      this.createUpdateConfigListing.emit(sendData);
+    }, 1000);
+  }
+
+  private markColumnAsGrouped(columns: any[], field: string): void {
+    for (const col of columns) {
+      if (col.field === field) {
+        col.isRowGrouped = true;
+        return;
+      }
+      if (col.children?.length) {
+        this.markColumnAsGrouped(col.children, field);
+      }
+    }
+  }
+
+  async groupBy(col: any) {
+    this.activeCol = null;
+    if (!col) return;
+    this.loading = true;
+    this.cdr.detectChanges();
+    if (col?.isGroupable) {
+      this.groupedColumns.push(col);
+      this.markColumnAsGrouped(this.columns, col.field);
+    }
+    const fields = this.groupedColumns.map((item) => item.field);
+    this.dataSet = await this.groupDataAsync(this.originalDataSet, fields);
+    setTimeout(() => {
+      this.updateFlattenedData();
+      this.updateColumnWidthsAndGroups();
+      this.refreshPreviewColumns();
+      this.updateVisibleRows(0);
+      this.loading = false;
+      this.cdr.detectChanges();
+    }, 100);
+
+    setTimeout(() => {
+      this.groupBoxPadding = this.columnsGroupedBox?.nativeElement.offsetWidth;
+      this.cdr.detectChanges()
+    }, 10);
+  }
+
+  async groupDataAsync(data: any[], groupFields: string[]): Promise<any[]> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        const result = this.groupData(data, groupFields);
+        resolve(result);
+      }, 0);
+    });
+  }
+
+
+
+
+  chooseColumns() {
+    this.activeCol = null;
+    this.showColumnPanel = true;
+  }
+
+  resetColumns() {
+    this.activeCol = null;
+
+    this.columns = structuredClone(this.originalColumns);
+    this.SetColumnsDefaultWidth();
+    setTimeout(() => {
+      this.updateColumnWidthsAndGroups();
+      this.refreshPreviewColumns();
+      this.cdr.detectChanges();
+    }, 100);
+  }
+
+  clearFilter(col: any) {
+    col.firstValue = '';
+    col.secondValue = '';
+    col.firstCondition = 'contains';
+    col.secondCondition = 'contains';
+    col.logic = 'AND';
+    col.selectAll = false;
+    col.selectedOptions = {};
+    col.searchValue = '';
+
+  }
+
+
+  applyFilter(col: any) {
+    this.filterColumnsList.push(col);
+  }
+
+  // Rows Selection Logic Goes Here
+
+  selectedRows: Set<string> = new Set();
+
+  /**
+   * Get normalized ID from row.
+   */
+  private getRowId(row: any): string {
+    return row.id ?? row._id;
+  }
+
+  /**
+   * Toggle a single row selection.
+   */
+  toggleRowSelection(row: any): void {
+    const id = this.getRowId(row);
+    if (this.selectedRows.has(id)) {
+      this.selectedRows.delete(id);
+    } else {
+      this.selectedRows.add(id);
+    }
+
+    const ids = Array.from(this.selectedRows);
+    const event = {
+      data: {
+        listingType: this.listingType,
+        obj: ids
+      },
+      eventType: "onSelectRow",
+    }
+    this.genericEvent.emit(event);
+  }
+
+
+  toggleSelectAll(data: any[]): void {
+    const allIds = this.originalDataSet.map((row) => this.getRowId(row));
+    const allSelected = allIds.every((id) => this.selectedRows.has(id));
+
+    if (allSelected) {
+      allIds.forEach((id) => this.selectedRows.delete(id));
+    } else {
+      allIds.forEach((id) => this.selectedRows.add(id));
+    }
+    this.cdr.detectChanges();
+    const ids = Array.from(this.selectedRows);
+    const event = {
+      data: {
+        listingType: this.listingType,
+        obj: ids
+      },
+      eventType: "onSelectRow",
+    }
+    this.genericEvent.emit(event);
+  }
+
+  isRowSelected(row: any): boolean {
+    return this.selectedRows.has(this.getRowId(row));
+  }
+
+  isAllSelected(data: any[]): boolean {
+    return (data?.every((row) => this.selectedRows.has(this.getRowId(row))) && (this.dataSet?.length > 0));
+  }
+
+  isIndeterminateState(data: any[]): boolean {
+    if (!data || data.length === 0) return false;
+    const selectedCount = data.filter(row => this.selectedRows.has(this.getRowId(row))).length;
+    return selectedCount > 0 && selectedCount < data.length;
+  }
+
+  // Side Menu Working Goes Here
+  toggleSideMenu(clickedOn: 'cols' | 'filtrs') {
+    if (this.currentOpenedSideMenue == clickedOn) {
+      this.currentOpenedSideMenue = clickedOn;
+      this.sideMenuVisible = !this.sideMenuVisible;
+    } else if (
+      this.sideMenuVisible &&
+      clickedOn != this.currentOpenedSideMenue
+    ) {
+      this.currentOpenedSideMenue = clickedOn;
+      return;
+    } else {
+      this.currentOpenedSideMenue = clickedOn;
+      this.sideMenuVisible = !this.sideMenuVisible;
+    }
+  }
+
+  toggleGroupVisibility(col: any) {
+    const allVisible = col.children.every((child: any) => child.is_visible);
+    col.children.forEach((child: any) => (child.is_visible = !allVisible));
+    const event = {
+      columns: this.columns,
+      type: 'createUpdateConfigListing',
+    }
+    this.createUpdateConfigListing.emit(event);
+    setTimeout(() => {
+      this.updateColumnWidthsAndGroups();
+      this.refreshPreviewColumns();
+      this.SetColumnsDefaultWidth();
+      this.cdr.detectChanges();
+    }, 10);
+  }
+
+  isColumnVisible(columns: any) {
+    if (columns?.children) {
+      return columns.children.every((element: any) => element.is_visible);
+    }
+
+    return columns?.is_visible;
+  }
+
+  allColumnsSelected(): boolean {
+    const flatten = this.flattenColumns(this.columns);
+    return flatten.every((col) => col.is_visible);
+  }
+
+
+  private findColumnByField(field: string, cols: any[]): any | null {
+    for (const col of cols) {
+      if (col.field === field) {
+        return col;
+      }
+      if (col.children && Array.isArray(col.children)) {
+        const found = this.findColumnByField(field, col.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+
+
+  async toggleColumnVisibility(column: any, isVisible: boolean) {
+    const col = this.findColumnByField(column.field, this.columns);
+    if (col) {
+      col.is_visible = isVisible;
+    }
+    await this.refreshHeaders();
+    this.cdr.detectChanges();
+
+    const event = {
+      columns: this.columns,
+      type: 'createUpdateConfigListing',
+    };
+    this.createUpdateConfigListing.emit(event);
+    if (this.tableFilterViewId) {
+      this.savePreset('mouseUp');
+    }
+  }
+
+
+  toggleAllColumnsVisibility(): void {
+    const flatten = this.flattenColumns(this.columns);
+    const allSelected = flatten.every((col: any) => col.is_visible);
+    flatten.forEach((col: any) => (col.is_visible = !allSelected));
+    setTimeout(() => {
+      this.updateColumnWidthsAndGroups();
+      setTimeout(() => {
+        this.refreshPreviewColumns();
+        this.cdr.detectChanges();
+      }, 100);
+    }, 100);
+  }
+
+  flattenColumns(cols: any[]): any[] {
+    return cols.reduce((acc: any[], col: any) => {
+      if (col?.children && col.children.length) {
+        // recursively flatten children
+        return acc.concat(this.flattenColumns(col.children));
+      } else {
+        // leaf column
+        return acc.concat(col);
+      }
+    }, []);
+  }
+
+
+  filteredColumns(cols: any[]): any[] {
+    const search = this.columnSearch.toLowerCase();
+    return cols
+      .map((col) => {
+        if (col.children) {
+          const filteredChildren = this.filteredColumns(col.children);
+          if (
+            col.header.toLowerCase().includes(search) ||
+            filteredChildren.length
+          ) {
+            return { ...col, children: filteredChildren };
+          }
+          return null;
+        } else {
+          return col.header.toLowerCase().includes(search) ? col : null;
+        }
+      })
+      .filter(Boolean);
+  }
+
+  get accordionState(): 'all' | 'none' | 'some' {
+    const groups = this.getAllGroupColumns(this.columns);
+    const expandedCount = groups.filter((col) => col.expanded).length;
+
+    if (expandedCount === 0) return 'none';
+    if (expandedCount === groups.length) return 'all';
+    return 'some';
+  }
+
+  get filterAccordionState(): 'all' | 'none' | 'some' {
+    const groups = this.getAllGroupColumns(this.columns);
+    const expandedCount = groups.filter((col) => col.expandedFilter).length;
+
+    if (expandedCount === 0) return 'none';
+    if (expandedCount === groups.length) return 'all';
+    return 'some';
+  }
+
+  // Recursively collect all group columns
+  private getAllGroupColumns(cols: any[]): any[] {
+    let groups: any[] = [];
+    for (const col of cols) {
+      if (col.children?.length) {
+        groups.push(col);
+        groups = groups.concat(this.getAllGroupColumns(col.children));
+      }
+    }
+    return groups;
+  }
+
+  // Toggle based on current state
+  toggleAllAccordions(): void {
+    const nextState = this.accordionState === 'all' ? false : true;
+    this.setAccordionState(this.columns, nextState);
+  }
+
+  toggleAllFilterAccordions(): void {
+    const nextState = this.filterAccordionState === 'all' ? false : true;
+    this.setFilterAccordionState(this.columns, nextState);
+  }
+
+  private setAccordionState(cols: any[], state: boolean): void {
+    for (let col of cols) {
+      if (col.children?.length) {
+        col.expanded = state;
+        this.setAccordionState(col.children, state); // Recursively handle nested
+      }
+    }
+    this.cdr.detectChanges();
+  }
+  private setFilterAccordionState(cols: any[], state: boolean): void {
+    for (let col of cols) {
+      if (col.children?.length) {
+        col.expandedFilter = state;
+        this.setFilterAccordionState(col.children, state); // Recursively handle nested
+      }
+    }
+  }
+
+  showColumnPanel = false;
+
+  closeModalColumnPanel() {
+    this.showColumnPanel = false;
+  }
+
+  @HostListener('document:keydown.escape', ['$event'])
+  onEscape(event: KeyboardEvent) {
+    this.closeModalColumnPanel();
+  }
+
+  // Check If  Any column have right pinned
+  get hasRightPinnedColumns() {
+    return this.commonSevice.gethasRightPinnedColumns(this.columns);
+  }
+
+  get hasLeftPinnedColumns() {
+    return this.commonSevice.gethasLeftPinnedColumns(this.columns);
+  }
+
+  get dataSetLength() {
+    return this.commonSevice.getExpandedRowCount(this.dataSet);
+  }
+
+
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: UIEvent) {
+    this.autosizeAllColumns();
+    const h = this.mainScroll?.nativeElement?.clientHeight ?? 0;
+    this.viewportRows = Math.max(1, Math.ceil(h / this.rowHeight));
+    this.updateVisibleRows(this.mainScroll?.nativeElement?.scrollTop);
+    this.cdr.detectChanges();
+    setTimeout(() => { }, 100);
+  }
+
+  async refreshHeaders() {
+    this.ngZone.runOutsideAngular(async () => {
+      await new Promise(r => setTimeout(r, 0));
+      await this.updateColumnWidthsAndGroups();
+      await this.refreshPreviewColumns();
+
+      this.ngZone.run(() => this.cdr.detectChanges());
+    });
+  }
+
+  get hasAnyVisibleColumn() {
+    return this.commonSevice.gethasVisibleColumns(this.columns);
+  }
+
+  get hasAnyInVisibleColumn() {
+    return this.commonSevice.gethasInVisibleColumns(this.columns);
+  }
+
+  get columnsCount() {
+    return this.commonSevice.getTotalColumnsLength(this.columns);
+  }
+
+  tableHeaderAndBodyHeight() {
+    return `calc(100% - ${this.footerRowHeight})`;
+  }
+
+  draggingInGroupArea = false;
+
+  @ViewChild('centerScroll') centerScroll!: ElementRef<HTMLDivElement>;
+  visibleRowCount = 25;
+  startIndex = 0;
+  visibleRows: any[] = [];
+
+  private flattenGroupedRows(
+    rows: any[] = [],
+    level = 0,
+    result: any[] = []
+  ): any[] {
+    for (const row of rows) {
+      result.push({ ...row, __depth: level });
+      if (row.isGroup && row.isExpand && row.children?.length) {
+        this.flattenGroupedRows(row.children, level + 1, []);
+      }
+    }
+    this.assignVirtualIndexes(this.visibleRows);
+    return result;
+  }
+
+  assignVirtualIndexes(data: any[]): any[] {
+    let currentIndex = 1;
+    const walk = (items: any[]): void => {
+      for (const item of items) {
+        item.__virtualIndex = currentIndex++;
+        if (item?.isGroup) {
+          const group = item;
+          if (group.isExpand && Array.isArray(group.children)) {
+            walk(group.children);
+          }
+        }
+      }
+    };
+    walk(data);
+    console.log('This dataset: ', this.visibleRows)
+    return data;
+  }
+
+
+  updateVisibleRows(scrollTop: number) {
+
+    if (this.groupedColumns?.length) {
+      this.visibleRows = this.dataSet;
+      return;
+    }
+    const flatData = this.flattenGroupedRows(this.dataSet);
+
+    if (this.dataSet?.length <= 15) {
+      this.visibleRows = flatData;
+      this.firstIndex = 0;
+      this.startIndex = 0;
+      this.renderStart = 0;
+      this.cdr.detectChanges();
+      return;
+    }
+    const total = flatData.length;
+    const maxFirst = Math.max(0, total - this.viewportRows);
+    const first = Math.min(Math.floor(scrollTop / this.rowHeight), maxFirst);
+    const start = Math.max(0, first);
+    const end = Math.min(total, first + this.viewportRows);
+
+    this.firstIndex = first;
+    this.startIndex = first;
+    this.renderStart = start;
+    this.visibleRows = flatData.slice(start, end);
+    this.assignVirtualIndexes(this.visibleRows);
+    this.cdr.detectChanges();
+  }
+
+
+  trackByRenderedIndex = (i: number, _row: any) => this.renderStart + i;
+
+  private isSyncingFromMain = false;
+  private isSyncingFromFake = false;
+  private mainScrollRaf: number | null = null;
+
+  trackById(index: number, item: any) {
+    return item.id || item._id;
+  }
+
+  flattenedData: any[] = [];
+
+  updateFlattenedData(): void {
+    setTimeout(() => {
+      this.flattenedData = this.flattenGroupedRows(this.dataSet);
+      this.cdr.detectChanges();
+    }, 10);
+  }
+
+  // requestAnimationFrame IDs
+  private fakeScrollRaf: number | null = null;
+
+
+  // onMainScroll(event: Event) {
+  //   this.expandedCells.clear();
+  //   const scrollTop = (event.target as HTMLElement).scrollTop;
+  //     if (this.groupedColumns?.length > 0) {
+  //       this.startIndex = 0;
+  //       this.cdr.detectChanges();
+  //       return;
+  //     }
+  //     const overscan = this.overscan * 2;
+  //     this.startIndex = Math.floor(scrollTop / this.rowHeight);
+  //     const start = Math.max(0, this.startIndex - overscan);
+  //     const end = Math.min(this.flattenedData.length, this.startIndex + this.viewportRows + overscan);
+  //     this.visibleRows = this.flattenedData.slice(start, end);
+  //     this.cdr.detectChanges();
+  // }
+  translateY = 0;
+
+  lastScrollTop = 0;
+  onMainScroll(event: Event): void {
+    this.expandedCells.clear();
+    if (this.isSyncingFromFake) {
+      this.isSyncingFromFake = false;
+      return;
+    }
+    const scrollTop = (event.target as HTMLElement).scrollTop;
+    if (Math.abs(scrollTop - this.lastScrollTop) < this.rowHeight * 3) {
+      return;
+    }
+    this.lastScrollTop = scrollTop;
+
+    if (this.fakeScrollRaf) cancelAnimationFrame(this.fakeScrollRaf);
+
+    this.fakeScrollRaf = requestAnimationFrame(() => {
+      if (this.groupedColumns?.length > 0) {
+        this.startIndex = 0;
+        this.cdr.detectChanges();
+        return;
+      }
+
+      const overscan = 15;
+      const newStartIndex = Math.floor(scrollTop / this.rowHeight);
+      const start = Math.max(0, newStartIndex - overscan);
+      const end = Math.min(
+        this.flattenedData.length,
+        newStartIndex + this.viewportRows + overscan
+      );
+
+      this.translateY = start * (this.rowHeight - 1);
+      this.startIndex = start;
+      this.visibleRows = this.dataSet.slice(start, end);
+      this.cdr.detectChanges();
+    });
+  }
+
+
+  get isScrollbarVisible(): boolean {
+    if (!this.mainScroll) return false;
+    const el = this.mainScroll.nativeElement;
+    return el.scrollHeight > el.clientHeight;
+  }
+
+  toggleExpand(row: any) {
+    if (row.details) {
+      row.isDetailsExpand = !row.isDetailsExpand;
+    } else {
+      row.isExpand = !row.isExpand;
+    }
+    this.rowSelectedIndexes.clear();
+    this.updateFlattenedData();
+    this.cdr.detectChanges();
+    // setTimeout(() => {
+    //   this.cdr.detectChanges();
+    // }, 100);
+  }
+
+  onMainFakeScroll(event: Event) {
+    if (this.isSyncingFromMain) {
+      this.isSyncingFromMain = false;
+      return;
+    }
+    if (this.groupedColumns?.length > 0) {
+      this.startIndex = 0;
+      this.cdr.detectChanges();
+      return;
+    }
+    const scrollTop = (event.target as HTMLElement).scrollTop;
+    if (this.mainScrollRaf) cancelAnimationFrame(this.mainScrollRaf);
+    this.mainScrollRaf = requestAnimationFrame(() => {
+      this.isSyncingFromFake = true;
+      this.mainScroll.nativeElement.scrollTop = scrollTop;
+      const overscan = this.overscan ?? 0;
+      this.startIndex = Math.floor(scrollTop / this.rowHeight);
+      const start = Math.max(0, this.startIndex - overscan);
+      const end = Math.min(
+        this.flattenedData.length,
+        this.startIndex + this.viewportRows + overscan
+      );
+      this.visibleRows = this.flattenedData.slice(start, end);
+      this.cdr.detectChanges();
+    });
+  }
+
+
+
+
+
+  viewportRows = 0; // how many rows fit in viewport (computed)
+  firstIndex = 0; // index of the first visible row (clamped)
+  renderStart = 0; // where the slice actually starts (firstIndex - overscan, clamped)
+
+  private scrollRaf: number | null = null;
+  private pendingScrollTop = 0;
+
+  @ViewChild('mainScroll') mainScroll!: ElementRef<HTMLDivElement>;
+  @ViewChild('fakeScroll') fakeScroll!: ElementRef<HTMLDivElement>;
+  @ViewChild('horizintalFakeScroll')
+  horizintalFakeScroll!: ElementRef<HTMLDivElement>;
+  @ViewChild('centerScrollableBody')
+  centerScrollableBody!: ElementRef<any>;
+  private overscan = 10; // buffer rows above and below
+
+  computeViewportRows() {
+    if (this.fakeScroll?.nativeElement) {
+      this.fakeScroll.nativeElement.scrollTop = 0;
+    }
+
+    if (this.mainScroll?.nativeElement) {
+      this.mainScroll.nativeElement.scrollTop = 0;
+      const h = this.mainScroll.nativeElement.clientHeight ?? 0;
+
+      // rows visible in viewport
+      const rowsInViewport = Math.max(1, Math.ceil(h / this.rowHeight));
+
+      // add buffer rows (overscan)
+      this.viewportRows = rowsInViewport + this.overscan * 2;
+
+      this.cdr.detectChanges();
+    }
+  }
+
+
+  onHorizintalFakeScroll(event: Event) {
+    const scrollLeft = (event.target as HTMLElement).scrollLeft;
+    this.centerPinnedHeader.nativeElement.scrollLeft = scrollLeft;
+    this.centerScrollableBody.nativeElement.scrollLeft = scrollLeft;
+  }
+
+  onCenterBodyScroll(event: Event) {
+    const target = event.target as HTMLElement;
+    this.horizintalFakeScroll.nativeElement.scrollLeft = target.scrollLeft;
+    if (this.centerPinnedHeader) {
+      this.centerPinnedHeader.nativeElement.scrollLeft = target.scrollLeft;
+    }
+  }
+
+  onCenterHeaderScroll(event: Event) {
+    const target = event.target as HTMLElement;
+    if (this.horizintalFakeScroll?.nativeElement) {
+      this.horizintalFakeScroll.nativeElement.scrollLeft = target.scrollLeft;
+    }
+    if (this.centerScrollableBody?.nativeElement) {
+      this.centerScrollableBody.nativeElement.scrollLeft = target.scrollLeft;
+    }
+  }
+
+  // Dragging Logic is implemented here
+  // private initialIndex: number | null = null;
+
+  draggingColumn: any;
+  dragStartIndex: any = 0;
+  // onDragStart(data: any, index: number) {
+  //   this.draggingColumn = data.column;
+  //   this.dragStartIndex = index;
+  // }
+  // onDragMove(data: any) {
+  //   const { clientX, clientY } = data.event;
+  //   const headers = Array.from(
+  //     document.querySelectorAll('.one-row-header-cells')
+  //   ) as HTMLElement[];
+
+  //   headers.forEach((headerEl, idx) => {
+  //     const rect = headerEl.getBoundingClientRect();
+  //     if (
+  //       idx !== this.dragStartIndex &&
+  //       clientX > rect.left &&
+  //       clientX < rect.right &&
+  //       clientY > rect.top &&
+  //       clientY < rect.bottom
+  //     ) {
+  //       const otherIndex = idx;
+  //       console.log(`${this.dragStartIndex} --> ${otherIndex}`);
+  //       this.swapColumn(this.dragStartIndex, otherIndex);
+  //       console.log('Updated Columns: ', this.columns);
+  //       this.dragStartIndex = otherIndex; // update index
+  //     }
+  //   });
+  // }
+
+  // swapColumn(previusIndex: number, currentIndex: number) {
+  //   const columns = structuredClone(this.columns);
+  //   const flattenColumns = this.flattenColumns(columns);
+
+  //   const visibleFlattenColumns = flattenColumns.filter(
+  //     (col) => col.is_visible
+  //   );
+  //   const previusColumn = visibleFlattenColumns[previusIndex];
+  //   const currentColumn = visibleFlattenColumns[currentIndex];
+
+  //   console.log('Previus Column: ', previusColumn);
+  //   console.log('current clumn: ', currentColumn);
+  // }
+
+  // onDragEnd(data: any) {
+  //   this.draggingColumn = null;
+  //   this.dragStartIndex = null;
+  // }
+
+  // CDK DRAG DROP LOGIC GOES HERE
+
+
+  canEnterToRowsGrouping = (drag: CdkDrag<any>, drop: CdkDropList<any>) => {
+    // Example: Block if already pinned left
+    const data = drag.data;
+    if (data?.children && data?.children.length) {
+      return data.children.some(
+        (col: any) => col.is_visible && col.isGroupable
+      );
+    }
+    return data.is_visible && data.isGroupable;
+  };
+
+  onDragMoved(event: CdkDragMove<any>) {
+    const pointerX = event.pointerPosition.x;
+    const pointerY = event.pointerPosition.y;
+
+    const targetElement = document.getElementById(
+      'rows-grouping-top-container'
+    );
+
+    if (targetElement) {
+      const rect = targetElement.getBoundingClientRect();
+
+      const isOverTarget =
+        pointerX >= rect.left &&
+        pointerX <= rect.right &&
+        pointerY >= rect.top &&
+        pointerY <= rect.bottom;
+
+      if (isOverTarget) {
+        this.draggingInGroupArea = true;
+      } else {
+        this.draggingInGroupArea = false;
+      }
+    }
+  }
+
+  enterToTopRowGrouping(dropList: CdkDragEnter<any>) {
+    const draggingData = dropList.item.data;
+    this.draggingInGroupArea = true;
+
+    if (Array.isArray(draggingData?.children)) {
+      const targetGroup = this.columns.find(
+        (col) => col.header === draggingData.header
+      );
+      if (targetGroup) {
+        draggingData.children.forEach((draggedChild: any) => {
+          const matchingChild = targetGroup.children.find(
+            (child: any) => child.field === draggedChild.field
+          );
+          if (matchingChild) {
+            matchingChild.isRowGrouped = !!matchingChild.isGroupable;
+          }
+        });
+      }
+    }
+    else {
+      // Try finding it in top-level columns first
+      let targetColumn = this.columns.find(
+        (col: any) => col.field === draggingData.field
+      );
+
+      if (targetColumn) {
+        targetColumn.isRowGrouped = !!targetColumn.isGroupable;
+      } else {
+        for (let group of this.columns) {
+          if (Array.isArray(group.children)) {
+            const matchingChild = group.children.find(
+              (child: any) => child.field === draggingData.field
+            );
+            if (matchingChild) {
+              matchingChild.isRowGrouped = !!matchingChild.isGroupable;
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    // ✅ Refresh UI
+    this.refreshPreviewColumns();
+    this.cdr.detectChanges();
+  }
+
+  onDropListEnter(
+    dropList: CdkDragEnter<any>,
+    section: 'left' | 'center' | 'right'
+  ) {
+    const draggingData = dropList.item.data;
+
+    const targetColumn: any = this.columns.find(
+      (col) => col.header == draggingData.header
+    );
+
+    if (!targetColumn) return;
+
+    if (
+      Array.isArray(draggingData?.children) &&
+      Array.isArray(targetColumn?.children)
+    ) {
+      draggingData.children.forEach((draggedChild: any) => {
+        const matchingChild = targetColumn.children.find(
+          (child: any) => child.field === draggedChild.field
+        );
+        if (matchingChild) {
+          matchingChild.pinned = section === 'center' ? null : section;
+          matchingChild['isRowGrouped'] = false;
+        }
+      });
+    } else {
+      targetColumn.pinned = section === 'center' ? null : section;
+      targetColumn['isRowGrouped'] = false;
+    }
+
+    this.refreshPreviewColumns();
+    this.cdr.detectChanges();
+  }
+
+  enterToTopGroupingRow(dropList: CdkDragEnter<any>) {
+    this.shouldDisableDroplistSorting = this.isDisableColumnGrouping;
+    this.draggingInGroupArea = true;
+    // const index = this.groupedColumns.findIndex(
+    //   (col) => col.field === column.field
+    // );
+    // if (index !== -1) {
+    //   this.groupedColumns.splice(index, 1);
+    // }
+
+    // // 2. Traverse this.columns to find and update the matching column
+    // this.columns.forEach((group) => {
+    //   if (group?.children && Array.isArray(group.children)) {
+    //     group.children.forEach((child) => {
+    //       if (child.field === column.field) {
+    //         child.isRowGrouped = false;
+    //       }
+    //     });
+    //   } else if (group.field === column.field) {
+    //     group.isRowGrouped = false;
+    //   }
+    // });
+    this.cdr.detectChanges();
+  }
+
+  exitedFromTheTopRow(dropList: CdkDragExit<any>) {
+    this.draggingInGroupArea = false;
+    this.isDisableColumnGrouping = false;
+    this.shouldDisableDroplistSorting = false;
+    const draggingData = dropList.item.data;
+    if (Array.isArray(draggingData?.children)) {
+      const targetGroup = this.columns.find(
+        (col) => col.header === draggingData.header
+      );
+      if (targetGroup) {
+        draggingData.children.forEach((draggedChild: any) => {
+          const matchingChild = targetGroup.children.find(
+            (child: any) => child.field === draggedChild.field
+          );
+          if (matchingChild) {
+            matchingChild.isRowGrouped = false;
+          }
+        });
+      }
+    } else {
+      let targetColumn = this.columns.find(
+        (col: any) => col.field === draggingData.field
+      );
+
+      if (targetColumn) {
+        targetColumn.isRowGrouped = false;
+      } else {
+        for (let group of this.columns) {
+          if (Array.isArray(group.children)) {
+            const matchingChild = group.children.find(
+              (child: any) => child.field === draggingData.field
+            );
+            if (matchingChild) {
+              matchingChild.isRowGrouped = false;
+              break;
+            }
+          }
+        }
+      }
+    }
+    this.refreshPreviewColumns();
+    this.cdr.detectChanges();
+  }
+
+  shouldDisableDroplistSorting = false;
+  isDisableColumnGrouping = false;
+  checkColumnGroupingStatus(col: any) {
+    if (col?.children && Array.isArray(col.children)) {
+      const allChildrenDisabled = col.children.every(
+        (child: any) => child.isGroupable === false
+      );
+      this.isDisableColumnGrouping = allChildrenDisabled;
+    } else {
+      this.isDisableColumnGrouping = col.isGroupable === false;
+    }
+    this.cdr.detectChanges();
+  }
+
+  currentDraggingColumn: any = null;
+  dragStartOnGroup(col: any) {
+    this.currentDraggingColumn = col;
+  }
+
+  onSortGroup = async (event: CdkDragSortEvent<any>, section: string) => {
+    const columns = (this as any)[section];
+    if (event.previousIndex === event.currentIndex) return;
+    const visibleColumns = columns.filter((col: any) => {
+      if (col?.children && Array.isArray(col.children)) {
+        return col.children.some((child: any) => child.is_visible);
+      }
+      return col.is_visible;
+    });
+    const previousHeader = visibleColumns[event.previousIndex].header;
+    const currentHeader = visibleColumns[event.currentIndex].header;
+    const visiblePrevIndex = visibleColumns.findIndex(
+      (col: any) => col.header === previousHeader
+    );
+    const visibleCurrIndex = visibleColumns.findIndex(
+      (col: any) => col.header === currentHeader
+    );
+    const getFields = (item: any): string[] => {
+      if (item?.children && Array.isArray(item.children)) {
+        return item.children.map((child: any) => child.field);
+      }
+      return [item.field];
+    };
+    const prevFields = getFields(visibleColumns[visiblePrevIndex]);
+    const currFields = getFields(visibleColumns[visibleCurrIndex]);
+    const allFields = [...prevFields, ...currFields];
+    const cells = allFields.length
+      ? ([] as HTMLElement[]).concat(
+        ...allFields.map((field) =>
+          Array.from(document.querySelectorAll(`[field="${field}"]`)) as HTMLElement[]
+        )
+      )
+      : [];
+    const firstPositions = new Map<HTMLElement, number>();
+    cells.forEach((el) => firstPositions.set(el, el.getBoundingClientRect().left));
+    console.log("this .coluns", this.columns);
+    moveItemInArray((this as any)[section], visiblePrevIndex, visibleCurrIndex);
+
+    const prevColIndexInColumns = this.columns.findIndex(item => item.header === previousHeader);
+    const currColIndexInColumns = this.columns.findIndex(item => item.header === currentHeader);
+    moveItemInArray(this.columns, prevColIndexInColumns, currColIndexInColumns);
+    // await this.refreshPreviewColumns();
+    this.cdr.detectChanges();
+    allFields.forEach((field) => {
+      const updatedCells = Array.from(
+        document.querySelectorAll(`[field="${field}"]`)
+      ) as HTMLElement[];
+
+      updatedCells.forEach((el) => {
+        const newLeft = el.getBoundingClientRect().left;
+        const oldLeft = firstPositions.get(el)!;
+        const deltaX = oldLeft - newLeft;
+        if (deltaX !== 0) {
+          el.style.willChange = 'transform';
+          el.style.transition = 'none';
+          el.style.transform = `translateX(${deltaX}px)`;
+          void el.offsetWidth;
+          el.style.transition = 'transform 400ms cubic-bezier(0.4, 0, 0.2, 1)';
+          el.style.transform = 'translateX(0)';
+          const handle = () => {
+            el.style.transition = '';
+            el.style.transform = '';
+            el.style.willChange = '';
+            el.removeEventListener('transitionend', handle);
+          };
+          el.addEventListener('transitionend', handle);
+        }
+      });
+    });
+  }
+
+
+  onDropGroup() {
+    this.leftPinnedColumns = structuredClone(this.previewLeftPinnedColumns);
+    this.centerColumns = structuredClone(this.previewCenterColumns);
+    this.rightPinnedColumns = structuredClone(this.previewRightPinnedColumns);
+    const event = {
+      columns: this.columns,
+      type: 'createUpdateConfigListing',
+    }
+    this.createUpdateConfigListing.emit(event);
+
+    this.cdr.detectChanges();
+  }
+
+  async onDropTopGroup(event: CdkDragDrop<any>) {
+    this.loading = true;
+    this.cdr.detectChanges();
+    const draggedData = event.item.data;
+    if (draggedData?.children && Array.isArray(draggedData.children)) {
+      draggedData.children.forEach((col: any) => {
+        if (col.is_visible && col.isGroupable) {
+          this.groupedColumns.push(col);
+        }
+      });
+    } else {
+      if (draggedData.is_visible && draggedData.isGroupable) {
+        this.groupedColumns.push(draggedData);
+      }
+    }
+    this.draggingInGroupArea = false;
+    const fields = this.groupedColumns.map((item) => item.field);
+    this.dataSet = await this.groupDataAsync(this.originalDataSet, fields);
+    setTimeout(() => {
+      this.updateColumnWidthsAndGroups();
+      this.refreshPreviewColumns();
+      this.updateVisibleRows(0);
+      this.loading = false;
+      this.cdr.detectChanges();
+    }, 100);
+  }
+
+  async ungroupColumn(column: any) {
+    try {
+      this.loading = true;
+      this.cdr.detectChanges();
+      const index = this.groupedColumns.findIndex(
+        (col) => col.field === column.field
+      );
+      if (index !== -1) {
+        this.groupedColumns.splice(index, 1);
+      }
+      const fields = this.groupedColumns.map((item) => item.field);
+      this.dataSet = await this.groupDataAsync(this.originalDataSet, fields);
+      this.columns.forEach((group) => {
+        if (group?.children && Array.isArray(group.children)) {
+          group.children.forEach((child: any) => {
+            if (child.field === column.field) {
+              child.isRowGrouped = false;
+            }
+          });
+        } else if (group.field === column.field) {
+          group.isRowGrouped = false;
+        }
+      });
+      setTimeout(() => {
+        this.updateFlattenedData();
+        this.updateColumnWidthsAndGroups();
+        this.refreshPreviewColumns();
+        this.updateVisibleRows(0);
+        this.loading = false;
+        this.cdr.detectChanges();
+      }, 100);
+
+    } catch (err) {
+      console.error("Error in ungroupColumn:", err);
+      this.loading = false;
+      this.cdr.detectChanges();
+    }
+  }
+
+
+  shouldTheGroupHeaderShow(group: any) {
+    if (group?.children && group.children.length) {
+      return group.children.some(
+        (col: any) => col.is_visible && !col?.isRowGrouped
+      );
+    }
+    return group?.is_visible && !group?.isRowGrouped;
+  }
+
+
+  onChildDragStart() {
+    debugger;
+  }
+
+  dropListIds: string[] = [];
+
+  generateDropListIds() {
+    this.dropListIds = [];
+
+    const sectionKeys = [
+      'leftPinnedColumns',
+      'centerColumns',
+      'rightPinnedColumns',
+    ];
+
+    sectionKeys.forEach((sectionKey) => {
+      const sectionCols = (this as any)[sectionKey];
+
+      this.columns.forEach((col: any, i: number) => {
+        if (col?.children?.length > 0) {
+          col.children.forEach((child: any, childIndex: number) => {
+            if (child?.is_visible && !child.isRowGrouped) {
+              const id = `${sectionKey}${i}`;
+              this.dropListIds.push(id);
+            }
+          });
+        } else if (col?.is_visible && !col.isRowGrouped) {
+          const id = `${sectionKey}${i}`;
+          this.dropListIds.push(id);
+        }
+      });
+    });
+  }
+
+  onChildDroplistSorted = async (event: CdkDragSortEvent<any>, section: string) => {
+    if (event.previousIndex === event.currentIndex) return;
+
+    const pinned =
+      section == 'previewLeftPinnedColumns'
+        ? 'left'
+        : section == 'previewRightPinnedColumns'
+          ? 'right'
+          : "";
+
+    const column = event.item.data;
+    let group = this.columns.find(
+      (col: any) =>
+        Array.isArray(col.children) &&
+        col.children.some((child: any) => child?.field === column?.field)
+    );
+    const groupIndex = this.columns.findIndex(
+      (col) => col.header === group.header
+    );
+    const filteredGroup = group?.children.filter((col: any) => {
+      const isPinnedMatch =
+        (pinned === "" && (!col?.pinned || col?.pinned === "")) || col?.pinned === pinned;
+      return isPinnedMatch && col?.is_visible;
+    });
+
+    const previousField = filteredGroup[event.previousIndex].field;
+    const currentField = filteredGroup[event.currentIndex].field;
+    const visiblePrevIndex = group.children.findIndex(
+      (col: any) => col.field == previousField
+    );
+    const visibleCurrIndex = group.children.findIndex(
+      (col: any) => col.field == currentField
+    );
+    const allFields = [previousField, currentField];
+    const cells = allFields.length
+      ? ([] as HTMLElement[]).concat(
+        ...allFields.map((field) =>
+          Array.from(document.querySelectorAll(`[field="${field}"]`)) as HTMLElement[]
+        )
+      )
+      : [];
+
+    const groupInSection = (this as any)[section].find(
+      (col: any) =>
+        Array.isArray(col.children) &&
+        col.children.some((child: any) => child?.field === column?.field)
+    );
+
+    const filterGroupInSection = (this as any)[section].find(
+      (col: any) =>
+        Array.isArray(col.children) &&
+        col.children.some((child: any) => child?.field === column?.field)
+    );
+
+    const groupInSectionIndex = (this as any)[section].findIndex(
+      (col: any) => col.header === groupInSection.header
+    );
+
+    const firstPositions = new Map<HTMLElement, number>();
+    cells.forEach((el) => firstPositions.set(el, el.getBoundingClientRect().left));
+    moveItemInArray(
+      this.columns[groupIndex]?.children,
+      visiblePrevIndex,
+      visibleCurrIndex
+    );
+
+    moveItemInArray(
+      (this as any)[section]?.[groupInSectionIndex].children,
+      event.previousIndex,
+      event.currentIndex
+    );
+
+    // await this.refreshPreviewColumns();
+    this.cdr.detectChanges();
+    allFields.forEach((field) => {
+      const updatedCells = Array.from(
+        document.querySelectorAll(`[field="${field}"]`)
+      ) as HTMLElement[];
+      updatedCells.forEach((el) => {
+        const newLeft = el.getBoundingClientRect().left;
+        const oldLeft = firstPositions.get(el)!;
+        const deltaX = oldLeft - newLeft;
+        if (deltaX !== 0) {
+          el.style.willChange = 'transform';
+          el.style.transition = 'none';
+          el.style.transform = `translateX(${deltaX}px)`;
+          void el.offsetWidth;
+          el.style.transition = 'transform 400ms cubic-bezier(0.4, 0, 0.2, 1)';
+          el.style.transform = 'translateX(0)';
+
+          const handle = () => {
+            el.style.transition = '';
+            el.style.transform = '';
+            el.style.willChange = '';
+            el.removeEventListener('transitionend', handle);
+          };
+          el.addEventListener('transitionend', handle);
+        }
+      });
+    });
+    console.group('Group: ', group);
+  }
+
+
+  onChildDroplistDroped(cdkDragDropevent: CdkDragDrop<any>) {
+    this.updateColumnWidthsAndGroups();
+    const event = {
+      columns: this.columns,
+      type: 'createUpdateConfigListing',
+    }
+    this.createUpdateConfigListing.emit(event);
+
+    setTimeout(() => {
+      this.cdr.detectChanges();
+    }, 2);
+  }
+
+  // Rows Grouping Logic Goes Here
+
+  groupData(data: any[], groupFields: string[]): any[] {
+    let dataSet = structuredClone(data);
+    if (!groupFields.length) return data;
+    const [currentField, ...restFields] = groupFields;
+    const groupedMap = new Map<string, any[]>();
+    for (const item of dataSet) {
+      let keyValue = currentField.split('.').reduce((obj, k) => obj?.[k], item);
+      let groupKey: string;
+      if (Array.isArray(keyValue)) {
+        if (keyValue.length === 0) {
+          groupKey = "_Blank";
+        } else if (typeof keyValue[0] === "object") {
+          groupKey = keyValue
+            .map(obj => (obj?.department_name || obj.roleName) ?? "_Blank")
+            .join(",");
+        } else {
+          groupKey = keyValue
+            .map(val => val ?? "_Blank")
+            .join(",");
+        }
+      } else {
+        groupKey = keyValue ?? "_Blank";
+      }
+      if (!groupedMap.has(groupKey)) groupedMap.set(groupKey, []);
+      groupedMap.get(groupKey)!.push(item);
+    }
+    return Array.from(groupedMap.entries()).map(([groupValue, groupItems]) => ({
+      isGroup: true,
+      groupField: currentField,
+      groupValue,
+      children: this.groupData(groupItems, restFields),
+      isExpand: false,
+    }));
+  }
+
+
+  countLeafRows(group: any): number {
+    if (!group.children || !group.children.length) return 0;
+
+    return group.children.reduce((count: number, child: any) => {
+      return count + (child.isGroup ? this.countLeafRows(child) : 1);
+    }, 0);
+  }
+
+  isActiveFilterOpen = false;
+  toggleActiveFilter() {
+    this.isActiveFilterOpen = !this.isActiveFilterOpen;
+  }
+
+  toggleActions(type: string) {
+    if (type === this.activeTopButton) this.activeTopButton = type;
+    else this.activeTopButton = type;
+    this.activeSubButton = '';
+    this.isFilterOpen = false;
+    this.cdr.detectChanges();
+  }
+
+  activeSubButton = '';
+  toggleSubActions(type: string) {
+    if (type === this.activeSubButton) this.activeSubButton = '';
+    else this.activeSubButton = type;
+    this.cdr.detectChanges();
+  }
+
+  toggleActionsDropdown() {
+    this.showActionsDropDown = !this.showActionsDropDown;
+    this.cdr.detectChanges();
+  }
+
+
+
+  async changeTableLayout(event: Event, layoutType: string) {
+    let target = event.target as HTMLInputElement;
+
+    if (target.checked) {
+      this.selectedTableLayout = layoutType;
+      if (layoutType === 'small') {
+        this.rowHeight = 36;
+        this.headerRowHeight = 40;
+        this.bodyTextFontsSize = 10;
+        this.headerTextFontsSize = 10;
+
+      } else if (layoutType === 'medium') {
+        this.rowHeight = 44;
+        this.headerRowHeight = 44;
+        this.bodyTextFontsSize = 14;
+        this.headerTextFontsSize = 14;
+
+      } else {
+        this.rowHeight = 60;
+        this.headerRowHeight = 52;
+        this.bodyTextFontsSize = 16;
+        this.headerTextFontsSize = 16;
+      }
+      this.updateVisibleRows(this.mainScroll?.nativeElement?.scrollTop);
+      await this.refreshHeaders();
+    }
+    if (this.tableFilterViewId) {
+      this.savePreset('mouseUp');
+    }
+    this.onFontChange()
+  }
+
+
+  pageSizeOptions = [25, 50, 75, 100, 150, 200, 250, 300, 500];
+  get startIndexData() {
+    return (this.paginationConfig.page - 1) * this.paginationConfig.limit;
+  }
+
+  get endIndex() {
+    return Math.min(this.startIndex + this.paginationConfig.limit, this.paginationConfig.totalResults);
+  }
+
+  get visiblePages(): (number | string)[] {
+    const pages: (number | string)[] = [];
+
+    if (this.paginationConfig.totalPages <= 7) {
+      for (let i = 1; i <= this.paginationConfig.totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      if (this.paginationConfig.page > 3) {
+        pages.push('...');
+      }
+      let start = Math.max(2, this.paginationConfig.page - 1);
+      let end = Math.min(this.paginationConfig.totalPages - 1, this.paginationConfig.page + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (this.paginationConfig.page < this.paginationConfig.totalPages - 2) {
+        pages.push('...');
+      }
+      pages.push(this.paginationConfig.totalPages);
+    }
+
+    return pages;
+  }
+
+
+  searchTextForFilterDropDown = '';
+  toggleColumnInFilterDropdown(col: any) {
+
+  }
+
+  removeColumnFromFilter(option: any) {
+
+  }
+
+  handleBackspace(event: Event) {
+    // If search is empty, remove last tag
+    if (!this.searchTextForFilterDropDown && this.selectedFilterOptions.length) {
+      const last = this.selectedFilterOptions[this.selectedFilterOptions.length - 1];
+      this.toggleSelectionInFilter(last);
+    }
+  }
+
+  @ViewChild('filterMenueSearchInput') filterMenueSearchInput!: ElementRef<HTMLInputElement>
+  @ViewChild('filterMenueTextchInput') filterMenueTextchInput!: ElementRef<HTMLInputElement>
+
+  openFilteronThreeDotsClick(col: any) {
+    if (col.type == 'image') return;
+    this.selectedColumnForFilter = col;
+    this.isThreeDotsFilterOpen = true;
+    if (col.type === 'dropdown') {
+      this.currentFilterSelectedIds.clear();
+      const savedIds = col?.query?._ids || [];
+      savedIds.forEach((id: string) => this.currentFilterSelectedIds.add(id));
+
+      this.selectedFilterOptions = this.selectedColumnForFilter?.column_dropdown_value.filter(
+        (option: any) => this.currentFilterSelectedIds.has(option?.id || option?._id || option)
+      );
+      setTimeout(() => {
+        this.filterMenueSearchInput.nativeElement.focus();
+      }, 100);
+    } else if (['string', 'number', 'date'].includes(col.type)) {
+      this.firstCondition = col.type == 'date' ? 'equal' : 'contain';
+      this.firstValue = col?.query?.first_value || '';
+      this.condition = col?.query?.condition || 'none';
+      this.secondCondition = (col?.query?.second_condition) || (col.type == 'date' ? 'equal' : 'contain');
+      this.secondValue = col?.query?.second_value || '';
+      setTimeout(() => {
+        this.filterMenueTextchInput.nativeElement.focus();
+      }, 100);
+    }
+  }
+
+  isFilterOpen = false
+  selectedColumnForFilter: any;
+  showFilters = this.showSideMenu ? false : false;
+
+  openFilter(col: any) {
+    this.activeFilterCell = col;
+    this.activeCol = null
+    this.isFilterOpen = true;
+    this.selectedColumnForFilter = col;
+
+    if (col.type === 'dropdown') {
+      this.currentFilterSelectedIds.clear();
+      const savedIds = col?.query?._ids || [];
+      savedIds.forEach((id: string) => this.currentFilterSelectedIds.add(id));
+
+      this.selectedFilterOptions = this.selectedColumnForFilter?.column_dropdown_value?.filter(
+        (option: any) => this.currentFilterSelectedIds.has(option?.id || option?._id || option)
+      );
+    } else if (['string', 'number', 'date'].includes(col.type)) {
+      this.firstCondition = col.type == 'date' ? 'equal' : 'contain';
+      this.firstValue = col?.query?.first_value || '';
+      this.condition = col?.query?.condition || 'none';
+      this.secondCondition = col?.query?.second_condition || 'contain';
+      this.secondValue = col?.query?.second_value || '';
+    }
+    this.cdr.detectChanges();
+  }
+
+
+  firstValue: any = '';
+  firstCondition = '';
+  secondValue: any = '';
+  secondCondition = '';
+  condition = '';
+
+  resetTextFilterChanges() {
+    this.firstCondition = 'contain';
+    this.firstValue = '';
+    this.condition = 'none';
+    this.secondCondition = '';
+    this.secondValue = '';
+    this.isFilterOpen = false;
+    this.isActiveFilterOpen = false;
+    this.activeTopButton = '';
+  }
+
+  toggleAllValusSelectionInDropdownFilter(column: any) {
+
+  }
+
+
+  selectedFilterOptions: any[] = []
+
+  currentFilterSelectedIds = new Set<string>();
+
+  toggleSelectionInFilter(option: any) {
+    debugger
+    const id = option.id || option._id || option;
+    if (this.currentFilterSelectedIds.has(id)) {
+      this.currentFilterSelectedIds.delete(id);
+    } else {
+      this.currentFilterSelectedIds.add(id);
+    }
+    this.selectedFilterOptions = this.selectedColumnForFilter?.column_dropdown_value.filter((option: any) => this.currentFilterSelectedIds.has(option.id || option._id || option))
+    this.cdr.detectChanges();
+  }
+
+  resetFilterChanges() {
+    this.isFilterOpen = false;
+    this.currentFilterSelectedIds.clear();
+    this.selectedFilterOptions!.length = 0;
+    this.isActiveFilterOpen = false;
+    this.activeTopButton = '';
+    // const filteredColumns = this.commonSevice.getFiltersFromColumns(this.columns);
+    // console.log("Filtered Columns Are: ", filteredColumns);
+  }
+
+  applyDropdownFilter() {
+    const findColumn = (columns: any[], field: string): any => {
+      for (const col of columns) {
+        if (col.field === field) return col;
+        if (col.children && col.children.length) {
+          const found = findColumn(col.children, field);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const column = findColumn(this.columns, this.selectedColumnForFilter.field);
+    if (column) {
+      if (column.type === 'dropdown') {
+        column.query = column.query || {};
+        column.query._ids = column.query._ids || [];
+
+        // Remove stale IDs (not present in Set)
+        column.query._ids = column.query._ids.filter(
+          (id: any) => this.currentFilterSelectedIds.has(id)   // <-- use .has()
+        );
+
+        // Add new ones if missing
+        this.currentFilterSelectedIds.forEach(id => {
+          if (!column.query._ids.includes(id)) {
+            column.query._ids.push(id);
+          }
+        });
+
+      } else if (['string', 'number', 'date'].includes(column.type)) {
+        column.query = {
+          first_condition: this.firstCondition || 'contain',
+          first_value: this.firstValue || null,
+          condition: this.condition || 'none',
+          second_condition: this.secondCondition || null,
+          second_value: this.secondValue || null,
+        };
+      }
+    }
+
+    const filter = {
+      field: column.field,
+      search: column.search,
+      query: column.query,
+      type: column.type,
+      _ids: column._ids
+    };
+
+    this.filtersConfig.push(filter);
+
+    this.isFilterOpen = false;
+    this.isActiveFilterOpen = false;
+    this.activeTopButton = '';
+    this.activeFilterCell = null;
+    this.isThreeDotsFilterOpen = false;
+
+    const filteredColumns = this.commonSevice.getFiltersFromColumns(this.columns, this.filtersConfig);
+    this.filterOptions.emit(filteredColumns);
+  }
+
+  // applyFilterFromFilterRow(column: any) {
+  //   const filter = {
+  //     field: column.field,
+  //     search: column.search,
+  //     query: column.query,
+  //     type: column.type,
+  //     _ids: column._ids
+  //   };
+  //   this.filtersConfig.push(filter);
+  //   this.isFilterOpen = false;
+  //   this.isActiveFilterOpen = false;
+  //   this.activeTopButton = '';
+  //   this.activeFilterCell = null;
+  //   this.isThreeDotsFilterOpen = false;
+  //   const filteredColumns = this.commonSevice.getFiltersFromColumns(this.columns, this.filtersConfig);
+  //   this.filterOptions.emit(filteredColumns);
+  // }
+
+  isFilterAppliedOnColumn(column: any) {
+    return this.filtersConfig.some(col => col.field === column.field);
+  }
+
+  // Side Filters Logic is here
+
+  toggleSelectAllSideFilters(col: any, event: Event) {
+    const checked = (event?.target as HTMLInputElement)?.checked;
+
+    if (checked) {
+      col.query._ids = col.column_dropdown_value.map(
+        (opt: any) => opt.id || opt._id || opt
+      );
+      this.currentFilterSelectedIds = new Set<string>(col.query._ids);
+    } else {
+      col.query._ids = [];
+      this.currentFilterSelectedIds.clear();
+    }
+  }
+
+
+  isAllSideFilterOptionsSelected(col: any): boolean {
+    if (!col?.query?._ids || !Array.isArray(col.column_dropdown_value)) return false;
+    return col.query._ids.length === col.column_dropdown_value.length;
+  }
+
+  onOptionToggle(col: any, option: any) {
+    const optionId = option.id || option._id || option;
+    if (!col.query._ids) {
+      col.query._ids = [];
+    }
+    const idx = col.query._ids.indexOf(optionId);
+    if (idx > -1) {
+      col.query._ids.splice(idx, 1);
+    } else {
+      col.query._ids.push(optionId);
+    }
+    this.cdr.detectChanges();
+  }
+
+
+
+
+  resetSideFilter(col: any) {
+    const resetColumnRecursively = (columns: any[]): boolean => {
+      for (const column of columns) {
+        if (column.field === col.field) {
+          column.query = {
+            _ids: [],
+            first_condition: 'contain',
+            first_value: null,
+            condition: 'none',
+            second_condition: 'contain',
+            second_value: null
+          };
+          return true;
+        }
+        if (Array.isArray(column?.children) && column?.children?.length) {
+          if (resetColumnRecursively(column.children)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    resetColumnRecursively(this.columns);
+    this.activeFilterCell = null;
+    this.cdr.detectChanges();
+    const filteredColumns = this.commonSevice.getFiltersFromColumns(this.columns, this.filtersConfig);
+    this.filterOptions.emit(filteredColumns);
+  }
+
+
+  clearAllFilters() {
+    this.tableView?.forEach((ele) => { ele.is_temp = false });
+    const resetAllRecursively = (columns: any[]) => {
+      for (const column of columns) {
+        if (column.query) {
+          column.query = {
+            _ids: [],
+            first_condition: 'contain',
+            first_value: null,
+            condition: 'none',
+            second_condition: 'contain',
+            second_value: null
+          };
+        }
+        if (Array.isArray(column?.children) && column.children.length) {
+          resetAllRecursively(column.children);
+        }
+      }
+    };
+    resetAllRecursively(this.columns);
+    this.activeFilterCell = null;
+    this.refreshPreviewColumns();
+    this.cdr.detectChanges();
+    const event = { eventType: 'reset' };
+    this.genericEvent.emit(event)
+  }
+
+
+  applySideFilter() {
+    const filteredColumns = this.commonSevice.getFiltersFromColumns(this.columns, this.filtersConfig);
+    this.filterOptions.emit(filteredColumns);
+  }
+
+
+  trackByField(index: number, col: any): string {
+    return col?.field;
+  }
+
+  get activeFilteredColumns(): any[] {
+    const collectFiltered = (columns: any[]): any[] => {
+      let result: any[] = [];
+
+      columns.forEach(col => {
+        if (col.children && col.children.length) {
+          result = result.concat(collectFiltered(col.children));
+        }
+
+        if (col.query) {
+          const hasDropdownFilter =
+            Array.isArray(col.query._ids) && col.query._ids.length > 0 && this.filtersConfig.some((ele) => ele.field == col.field);
+
+          const hasValueFilter =
+            col.query.first_value !== null && col.query.first_value !== undefined && col.query.first_value !== '' && this.filtersConfig.some((ele) => ele.field == col.field);
+
+          if (hasDropdownFilter || hasValueFilter) {
+            result.push(col);
+          }
+        }
+      });
+
+      return result;
+    };
+    return [...collectFiltered(this.columns)];
+  }
+
+
+
+  toggleOpenFilter() {
+    this.showFilters = !this.showFilters;
+    this.cdr.detectChanges();
+  }
+
+
+
+
+  // Cell Editing Work start here
+
+  editingKey: string | null = null;
+  activeCell: string | null = null;
+
+  setActiveCell(row: any, column: any) {
+    this.activeCell = ((row.id || row._id) + '-' + column.field);
+    this.cdr.detectChanges();
+  }
+
+  isActiveCell(row: any, col: any): boolean {
+    return this.activeCell === ((row.id || row._id) + '-' + col.field);
+  }
+
+  enableEdit(row: any, column: any) {
+    this.editinDropdownSearch = '';
+    if (row?.__virtualIndex == 0) return;
+    if (column.type == 'image' || !column?.is_editable) return;
+    this.editingKey = ((row.id || row._id) + '-' + column.field);
+
+    if (column.type === 'dropdown') {
+      setTimeout(() => {
+        const dropdownMenu = document.querySelector('.cell-editing-dropdown-menu') as HTMLElement;
+        if (dropdownMenu) {
+          const rect = dropdownMenu.getBoundingClientRect();
+          const windowHeight = this.dataGridContainer.nativeElement?.offsetHeight;
+
+          if (rect.bottom > windowHeight) {
+            dropdownMenu.style.top = `-${rect.height}px`;
+          } else {
+            dropdownMenu.style.top = '100%';
+          }
+        }
+      });
+    }
+
+    this.cdr.detectChanges();
+  }
+
+
+  disableEdit(row: any, column: any, control?: any) {
+    this.rowSelectedIndexes.clear();
+    if (!this.editingKey) return
+    this.checkRowEditAndEmitValue(row, column, row[column.field])
+    this.editingKey = null;
+    this.cdr.detectChanges();
+    const current = this.getNestedValue(row, column?.field);
+    if (!current || (column.type == 'email' && !this.validateEmail(current))) {
+      const originalRow = this.originalDataSet.find(item => item.id == row.id || item.id == row._id);
+      const original = this.getNestedValue(originalRow, column?.field);
+      this.setNestedValue(row, column, original);
+      this.cdr.detectChanges();
+    }
+  }
+
+  emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  validateEmail(value: string): boolean {
+    return this.emailRegex.test(value);
+  }
+  allowOnlyNumbers(event: KeyboardEvent) {
+    const charCode = event.which ? event.which : event.keyCode;
+    if (charCode < 48 || charCode > 57) {
+      event.preventDefault();
+    }
+  }
+
+  checkRowEditAndEmitValue(row: any, column: any, value?: any) {
+    // setTimeout(() => {
+    const originalRow = this.originalDataSet?.find(
+      (r: any) => r.id === row.id || r._id === row._id
+    );
+    if (!originalRow) return;
+    // const clean = (obj: any) => JSON.parse(JSON.stringify(obj));
+    // const currentValue = this.getNestedValue(row, column.field);
+    // const originalValue = this.getNestedValue(originalRow, column.field);
+    const originValue = this.dataSet.find((r: any) => r.id === row.id);
+    const changedValue = originValue.verified == value;
+    // if (changedValue) return;
+    // const hasChanged = this.commonSevice.hasFieldChanged(currentValue, originalValue, column.type);
+    // if (!hasChanged) return;
+    // this.setNestedValue(originalRow, column, value);
+
+    const sendObj = {
+      data: { ...originValue },
+      eventType: 'onCellEdit',
+      value: value,
+      column: column
+    };
+    return this.genericEvent.emit(sendObj)
+    // }, 100);
+  }
+
+
+  isEditing(row: any, col: any): boolean {
+    return this.editingKey === ((row.id || row._id) + '-' + col.field);
+  }
+
+  setNestedValue(obj: any, column: any, option: any, calledFromInput = false): void {
+    const path = column.field;
+    const keys = path.split('.');
+    const lastKey = keys.pop();
+    const parent = keys.reduce((acc: { [x: string]: {}; }, key: string | number) => acc[key] ??= {}, obj);
+
+    if (parent && lastKey) {
+      if (typeof option === 'object' && option !== null) {
+        // case: dropdown object {id, value}
+        parent.id = option.id;
+        parent[lastKey] = option.value;
+      } else {
+        // case: plain string or number
+        parent[lastKey] = option;
+      }
+    }
+
+    const sendObj = {
+      data: { ...obj },
+      eventType: 'onCellEdit',
+    };
+
+    if (calledFromInput) {
+      this.checkRowEditAndEmitValue(obj, column, option);
+    }
+    this.cdr.detectChanges();
+  }
+
+
+
+
+
+
+  goToPage(page: any) {
+    if (page < 1 || page > this.paginationConfig.totalPages) return;
+    this.paginationConfig.page = page;
+    const event = {
+      obj: {
+        limit: this.paginationConfig.limit,
+        page: page,
+      },
+      eventType: 'pageChange',
+    };
+    this.genericEvent.emit(event)
+  }
+
+  onPageSizeChange() {
+    this.paginationConfig.page = 1;
+    const event = {
+      obj: {
+        limit: this.paginationConfig.limit,
+        page: this.paginationConfig.page,
+      },
+      eventType: 'pageChange',
+    };
+    this.genericEvent.emit(event)
+  }
+
+  actionPreset(data: any, type: any) {
+    this.tableView?.forEach((ele) => { ele.is_temp = false });
+    const event = {
+      obj: {
+        data: data
+      },
+      eventType: type
+    }
+    this.genericEvent.emit(event)
+  }
+
+  selectFilter(data: any) {
+    this.tableView?.forEach((ele) => { ele.is_temp = false });
+    this.tableView = this.tableView.map(item => ({
+      ...item,
+      is_temp: item.id == data?.id
+    }));
+    if (data?.is_deafult) {
+      return this.actionPreset(data, 'setPreset')
+    }
+    const event = {
+      obj: {
+        data: data
+      },
+      eventType: 'select'
+    }
+    this.genericEvent.emit(event)
+  }
+
+  savePreset(control?: any) {
+    if (control?.invalid) {
+      control?.control.markAsTouched();
+      return;
+    }
+    this.presetFilter = this.tableFilterViewId ? true : this.presetFilter;
+    let selectedData: any = this.tableView.find((ele) => ele.id == this.tableFilterViewId);
+    let config = {
+      fontFaimly: this.fontFaimly,
+      bodyTextFontsSize: this.bodyTextFontsSize,
+      headerTextFontsSize: this.headerTextFontsSize,
+      oddRowsBackgroundColor: this.rowShadingEnabled ? this.oddRowsBackgroundColor : undefined,
+      showVerticalBorder: this.showVerticalBorder,
+      selectedTableLayout: this.selectedTableLayout,
+      globalSearch: this.tableSearch
+
+    }
+    const event = {
+      obj: {
+        name: this.tableFilterViewId ? selectedData?.name : this.presetName,
+        activeFilters: this.presetFilter,
+        columns: this.columns,
+        filters: this.presetFilter ? this.filtersConfig : [],
+        config: config,
+        id: this.tableFilterViewId,
+        loadingCall: control == 'mouseUp' ? false : true
+      },
+      eventType: this.tableFilterViewId ? 'updatePreset' : 'createPreset'
+    }
+    this.genericEvent.emit(event)
+  }
+
+
+  toggleRowShading() {
+    this.oddRowsBackgroundColor = this.rowShadingEnabled ? '#f1f1f1' : undefined;
+    this.onFontChange();
+  }
+
+  trackByTable(index: number): number {
+    return index;
+  }
+  activeRow: any
+  activeRowCol: any;
+
+  // Track expanded cells as a Set of unique row+col identifiers
+
+  getCellKey(row: any, col: any): string {
+    return `${this.getRowId(row)}_${col?.field}`;
+  }
+
+  expandedCells = new Map<string, number>();
+  private zCounter = 21;
+
+  toggleExpandOfLongCellText(
+    row: any,
+    col: any,
+    columns: any[],
+    expandWholeRow = false
+  ) {
+    const expandCells = (targetRow: any) => {
+      columns.forEach(c => {
+        if (c.type === 'image') return;
+        const text = targetRow[c.field];
+        if (typeof text === 'string' && text.length > 50) {
+          const key = this.getRowId(targetRow) + '-' + c.field;
+          this.zCounter++;
+          this.expandedCells.set(key, this.zCounter);
+        }
+      });
+    };
+
+    const collectKeysForRow = (targetRow: any) => {
+      const keys: string[] = [];
+      columns.forEach(c => {
+        if (c.type === 'image') return;
+
+        const text = targetRow[c.field];
+        if (typeof text === 'string' && text.length > 50) {
+          keys.push(this.getRowId(targetRow) + '-' + c.field);
+        }
+      });
+      return keys;
+    };
+
+    if (expandWholeRow) {
+      let rowKeys: string[] = [];
+      if (Array.isArray(row.children) && row.children.length > 0) {
+        rowKeys = collectKeysForRow(row);
+        row.children.forEach((child: any) => {
+          rowKeys.push(...collectKeysForRow(child));
+        });
+      } else {
+        rowKeys = collectKeysForRow(row);
+      }
+      const allExpanded = rowKeys.every(k => this.expandedCells.has(k));
+      this.expandedCells.clear();
+      if (!allExpanded) {
+        if (Array.isArray(row.children) && row.children.length > 0) {
+          expandCells(row);
+          row.children.forEach((child: any) => expandCells(child));
+        } else {
+          expandCells(row);
+        }
+      }
+    } else {
+      const key = this.getRowId(row) + '-' + col.field;
+      if (col.type === 'image') return;
+
+      if (!this.expandedCells.has(key)) {
+        this.expandedCells.clear();
+        this.zCounter++;
+        this.expandedCells.set(key, this.zCounter);
+      } else {
+        this.expandedCells.delete(key);
+      }
+    }
+    this.cdr.detectChanges();
+  }
+
+
+
+  isExpanded(row: any, col: any): boolean {
+    return this.expandedCells.has(this.getRowId(row) + '-' + col.field);
+  }
+
+  getZIndex(row: any, col: any): number {
+    return this.expandedCells.get(this.getRowId(row) + '-' + col.field) ?? 21;
+  }
+
+  isOverflowing(element: HTMLElement | null): boolean {
+    if (!element) return false;
+    return element.scrollWidth > element.clientWidth;
+  }
+
+
+  // Picture cell Logic
+  colorCombination = ['pic-comb1', 'pic-comb2', 'pic-comb4'];
+  getDynamicClass(name: string): string {
+    if (!name) return this.colorCombination[0];
+    const hash = Array.from(name).reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const index = hash % this.colorCombination?.length;
+    return this.colorCombination[index];
+  }
+
+  getInitials(name: string): string {
+    if (!name) return 'NA';
+    const parts = name.trim().split(' ');
+    return (parts[0][0] + (parts[1]?.[0] || '')).toUpperCase();
+  }
+
+
+  actionHide: boolean = true;
+  xPos = 0;
+  yPos = 0;
+  isVisible = false;
+  deatilsList: any;
+  openExpendIndex: any;
+  positionedYet = false;
+
+  onRightClick(event: MouseEvent | TouchEvent | any, deatilsList: any): boolean {
+    if (!(event instanceof MouseEvent)) {
+      event.preventDefault();
+    }
+    if (deatilsList.__virtualIndex == 0) return false;
+    event.preventDefault();
+    this.xPos = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX;
+    this.yPos = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY;
+    // this.xPos = event.clientX;
+    // this.yPos = event.clientY;
+    this.isVisible = true;
+    this.positionedYet = false;
+    this.deatilsList = deatilsList;
+    setTimeout(() => {
+      const menuElement = document.querySelector('.context-menu') as HTMLElement;
+      if (!menuElement) return;
+      const menuWidth = menuElement.offsetWidth;
+      const menuHeight = menuElement.offsetHeight;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let x = (event instanceof MouseEvent) ? event.clientX : event.touches[0].clientX; //event.clientX;
+      let y = (event instanceof MouseEvent) ? event.clientY : event.touches[0].clientY; //event.clientY;
+      if (x + menuWidth > viewportWidth) {
+        x = viewportWidth - menuWidth - 10;
+      }
+      if (y + menuHeight > viewportHeight) {
+        y = viewportHeight - menuHeight - 10;
+      }
+      this.xPos = x;
+      this.yPos = y;
+      this.isVisible = true;
+
+      setTimeout(() => {
+        this.positionedYet = true;
+        this.cdr.detectChanges();
+      });
+
+      this.cdr.detectChanges();
+    });
+    this.cdr.detectChanges()
+    return false;
+  }
+
+  onActionClick(action: string) {
+    const sendObj = {
+      obj: this.deatilsList,
+      eventType: action,
+    };
+    this.positionedYet = false;
+    this.cdr.detectChanges();
+    this.genericEvent.emit(sendObj);
+  }
+
+
+  onVerifyClick(type: string) {
+    const idsArray = Array.from(this.selectedRows);
+    const arrayOfObjectsWithTableType: any[] = [];
+    this.selectedRows.forEach(id => {
+      arrayOfObjectsWithTableType.push({
+        id: id,
+        listingType: this.listingType,
+      });
+    });
+    const sendObj = {
+      data: {
+        obj: idsArray,
+        tableName: this.tableName,
+        listingType: this.listingType,
+      },
+      eventType: type,
+    };
+    this.genericEvent.emit(sendObj)
+  }
+
+
+
+  getCellClasses(column: any, value: any): string {
+    if (!value) return '';
+    let val: any;
+    if (typeof value === 'object') {
+      val = value?.value;
+    } else {
+      val = value;
+    }
+    const field = column?.field?.toLowerCase();
+    const status = val?.toString().toLowerCase();
+    if (field === 'status' || field === 'account_status' || field === 'availStatus' || field === 'is_custom_grade') {
+      return STATUSES_BADGE_MAP[status] || 'badge badge-secondary';
+    }
+    return '';
+  }
+
+  removeColumnFilterFromColumn(column: any) {
+    if (!column) return
+    if (column.type === 'dropdown') {
+      column.query._ids = [];
+    } else if (['string', 'number', 'date'].includes(column.type)) {
+      column.query = {
+        first_condition: 'contain',
+        first_value: null,
+        condition: 'none',
+        second_condition: null,
+        second_value: null,
+      }
+    }
+    const filteredColumns = this.commonSevice.getFiltersFromColumns(this.columns, this.filtersConfig);
+    this.filterOptions.emit(filteredColumns);
+  }
+
+  onSideMenuColumnsVisibilityChange() {
+    this.refreshHeaders();
+    const event = {
+      columns: this.columns,
+      type: 'createUpdateConfigListing',
+    }
+    this.createUpdateConfigListing.emit(event);
+  }
+
+  downloadCsv() {
+    const event = {
+      obj: {
+        columns: this.columns,
+        filters: []
+      },
+      eventType: 'downloadCsv'
+    }
+    this.genericEvent.emit(event)
+
+  }
+
+  onFontChange() {
+    this.headerTextFontsSize = this.bodyTextFontsSize;
+    const config = {
+      fontFaimly: this.fontFaimly,
+      bodyTextFontsSize: this.bodyTextFontsSize,
+      headerTextFontsSize: this.headerTextFontsSize,
+      oddRowsBackgroundColor: this.rowShadingEnabled ? this.oddRowsBackgroundColor : undefined,
+      showVerticalBorder: this.showVerticalBorder,
+      selectedTableLayout: this.selectedTableLayout,
+      globalSearch: this.tableSearch
+    }
+    const event = {
+      obj: {
+        data: config
+      },
+      eventType: 'config'
+    }
+    this.genericEvent.emit(event)
+  }
+
+  onGlobalSearch() {
+    const event = {
+      obj: {
+        tableSearch: this.tableSearch
+      },
+      eventType: 'search'
+    }
+    this.genericEvent.emit(event)
+    if (this.tableFilterViewId) {
+      this.savePreset('mouseUp');
+    }
+  }
+
+  checkFilterChangesEffect(): any {
+    if (!this.tableFilterViewId) return true
+    const findDefaultFilter = this.tableView?.find((ele: any) => ele?.id == this.tableFilterViewId);
+    const normalizeFilters = (filters: any[] | undefined): any[] => {
+      if (!Array.isArray(filters)) return [];
+      const cloned = filters.map(f => {
+        const item = JSON.parse(JSON.stringify(f ?? {}));
+        if (!Array.isArray(item._ids)) item._ids = [];
+        item._ids = item._ids.slice().sort((a: any, b: any) => {
+          if (typeof a === 'number' && typeof b === 'number') return a - b;
+          return ('' + a).localeCompare('' + b);
+        });
+
+        if (item.query === null) {
+        } else if (typeof item.query === 'object') {
+          if (!Array.isArray(item.query._ids)) item.query._ids = [];
+          item.query._ids = item.query._ids.slice().sort((a: any, b: any) => {
+            if (typeof a === 'number' && typeof b === 'number') return a - b;
+            return ('' + a).localeCompare('' + b);
+          });
+        }
+
+        return item;
+      });
+      cloned.sort((a: any, b: any) => {
+        const fa = (a.field || '') + '|' + (a.type || '');
+        const fb = (b.field || '') + '|' + (b.type || '');
+        return fa.localeCompare(fb);
+      });
+
+      return cloned;
+    };
+
+    const deepEqual = (a: any, b: any): boolean => {
+      if (a === b) return true;
+
+      if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {
+        return a === b;
+      }
+
+      if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+      if (Array.isArray(a)) {
+        if (a.length !== b.length) return false;
+        for (let i = 0; i < a.length; i++) {
+          if (!deepEqual(a[i], b[i])) return false;
+        }
+        return true;
+      }
+
+      const keysA = Object.keys(a);
+      const keysB = Object.keys(b);
+      if (keysA.length !== keysB.length) return false;
+
+      for (const key of keysA) {
+        if (!keysB.includes(key)) return false;
+        if (!deepEqual(a[key], b[key])) return false;
+      }
+      return true;
+    };
+    const normalizedA = normalizeFilters(findDefaultFilter?.filters);
+    const normalizedB = normalizeFilters(this.filtersConfig);
+    const isSame = deepEqual(normalizedA, normalizedB);
+    return isSame;
+  }
+
+
+
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+  // Cell Selection Implemented Here Implemented Here
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+
+  selectedCells: any[] = [];
+  selectedKeys: Set<string> = new Set();
+  selectionStart: any = null;
+  isSelecting = false;
+  startSelection(
+    rowIndex: number,
+    colIndex: number,
+    subColIndex: number | null,
+    field: string,
+    event: MouseEvent,
+    section: string
+  ) {
+    // event.preventDefault();
+    this.rowSelectedIndexes.clear();
+    const safeSub = subColIndex ?? 0;
+    const key = `${rowIndex}-${colIndex}-${safeSub}-${field}`;
+
+    this.selectionStart = { rowIndex, colIndex, subColIndex: safeSub, field, key };
+    this.isSelecting = true;
+    this.selectedKeys.clear();
+    this.selectedKeys.add(key);
+    this.selectedCells = [this.selectionStart];
+    const mouseUpHandler = () => {
+      this.endSelection();
+      document.removeEventListener('mouseup', mouseUpHandler);
+    };
+    document.addEventListener('mouseup', mouseUpHandler);
+    this.updateSelectionBoundaries()
+  }
+
+
+  extendSelection(
+    rowIndex: number,
+    colIndex: number,
+    subColIndex: number | null,
+    field: string,
+    event: MouseEvent,
+    section: string
+  ) {
+    if (!this.isSelecting || !this.selectionStart) return;
+
+    const start = this.selectionStart;
+    const targetSubColIndex = subColIndex ?? 0;
+    const newKeys: Set<string> = new Set();
+    const newCells: any[] = [];
+    const minRow = Math.min(start.rowIndex, rowIndex);
+    const maxRow = Math.max(start.rowIndex, rowIndex);
+    const columnsToSelect = this.getColumnSelectionRange(start.colIndex, colIndex, start.subColIndex, targetSubColIndex);
+
+    for (let r = minRow; r <= maxRow; r++) {
+      for (const colInfo of columnsToSelect) {
+        const k = `${r}-${colInfo.colIndex}-${colInfo.subColIndex}-${section}`;
+        newKeys.add(k);
+        newCells.push({
+          rowIndex: r,
+          colIndex: colInfo.colIndex,
+          subColIndex: colInfo.subColIndex,
+          field,
+          key: k
+        });
+      }
+    }
+
+    this.selectedKeys = newKeys;
+    this.selectedCells = newCells;
+    this.updateSelectionBoundaries();
+
+    // Add auto-scrolling logic
+    this.handleCellAutoScroll(event);
+  }
+
+
+
+
+  getColumnSelectionRange(
+    startCol: number,
+    endCol: number,
+    startSub: number,
+    endSub: number
+  ): { colIndex: number; subColIndex: number }[] {
+    const result: { colIndex: number; subColIndex: number }[] = [];
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+
+    const isLeftToRight = startCol <= endCol;
+    for (let c = minCol; c <= maxCol; c++) {
+      const subColCount = this.getSubColumnCount(c);
+
+      if (c === startCol && c === endCol) {
+        const minSub = Math.min(startSub, endSub);
+        const maxSub = Math.max(startSub, endSub);
+        for (let s = minSub; s <= maxSub && s < subColCount; s++) {
+          result.push({ colIndex: c, subColIndex: s });
+        }
+      }
+      else if (c === startCol) {
+        if (isLeftToRight) {
+          for (let s = startSub; s < subColCount; s++) {
+            result.push({ colIndex: c, subColIndex: s });
+          }
+        } else {
+          for (let s = 0; s <= startSub && s < subColCount; s++) {
+            result.push({ colIndex: c, subColIndex: s });
+          }
+        }
+      }
+      else if (c === endCol) {
+        if (isLeftToRight) {
+          for (let s = 0; s <= endSub && s < subColCount; s++) {
+            result.push({ colIndex: c, subColIndex: s });
+          }
+        } else {
+          for (let s = endSub; s < subColCount; s++) {
+            result.push({ colIndex: c, subColIndex: s });
+          }
+        }
+      }
+      else {
+        for (let s = 0; s < subColCount; s++) {
+          result.push({ colIndex: c, subColIndex: s });
+        }
+      }
+    }
+
+    return result;
+  }
+
+  getSubColumnCount(colIndex: number): number {
+    if (!this.columns || colIndex < 0 || colIndex >= this.columns.length) {
+      return 1;
+    }
+    const column = this.columns[colIndex];
+    if (column.children && Array.isArray(column.children)) {
+      return column.children.length;
+    }
+    return 1;
+  }
+  isGroupColumn(colIndex: number): boolean {
+    return this.getSubColumnCount(colIndex) > 1;
+  }
+  endSelection() {
+    this.isSelecting = false;
+    this.stopAutoScroll();
+    this.updateSelectionBoundaries();
+  }
+  isSelected(
+    rowIndex: number,
+    colIndex: number,
+    subColIndex: number | null,
+    field: string,
+    section: string
+  ) {
+    const safeSub = subColIndex ?? 0;
+    const key = `${rowIndex}-${colIndex}-${safeSub}-${section}`;
+    return this.selectedKeys.has(key);
+  }
+
+
+  private selectionBounds: {
+    top: number | null;
+    bottom: number | null;
+    left: { colIndex: number; subColIndex: number } | null;
+    right: { colIndex: number; subColIndex: number } | null;
+  } = { top: null, bottom: null, left: null, right: null };
+
+  updateSelectionBoundaries() {
+    if (this.selectedCells.length === 0) {
+      this.selectionBounds = { top: null, bottom: null, left: null, right: null };
+      return;
+    }
+
+    // Get all unique row indices and find min/max
+    const rowIndices = [...new Set(this.selectedCells.map(cell => cell.rowIndex))];
+    this.selectionBounds.top = Math.min(...rowIndices);
+    this.selectionBounds.bottom = Math.max(...rowIndices);
+
+    // For left/right boundaries, we need to consider both colIndex and subColIndex
+    const leftMost = this.findLeftMostCell();
+    const rightMost = this.findRightMostCell();
+
+    this.selectionBounds.left = leftMost;
+    this.selectionBounds.right = rightMost;
+  }
+  findLeftMostCell(): { colIndex: number; subColIndex: number } | null {
+    if (this.selectedCells.length === 0) return null;
+
+    const minColIndex = Math.min(...this.selectedCells.map(cell => cell.colIndex));
+    const leftColCells = this.selectedCells.filter(cell => cell.colIndex === minColIndex);
+    const minSubColIndex = Math.min(...leftColCells.map(cell => cell.subColIndex));
+
+    return { colIndex: minColIndex, subColIndex: minSubColIndex };
+  }
+  findRightMostCell(): { colIndex: number; subColIndex: number } | null {
+    if (this.selectedCells.length === 0) return null;
+
+    const maxColIndex = Math.max(...this.selectedCells.map(cell => cell.colIndex));
+    const rightColCells = this.selectedCells.filter(cell => cell.colIndex === maxColIndex);
+    const maxSubColIndex = Math.max(...rightColCells.map(cell => cell.subColIndex));
+
+    return { colIndex: maxColIndex, subColIndex: maxSubColIndex };
+  }
+  isTopBorder(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    const safeSub = subColIndex ?? 0;
+    const isSelected = this.selectedKeys.has(`${rowIndex}-${colIndex}-${safeSub}-${section}`);
+    return isSelected && this.selectionBounds.top !== null && rowIndex === this.selectionBounds.top;
+  }
+  isBottomBorder(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    const safeSub = subColIndex ?? 0;
+    const isSelected = this.selectedKeys.has(`${rowIndex}-${colIndex}-${safeSub}-${section}`);
+    return isSelected && this.selectionBounds.bottom !== null && rowIndex === this.selectionBounds.bottom;
+  }
+  isLeftBorder(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    const safeSub = subColIndex ?? 0;
+    const isSelected = this.selectedKeys.has(`${rowIndex}-${colIndex}-${safeSub}-${section}`);
+    return isSelected && this.selectionBounds.left !== null &&
+      colIndex === this.selectionBounds.left.colIndex &&
+      safeSub === this.selectionBounds.left.subColIndex;
+  }
+
+  isRightBorder(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    const safeSub = subColIndex ?? 0;
+    const isSelected = this.selectedKeys.has(`${rowIndex}-${colIndex}-${safeSub}-${section}`);
+    return isSelected && this.selectionBounds.right !== null &&
+      colIndex === this.selectionBounds.right.colIndex &&
+      safeSub === this.selectionBounds.right.subColIndex;
+  }
+
+  isTopLeftCorner(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    return this.isTopBorder(rowIndex, colIndex, subColIndex, section) && this.isLeftBorder(rowIndex, colIndex, subColIndex, section);
+  }
+
+  isTopRightCorner(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    return this.isTopBorder(rowIndex, colIndex, subColIndex, section) && this.isRightBorder(rowIndex, colIndex, subColIndex, section);
+  }
+
+  isBottomLeftCorner(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    return this.isBottomBorder(rowIndex, colIndex, subColIndex, section) && this.isLeftBorder(rowIndex, colIndex, subColIndex, section);
+  }
+
+  isBottomRightCorner(rowIndex: number, colIndex: number, subColIndex: number | null, section: string): boolean {
+    return this.isBottomBorder(rowIndex, colIndex, subColIndex, section) && this.isRightBorder(rowIndex, colIndex, subColIndex, section);
+  }
+
+
+  cellSelectionAutoScrollInterval: any = null;
+  private scrollSpeed = 100;
+  private scrollMargin = 150;
+  handleCellAutoScroll(event: MouseEvent) {
+    if (this.cellSelectionAutoScrollInterval) {
+      clearInterval(this.cellSelectionAutoScrollInterval);
+      this.cellSelectionAutoScrollInterval = null;
+    }
+    const horizontalContainer = this.centerScrollableBody.nativeElement;
+    const verticalContainer = this.mainScroll.nativeElement;
+    if (!horizontalContainer || !verticalContainer) return;
+    const horizontalRect = horizontalContainer.getBoundingClientRect();
+    const mouseX = event.clientX;
+    const verticalRect = verticalContainer.getBoundingClientRect();
+    const mouseY = event.clientY;
+    const nearTop = mouseY - verticalRect.top < this.scrollMargin;
+    const nearBottom = verticalRect.bottom - mouseY < this.scrollMargin;
+    const nearLeft = mouseX - horizontalRect.left < this.scrollMargin;
+    const nearRight = horizontalRect.right - mouseX < this.scrollMargin;
+    let scrollX = 0;
+    let scrollY = 0;
+    if (nearTop) scrollY = -this.scrollSpeed;
+    if (nearBottom) scrollY = this.scrollSpeed;
+    if (nearLeft) scrollX = -this.scrollSpeed;
+    if (nearRight) scrollX = this.scrollSpeed;
+    if (scrollX !== 0 || scrollY !== 0) {
+      this.cellSelectionAutoScrollInterval = setInterval(() => {
+        if (scrollX !== 0) {
+          horizontalContainer.scrollBy(scrollX, 0);
+        }
+        if (scrollY !== 0) {
+          verticalContainer.scrollBy(0, scrollY);
+        }
+      }, 16);
+    }
+  }
+
+  stopAutoScroll() {
+    if (this.cellSelectionAutoScrollInterval) {
+      clearInterval(this.cellSelectionAutoScrollInterval);
+      this.cellSelectionAutoScrollInterval = null;
+    }
+  }
+
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+  // Row Selection from the Indexing Implemented Here
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+  // *************************************************************************
+
+  rowSelectedIndexes: Set<number> = new Set();
+  rowSelecting = false;
+  rowSelectionStartIndex: number | null = null;
+  autoScrollInterval: any = null;
+
+  get firstSelectedRow(): number | null {
+    if (this.rowSelectedIndexes.size === 0) return null;
+    return Math.min(...this.rowSelectedIndexes);
+  }
+
+  get lastSelectedRow(): number | null {
+    if (this.rowSelectedIndexes.size === 0) return null;
+    return Math.max(...this.rowSelectedIndexes);
+  }
+
+
+  onRowMouseDown(index: number, event: MouseEvent) {
+    event.preventDefault();
+    this.rowSelecting = true;
+    this.selectedKeys.clear();
+    this.rowSelectionStartIndex = index;
+    this.rowSelectedIndexes.clear();
+    this.rowSelectedIndexes.add(index);
+    this.activeCell = '';
+    this.cdr.detectChanges();
+
+    const mouseMoveHandler = (e: MouseEvent) => this.handleAutoScroll(e);
+    const mouseUpHandler = () => {
+      this.onRowMouseUp();
+      document.removeEventListener('mouseup', mouseUpHandler);
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      if (this.autoScrollInterval) {
+        cancelAnimationFrame(this.autoScrollInterval);
+        this.autoScrollInterval = null;
+      }
+    };
+
+    document.addEventListener('mouseup', mouseUpHandler);
+    document.addEventListener('mousemove', mouseMoveHandler);
+  }
+
+  onRowMouseOver(index: number, event: MouseEvent) {
+    if (!this.rowSelecting || this.rowSelectionStartIndex === null) return;
+    this.rowSelectedIndexes.clear();
+    const start = Math.min(this.rowSelectionStartIndex, index);
+    const end = Math.max(this.rowSelectionStartIndex, index);
+    for (let i = start; i <= end; i++) {
+      this.rowSelectedIndexes.add(i);
+    }
+    console.log([...this.rowSelectedIndexes]);
+  }
+
+  onRowMouseUp() {
+    this.rowSelecting = false;
+    this.rowSelectionStartIndex = null;
+  }
+  handleAutoScroll(e: MouseEvent) {
+    const container = this.mainScroll?.nativeElement as HTMLElement;
+    if (!container) return;
+
+    const rect = container.getBoundingClientRect();
+    const edgeSize = 40
+    let scrollAmount = 0;
+
+    if (e.clientY < rect.top + edgeSize) {
+      scrollAmount = -150;
+    } else if (e.clientY > rect.bottom - edgeSize) {
+      scrollAmount = 150;
+    }
+
+    if (scrollAmount !== 0) {
+      if (!this.autoScrollInterval) {
+        const step = () => {
+          container.scrollTop += scrollAmount;
+          this.autoScrollInterval = requestAnimationFrame(step);
+        };
+        this.autoScrollInterval = requestAnimationFrame(step);
+      }
+    } else {
+      if (this.autoScrollInterval) {
+        cancelAnimationFrame(this.autoScrollInterval);
+        this.autoScrollInterval = null;
+      }
+    }
+  }
+
+
+  // getSelectedDataForCopy(): any[][] {
+  //   const copiedRows: any[][] = [];
+  //   const findRowByVirtualIndex = (vIndex: number) =>
+  //     this.dataSet.find((r: any) => r.__virtualIndex === vIndex);
+  //   if (this.rowSelectedIndexes && this.rowSelectedIndexes.size > 0) {
+  //     const sortedIndexes = [...this.rowSelectedIndexes].sort((a, b) => a - b);
+  //     for (const vIndex of sortedIndexes) {
+  //       const row = findRowByVirtualIndex(vIndex);
+  //       if (!row) continue;
+  //       const rowValues = this.columns.flatMap(col =>
+  //         col.children && Array.isArray(col.children)
+  //           ? col.children.map((c: { field: string }) =>
+  //               this.getNestedValue(row, c.field) ?? ''
+  //             )
+  //           : this.getNestedValue(row, col.field) ?? ''
+  //       );
+  //       copiedRows.push(rowValues);
+  //     }
+  //   }
+
+  //   if (this.selectedCells && this.selectedCells.length > 0) {
+  //     const rowsMap = new Map<number, any[]>();
+  //     for (const cell of this.selectedCells) {
+  //       const row = findRowByVirtualIndex(cell.rowIndex);
+  //       if (!row) continue;
+
+  //       const col = this.columns[cell.colIndex];
+  //       let fieldName = col?.field;
+  //       if (col?.children && col.children[cell.subColIndex]) {
+  //         fieldName = col.children[cell.subColIndex].field;
+  //       }
+  //       const value = this.getNestedValue(row, fieldName) ?? '';
+
+  //       if (!rowsMap.has(cell.rowIndex)) rowsMap.set(cell.rowIndex, []);
+  //       rowsMap.get(cell.rowIndex)!.push(value);
+  //     }
+
+  //     const sortedCells = [...rowsMap.entries()]
+  //       .sort(([a], [b]) => a - b)
+  //       .map(([_, v]) => v);
+
+  //     copiedRows.push(...sortedCells);
+  //   }
+
+  //   if (copiedRows.length === 0) {
+  //     const activeCell = document.querySelector('.active-cell');
+  //     if (activeCell) return [[activeCell.textContent?.trim() || '']];
+  //   }
+  //   const maxCols = copiedRows.reduce((max, row) => Math.max(max, row.length), 0);
+  //   const normalized = copiedRows.map(row => {
+  //     const newRow = [...row];
+  //     while (newRow.length < maxCols) newRow.push(''); 
+  //     return newRow;
+  //   });
+  //   return normalized;
+  // }
+
+
+  undoStack: any[][] = [];
+  redoStack: any[][] = [];
+
+  private cloneData(data: any[]): any[] {
+    return JSON.parse(JSON.stringify(data));
+  }
+
+  performCut(selectedData: any[][]) {
+    // Save current state for undo
+    this.undoStack.push(this.cloneData(this.visibleRows));
+    this.redoStack = []; // Clear redo stack on new action
+
+    // Perform cut
+    this.copyService.cutWithAnimation(selectedData);
+    const { updatedRows } = this.copyService.cutSelectedSelectedData(
+      this.visibleRows,
+      this.rowSelectedIndexes,
+      this.selectedCells,
+      this.columns,
+      this.setNestedValue.bind(this)
+    );
+
+    console.log('Updated Rows: ', updatedRows);
+  }
+
+
+
+  getSelectedDataForCopy(): any[][] {
+    return this.copyService.getSelectedDataForCopy(
+      this.visibleRows,
+      this.columns,
+      this.rowSelectedIndexes,
+      this.selectedCells,
+      this.getNestedValue.bind(this)
+    );
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement;
+    const isFormField =
+      target.tagName === 'INPUT' ||
+      target.tagName === 'TEXTAREA' ||
+      target.isContentEditable;
+    if (isFormField) return;
+
+    const tableContainer = document.querySelector('.data-grid-body-wrapper'); // use your table class/id
+    if (tableContainer && !tableContainer.contains(target)) return;
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c') {
+      if (!this.selectedCells?.length) return
+      const selectedData = this.getSelectedDataForCopy();
+      event.preventDefault();
+      this.copyService.copyToClipboard(selectedData);
+
+    } else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'x') {
+      if (!this.selectedCells?.length) return
+      const selectedData = this.getSelectedDataForCopy();
+      event.preventDefault();
+      this.performCut(selectedData);
+
+    } else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z') {
+      if (!this.selectedCells?.length) return
+      event.preventDefault();
+      this.undo();
+
+    } else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'y') {
+      if (!this.selectedCells?.length) return
+      event.preventDefault();
+      this.redo();
+    }
+  }
+
+  undo() {
+    if (this.undoStack.length > 0) {
+      const prevState = this.undoStack.pop()!;
+      this.redoStack.push(this.cloneData(this.visibleRows));
+      this.visibleRows = this.cloneData(prevState);
+    }
+  }
+
+  redo() {
+    if (this.redoStack.length > 0) {
+      const nextState = this.redoStack.pop()!;
+      this.undoStack.push(this.cloneData(this.visibleRows));
+      this.visibleRows = this.cloneData(nextState);
+    }
+  }
+
+
+
+  @HostListener('document:paste', ['$event'])
+  onPaste = async (event: ClipboardEvent) => {
+    if (!this.selectedCells?.length || !this.activeCell) return
+    event.preventDefault();
+    const text = event.clipboardData?.getData('text');
+    if (!text) return;
+    const startCell = this.selectedCells?.[0];
+    if (!startCell) return;
+    const updatedRows = await this.copyService.pasteFromClipboardText(
+      text,
+      this.visibleRows,
+      this.columns,
+      startCell.rowIndex,
+      startCell.colIndex,
+      startCell.subColIndex
+    );
+    console.log('Updated Rows:', updatedRows);
+    if (updatedRows?.updateRows?.length) {
+      this.genericEvent.emit({
+        data: updatedRows?.updateRows,
+        eventType: 'onCellEdit',
+        column: updatedRows?.currentColums
+      });
+    }
+
+    this.cdr.detectChanges();
+  };
+
+
+
+  isDate(value: any): boolean {
+    return !isNaN(new Date(value)?.getTime());
+  }
+
+
+  // Hold expanded IDs (array for multiple, single value for single)
+  expandededDetailRows: (string | number)[] | string | number = '';
+
+  toggleDetailRowExpand(row: any) {
+    const id = row?.id || row?._id;
+
+    if (this.keepMultipleExpandedDetails) {
+      if (!Array.isArray(this.expandededDetailRows)) {
+        this.expandededDetailRows = [];
+      }
+      const expanded = this.expandededDetailRows as (string | number)[];
+      const index = expanded.indexOf(id);
+
+      if (index > -1) {
+        expanded.splice(index, 1);
+      } else {
+        expanded.push(id);
+      }
+    } else {
+      if (this.expandededDetailRows === id) {
+        this.expandededDetailRows = '';
+      } else {
+        this.expandededDetailRows = id;
+      }
+    }
+
+    setTimeout(() => {
+      void this.rightPinnedHeader?.nativeElement.offsetWidth;
+      this.centerPinnedBody?.nativeElement.offsetWidth;
+      this.rightPinnedBody?.nativeElement.offsetWidth;
+      this.cdr.detectChanges();
+    }, 300)
+  }
+
+  isDetailsExpanded(row: any): boolean {
+    const id = row?.id || row?._id;
+
+    if (this.keepMultipleExpandedDetails) {
+      return Array.isArray(this.expandededDetailRows) &&
+        this.expandededDetailRows.includes(id);
+    } else {
+      return this.expandededDetailRows === id;
+    }
+  }
+
+  getFilterValue(option: any): any {
+    return option?.value ?? option;
+  }
+
+
+  openIndex: number | null = null;
+  toggleMenu(i: number, event?: MouseEvent) {
+    if (event) { event.stopPropagation(); }
+    this.openIndex = this.openIndex === i ? null : i;
+  }
+
+  @ViewChild('nestedTable')
+  nestedTable!: ElementRef<HTMLDivElement>;
+  get hasVerticalScroll(): boolean {
+    if (!this.nestedTable) return false;
+    return this.nestedTable.nativeElement.scrollHeight > this.nestedTable.nativeElement.clientHeight;
+  }
+
+
+  getTotalAmount(column: any) {
+    if (!column?.is_amount) return;
+    const total = this.originalDataSet.reduce((sum, row) => {
+      const value = row[column.field] || 0;
+      return sum + value;
+    }, 0);
+
+    return `${this.currencySymbol}${total}`;
+  }
+
+  dropColumn(event: CdkDragDrop<any[]>, row: any) {
+    // Reorder the columns array
+    moveItemInArray(row.detail.columns, event.previousIndex, event.currentIndex);
+  }
+
+  currentSubSortColumn: string | null = null; // active column
+  currentSortDirection: 'asc' | 'desc' = 'asc'; // active direction
+
+  sortNestedCol(col: any, dataSet: any[] = []) {
+    if (this.currentSubSortColumn === col.field) {
+      this.currentSortDirection = this.currentSortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.currentSubSortColumn = col.field;
+      this.currentSortDirection = 'asc';
+    }
+    col.order_by = this.currentSortDirection;
+    dataSet.sort((a, b) => {
+      let aVal = a[col.field];
+      let bVal = b[col.field];
+      aVal = aVal == null ? '' : aVal;
+      bVal = bVal == null ? '' : bVal;
+      if (col.type === 'date') {
+        aVal = new Date(aVal).getTime();
+        bVal = new Date(bVal).getTime();
+      }
+      const aNum = parseFloat(aVal);
+      const bNum = parseFloat(bVal);
+      const bothNumbers = !isNaN(aNum) && !isNaN(bNum);
+
+      if (bothNumbers) {
+        return this.currentSortDirection === 'asc' ? aNum - bNum : bNum - aNum;
+      } else {
+        const comp = String(aVal).localeCompare(String(bVal));
+        return this.currentSortDirection === 'asc' ? comp : -comp;
+      }
+    });
+  }
+
+  getColumnWidthPx(row: any, col: any): string {
+    if (col.width) return col.width + 'px';
+    const pixels = this.centerScrollableBody?.nativeElement?.offsetWidth / row.detail?.columns.length;
+    return pixels + 'px';
+  }
+
+  fullscreenImage: string | null = null;
+
+  openFullScreenImage(src: string) {
+    this.fullscreenImage = src;
+  }
+
+  getVisibleColumnCount(columns: any[]): number {
+  let count = 0;
+  for (const col of columns) {
+    if (col.children && col.children.length > 0) {
+      count += this.getVisibleColumnCount(col.children);
+    } else {
+      if (col.is_visible) {
+        count++;
+      }
+    }
+  }
+  return count;
+}
+
+
+}