cats-data-grid 0.0.2 → 0.0.5

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

@@ -0,0 +1,1756 @@
+import { AddClassPipe } from './pipes/add-class.pipe';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnChanges,
+  OnInit,
+  Output,
+  Renderer2,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { OutsideClickDirective } from './directives/outside-click.directive';
+import { RendererParserDirective } from './directives/renderer-parser.directive';
+import { CommonInputComponent } from './common-components/common-input/common-input.component';
+import { AdaptivePositionDirective } from './directives/adaptive-position.directive';
+import {
+  CommonCalendarComponent,
+  DateConfig,
+} from './common-components/common-calendar/common-calendar.component';
+
+export class ColDefs {
+  fieldName!: string;
+  headerName!: string;
+  width!: number;
+  minWidth!: number;
+  sortable: boolean = true;
+  filterable: boolean = true;
+  cellRenderer: any;
+}
+
+export interface ColumnFilter {
+  fieldName: string;
+  filterLogic: string;
+  filters: FilterCondition[];
+}
+export interface FilterCondition {
+  filterOperation: string;
+  filterValue: any;
+}
+@Component({
+  selector: 'cats-data-grid',
+  imports: [
+    CommonModule,
+    FormsModule,
+    CommonCalendarComponent,
+    OutsideClickDirective,
+    AdaptivePositionDirective,
+    RendererParserDirective,
+    AddClassPipe,
+    CommonInputComponent,
+  ],
+  templateUrl: './cats-data-grid.component.html',
+  styleUrls: ['./cats-data-grid.component.scss'],
+})
+export class CatsDataGridComponent implements OnChanges, OnInit {
+  @ViewChild('pinMenu') pinMenu!: ElementRef;
+  @ViewChild('colActionMenu') colActionMenu!: ElementRef;
+  @ViewChild('table') table!: ElementRef;
+  @Input() tableOptions: any;
+  @Input() totalRecords: number = 0;
+  @Input() sortingRequired = true;
+  @Input() checkBoxSelection = false;
+  @Input() checkboxSelectionType = 'multiple';
+  @Input() rowData: any[] = [];
+  @Input() colDefs: any[] = [];
+  @Input() paginationRequired = true;
+  @Input() selectedRowEmpty: boolean = false;
+  @Input() filterRequired: boolean = true;
+  @Input() threeDotsMenuRequired: boolean = true;
+  @Input() settingsRequired: boolean = false;
+  @Input() settingsClicked: boolean = false;
+  @Input() resetPage = true;
+  @Input() rowId: any = null;
+  showDropdown: boolean = false;
+
+  @Input() height: number = 400;
+  @Input() groupByRequired: boolean = false;
+  @Output() onPaginationChange = new EventEmitter();
+  @Output() onCheckboxSelection = new EventEmitter();
+  @Output() onScrollEmitter = new EventEmitter();
+  @Output() filter = new EventEmitter();
+  @Output() onHideSettings = new EventEmitter();
+
+  activeFilterIndex: number | null = null;
+  originalRowData: any[] = [];
+  activeAll = true;
+
+  pageDetails: any = {
+    pageSize: 20,
+    totalPages: 1,
+    currentPage: 1,
+  };
+  recordsToShow: any = {
+    min: 0,
+    max: 20,
+  };
+  sortingColumnIndex!: number;
+  sortingType: any = {};
+  selectedRow: any[] = [];
+
+  @Input() pageSizeList: number[] = [20, 50, 75, 100];
+  showPageSizeList: boolean = false;
+  dragOverIndex: null | number = null;
+  draggedIndex: null | number = null;
+  originalColDefs: any[] = [];
+  filteredRowData: any[] = [];
+  filteredData: any[] = [];
+  currentColumn: any;
+  currentIndex!: number;
+  menuVisible: boolean[] = [];
+  menuPosition: any[] = [];
+  activeFilters: Set<any> = new Set<any>();
+  resizingColumnIndex: number | null = null;
+  startX: number = 0;
+  startWidth: number = 0;
+  isResizing: boolean = false;
+  groupedResult: any[] = [];
+  showMoveIcon: any = {};
+  columnDraggable: any[] = [];
+  activeGroups: any[] = [];
+  groupBy: string[] = [];
+  @Input() groupByField: string = '';
+  dragGroupIndex: number | null = null;
+
+  dateConfig: DateConfig = {
+    selectionMode: 'single',
+    enableTime: false,
+  };
+
+  filterOptions = [
+    { label: 'Contains', value: 'contains' },
+    { label: 'Does Not Contain', value: 'doesNotContain' },
+    { label: 'Equals', value: 'equals' },
+    { label: 'Does Not Equal', value: 'doesNotEqual' },
+    { label: 'Starts With', value: 'startsWith' },
+    { label: 'Ends With', value: 'endsWith' },
+  ];
+
+  numberFilterOptions = [
+    { label: 'Equals', value: '=' },
+    { label: 'Greater Than', value: '>' },
+    { label: 'Less Than', value: '<' },
+    { label: 'Greater Than or Equal', value: '>=' },
+    { label: 'Less Than or Equal', value: '<=' },
+  ];
+  showPin: boolean = false;
+  pinActionClicked: any = {};
+  private removeMouseMove!: () => void;
+  private removeMouseUp!: () => void;
+  private rafId: number | null = null;
+  @Input() appliedFilters: ColumnFilter[] = [];
+  @Output() appliedFiltersEvent = new EventEmitter<ColumnFilter[]>();
+  @Output() activeGroupsEvent = new EventEmitter<any[]>();
+  @Input() dynamicGroupingFiltering: boolean = false;
+  atLeastOneColumnChecked: boolean = true;
+  draggedRowData: any = {};
+  firstCol: any;
+  isRowSelected: boolean = false;
+  constructor(
+    private renderer: Renderer2,
+    private zone: NgZone,
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    if (this.colDefs && this.colDefs.length > 0) {
+      this.firstCol = this.colDefs[0];
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['colDefs']?.currentValue) {
+      this.resetPagination();
+      this.colDefs = this.getUpdatedColDefs(changes['colDefs']?.currentValue);
+      setTimeout(() => {
+        this.applyAllFilters();
+      });
+      setTimeout(() => {
+        this.applyAllFilters();
+      });
+      this.originalColDefs = [...this.colDefs];
+    }
+
+    if (changes['totalRecords']?.currentValue && this.resetPage) {
+      this.resetPagination();
+    } else {
+      this.setPageCount();
+    }
+    if (changes['rowData']?.currentValue) {
+      if (this.selectedRowEmpty) this.selectedRow = [];
+      this.rowData = changes['rowData']?.currentValue.map(
+        (row: any, i: number) => {
+          if (row[this.rowId]) {
+            row.rowId = row[this.rowId];
+          } else {
+            row.rowId = `${Date.now()}_${i}`;
+          }
+          if (row?.isSelected) [...this.selectedRow, row];
+          return row;
+        },
+      );
+
+      if (this.dynamicGroupingFiltering && this.groupBy.length > 0) {
+        this.groupedResult = structuredClone(this.rowData);
+      }
+      if (!this.activeFilters.size) {
+        this.originalRowData = structuredClone(this.rowData);
+      }
+
+      this.getGroupedData();
+    }
+
+    if (changes['groupByField']?.currentValue) {
+      this.activeGroups = [];
+      this.groupBy = [];
+      const groupByField = changes['groupByField'].currentValue;
+      const col = this.getColumnDetail(this.colDefs, groupByField);
+      this.activeGroups.push(...col);
+      this.groupBy.push(groupByField);
+      this.getGroupedData();
+    }
+  }
+
+  getColumnDetail(colDefs: any, groupByField: any) {
+    return colDefs.filter((col: any) => col.fieldName === groupByField);
+  }
+
+  activeAllSelection(event: Event) {
+    let checked = (event.target as HTMLInputElement).checked;
+    if (checked) {
+      this.colDefs = this.originalColDefs.map((dt) => {
+        if (!dt.active && !dt.headerLocked) {
+          dt.active = true;
+        }
+        this.atLeastOneColumnChecked = true;
+        return dt;
+      });
+    } else {
+      this.colDefs = this.originalColDefs.map((dt) => {
+        if (dt.active && !dt.headerLocked) {
+          dt.active = false;
+        }
+        this.atLeastOneColumnChecked = false;
+        return dt;
+      });
+    }
+  }
+
+  changeActiveColSelection(event: Event, col: any) {
+    col.active = !col.active;
+    const isAllNotChecked = this.originalColDefs.some((dt: any) => !dt.active);
+    this.atLeastOneColumnChecked = this.originalColDefs.some(
+      (dt: any) => dt.active,
+    );
+    if (isAllNotChecked) {
+      this.activeAll = false;
+    } else {
+      this.activeAll = true;
+    }
+  }
+
+  /**
+   * @description Prepares and normalizes column definitions for filtering and menu behavior
+   * @author Anand Pandey
+   * @param {any[]} colDefs - Raw column definitions received from the parent.
+   * @returns {any[]} - Updated column definitions with filter/menu
+   */
+  getUpdatedColDefs(colDefs: any[]) {
+    return colDefs.map((col, index) => {
+      this.sortingType[index] = '';
+      col.colId = `${Date.now()}_${index}`;
+      // if (col.fieldName === 'action') {
+      //   col.isAction = true;
+      // }
+
+      if (!col.filterType && !col.isAction) {
+        col.filterType = 'text';
+      }
+
+      if (!col.filterLogic) {
+        col.filterLogic = 'OR';
+      }
+
+      let updatedCol = {
+        ...col,
+        active: col.active ?? true,
+        locked: col.locked ?? false,
+        filterable: col.filterable ?? true,
+        columnAction: col.columnAction ?? true,
+        sortable: col.sortable ?? true,
+      };
+
+      if (!updatedCol.filterable) {
+        return updatedCol;
+      }
+
+      switch (col.filterType) {
+        case 'text':
+          updatedCol = {
+            ...updatedCol,
+            filters: [
+              {
+                filterOperation: 'contains',
+                filterValue: '',
+              },
+              {
+                filterOperation: 'startsWith',
+                filterValue: '',
+              },
+            ],
+          };
+          break;
+
+        case 'number':
+        case 'date':
+          updatedCol = {
+            ...updatedCol,
+            filterValue: '',
+            filters: [
+              {
+                filterOperation: '=',
+                filterValue: '',
+              },
+              {
+                filterOperation: '=',
+                filterValue: '',
+              },
+            ],
+          };
+          break;
+
+        case 'set':
+          const options = [
+            ...new Set(
+              this.rowData.flatMap((r) => {
+                return this.normalizeSetFilterType(
+                  r[col.fieldName],
+                  col?.cellRendererParams?.tagKey,
+                )?.filter(Boolean);
+              }),
+            ),
+          ];
+          updatedCol = {
+            ...updatedCol,
+            options,
+            filteredOptions: options,
+            selectedValues: new Set(options),
+          };
+          break;
+      }
+
+      if (this.appliedFilters.length > 0) {
+        const appliedFilter = this.appliedFilters.find(
+          (f) => f.fieldName === col.fieldName,
+        );
+        if (appliedFilter) {
+          switch (col.filterType) {
+            case 'text':
+            case 'number':
+            case 'date':
+              updatedCol = {
+                ...updatedCol,
+                filters: appliedFilter.filters,
+                filterLogic: appliedFilter.filterLogic,
+              };
+              break;
+            case 'set':
+              const options = [
+                ...new Set(
+                  this.rowData.flatMap((r) => {
+                    return this.normalizeSetFilterType(
+                      r[col.fieldName],
+                      col?.cellRendererParams?.tagKey,
+                    )?.filter(Boolean);
+                  }),
+                ),
+              ];
+              const selectedValues = new Set(
+                appliedFilter.filters.map((f) => f.filterValue),
+              );
+              updatedCol = {
+                ...updatedCol,
+                options,
+                filteredOptions: options,
+                selectedValues,
+              };
+              break;
+          }
+        }
+      }
+      return updatedCol;
+    });
+  }
+  normalizeSetFilterType(value: any, key: string) {
+    if (!value) return;
+
+    if (Array.isArray(value) && typeof value[0] === 'string') {
+      return value;
+    }
+    if (Array.isArray(value) && typeof value[0] === 'object') {
+      return (value = value.map((val) => val[key]));
+    }
+
+    if (typeof value === 'string') {
+      return [value];
+    }
+
+    if (typeof value === 'object') {
+      return [value[key]];
+    }
+
+    return [];
+  }
+
+  /**
+   * @description - Evaluates a text-based filter condition on a given field value.
+   * @author Anand Pandey
+   * @param {string} type - The type of text filter to apply ('contains' | 'doesNotContain' | 'equals' etc).
+   * @param {string} fieldValue - The actual value from the data row being evaluated.
+   * @param {string} value - The user-entered filter value to compare against.
+   * @returns {boolean} `true` if the fieldValue satisfies the specified filter condition,
+   *                    otherwise `false`.
+   */
+  evaluateTextFilterCondition(
+    type: string,
+    fieldValue: string,
+    value: string,
+  ): boolean {
+    switch (type) {
+      case 'contains':
+        return fieldValue.includes(value);
+      case 'doesNotContain':
+        return !fieldValue.includes(value);
+      case 'equals':
+        return fieldValue === value;
+      case 'doesNotEqual':
+        return fieldValue !== value;
+      case 'startsWith':
+        return fieldValue.startsWith(value);
+      case 'endsWith':
+        return fieldValue.endsWith(value);
+      default:
+        return true;
+    }
+  }
+
+  /**
+   * @description - Evaluates number/date filter conditions.
+   * @author Anand
+   * @param {string} type - Comparison operator ('=' | '>' | '<' | '>=' | '<=').
+   * @param {number|string} fieldValue - Actual value from the row (number or timestamp).
+   * @param {number|string} value - User-entered value for comparison.
+   * @returns {boolean} True if the condition matches, otherwise false.
+   */
+  evaluateNumDateFilterCondition(
+    type: string,
+    fieldValue: number | string,
+    value: number | string,
+  ): boolean {
+    switch (type) {
+      case '=':
+        return fieldValue === value;
+      case '>':
+        return fieldValue > value;
+      case '<':
+        return fieldValue < value;
+      case '>=':
+        return fieldValue >= value;
+      case '<=':
+        return fieldValue <= value;
+      default:
+        return true;
+    }
+  }
+
+  /**
+   * @description Method to filter data according to filterOperation and comparator selection
+   * @author Anand Pandey
+   * @param {}
+   * @returns void
+   */
+  applyAllFilters() {
+    let result: any[] = structuredClone(this.originalRowData);
+
+    this.colDefs.forEach((col) => {
+      const field = col.fieldName;
+      if (col?.filterable) {
+        if (col.filterType === 'text') {
+          // *********** TEXT FILTER ***********
+          const [c1, c2] = col.filters;
+
+          const textVal1 = c1.filterValue?.toLowerCase().trim();
+          const textVal2 = c2.filterValue?.toLowerCase().trim();
+          if (!textVal1 && !textVal2) {
+            this.activeFilters.delete(col.fieldName);
+            return;
+          }
+          this.activeFilters.add(col.fieldName);
+
+          result = result.filter((r) => {
+            const fieldVal = String(r[field]).toLowerCase();
+            const cond1 = textVal1
+              ? this.evaluateTextFilterCondition(
+                  c1.filterOperation,
+                  fieldVal,
+                  textVal1,
+                )
+              : false;
+            const cond2 = textVal2
+              ? this.evaluateTextFilterCondition(
+                  c2.filterOperation,
+                  fieldVal,
+                  textVal2,
+                )
+              : false;
+
+            return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+          });
+        }
+
+        // *********** NUMBER FILTER ***********
+        if (col.filterType === 'number') {
+          const [c1, c2] = col.filters;
+          const numValue1 = Number(c1.filterValue);
+          const numValue2 = Number(c2.filterValue);
+
+          if (!numValue1 && !numValue2) {
+            this.activeFilters.delete(col.fieldName);
+            return;
+          }
+          this.activeFilters.add(col.fieldName);
+
+          result = result.filter((r) => {
+            const fieldVal = Number(r[field]);
+            const cond1 = numValue1
+              ? this.evaluateNumDateFilterCondition(
+                  c1.filterOperation,
+                  fieldVal,
+                  numValue1,
+                )
+              : false;
+            const cond2 = numValue2
+              ? this.evaluateNumDateFilterCondition(
+                  c2.filterOperation,
+                  fieldVal,
+                  numValue2,
+                )
+              : false;
+
+            return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+          });
+        }
+
+        // *********** DATE FILTER ***********
+        if (col.filterType === 'date') {
+          const [c1, c2] = col.filters;
+          const selected1 = this.normalizeDate(c1.filterValue);
+          const selected2 = this.normalizeDate(c2.filterValue);
+          if (!selected1 && !selected2) {
+            this.activeFilters.delete(col.fieldName);
+            return;
+          }
+          this.activeFilters.add(col.fieldName);
+          result = result.filter((r) => {
+            const fieldVal = this.normalizeDate(r[field]);
+            const cond1 = selected1
+              ? this.evaluateNumDateFilterCondition(
+                  c1.filterOperation,
+                  fieldVal ?? r[field],
+                  selected1,
+                )
+              : false;
+            const cond2 = selected2
+              ? this.evaluateNumDateFilterCondition(
+                  c2.filterOperation,
+                  fieldVal ?? r[field],
+                  selected2,
+                )
+              : false;
+
+            return col.filterLogic === 'AND' ? cond1 && cond2 : cond1 || cond2;
+          });
+        }
+
+        // *********** SET FILTER ***********
+        if (col.filterType === 'set') {
+          if (
+            col.selectedValues?.size >= 0 &&
+            col.selectedValues?.size !== col.options.length
+          ) {
+            result = result.filter((r) => {
+              const value: any = r[field];
+
+              if (
+                Array.isArray(value) &&
+                value.every((val) => typeof val !== 'object')
+              ) {
+                return value.some((m) => col.selectedValues.has(m));
+              }
+
+              if (
+                Array.isArray(value) &&
+                value.every((val) => typeof val === 'object')
+              ) {
+                return value.some((m) =>
+                  col.selectedValues.has(m[col?.cellRendererParams?.tagKey]),
+                );
+              }
+
+              return col.selectedValues.has(r[field]);
+            });
+            this.activeFilters.add(col.fieldName);
+          } else {
+            this.activeFilters.delete(col.fieldName);
+          }
+        }
+
+        if (this.activeFilters.has(col.fieldName)) {
+          let filterObj: ColumnFilter = {
+            fieldName: col.fieldName,
+            filterLogic: col.filterLogic,
+            filters: col.filters,
+          };
+          if (col.filterType === 'set') {
+            filterObj.filters = Array(...col.selectedValues).map(
+              (f: string) => ({
+                filterOperation: 'equals',
+                filterValue: f,
+              }),
+            );
+            filterObj.filterLogic = 'OR';
+          }
+          const existingIndex = this.appliedFilters.findIndex(
+            (f) => f.fieldName === col.fieldName,
+          );
+          if (existingIndex === -1) {
+            this.appliedFilters.push(filterObj);
+          } else {
+            this.appliedFilters[existingIndex] = filterObj;
+          }
+        } else {
+          this.appliedFilters = this.appliedFilters.filter(
+            (f) => f.fieldName !== col.fieldName,
+          );
+        }
+      }
+    });
+
+    if (this.dynamicGroupingFiltering) {
+      this.appliedFiltersEvent.emit(this.appliedFilters);
+      return;
+    }
+    this.filteredData = result;
+    this.rowData = this.filteredData;
+    this.getGroupedData();
+    this.filter.emit(this.filteredData);
+  }
+
+  resetFilter(col: any) {
+    switch (col.filterType) {
+      case 'text':
+      case 'number':
+      case 'date': {
+        col.filters.forEach((f: any) => (f.filterValue = ''));
+        col.filterLogic = 'OR';
+        break;
+      }
+
+      case 'set': {
+        // Select all values again
+        col.selectedValues = new Set(col.options);
+        break;
+      }
+    }
+    this.appliedFilters = this.appliedFilters.filter(
+      (f) => f.fieldName !== col.fieldName,
+    );
+    // Remove active flag
+    this.activeFilters.delete(col.fieldName);
+
+    // Re-apply all filters
+    if (this.dynamicGroupingFiltering) {
+      this.appliedFiltersEvent.emit(this.appliedFilters);
+      return;
+    }
+    this.applyAllFilters();
+  }
+
+  removeActiveFilter(col: any) {
+    this.activeFilters.delete(col.fieldName);
+    this.colDefs
+      .find((c) => c.fieldName === col.fieldName)
+      .filters.forEach((f: any) => (f.filterValue = ''));
+    this.appliedFilters = this.appliedFilters.filter(
+      (f) => f.fieldName !== col.fieldName,
+    );
+
+    if (this.dynamicGroupingFiltering) {
+      this.appliedFiltersEvent.emit(this.appliedFilters);
+      return;
+    }
+    this.applyAllFilters();
+  }
+
+  /**
+   * @description Method to change the data format to utc
+   * @author Anand Pandey
+   * @param {date} - date value to be changed
+   * @returns date in milliseconds
+   */
+  normalizeDate(dateStr: string) {
+    const d = new Date(dateStr);
+    if (isNaN(d.getTime())) return null;
+    return new Date(
+      Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()),
+    ).getTime();
+  }
+
+  /**
+   * @description
+   * Filters the available set options inside a Set Filter (checkbox filter)
+   * based on the user's search text. This updates only the list shown in
+   * the dropdown
+   * @author Anand Pandey
+   * @param col - Column definition object containing filter config
+   * @param event - Input event from the search textbox
+   * @returns void
+   */
+  filterSetOptions(col: any, event: any) {
+    const text = event.target.value.toLowerCase();
+    col.filteredOptions = col.options.filter((option: any) =>
+      String(option).toLowerCase().includes(text),
+    );
+  }
+
+  /**
+   * @description
+   * Toggles an individual checkbox option inside a Set Filter.   *
+   * @author Anand Pandey
+   * @param col - Column definition object
+   * @param opt - Selected option value
+   * @param event - Checkbox change event
+   * @returns void
+   */
+  toggleSetOption(col: any, opt: any, event: any) {
+    if (event.target.checked) col.selectedValues.add(opt);
+    else col.selectedValues.delete(opt);
+
+    this.applyAllFilters();
+  }
+
+  /**
+   * @description  * Selects or deselects all checkbox options in the Set Filter.
+   * @author Anand Pandey
+   * @param col - Column definition object
+   * @param event - Checkbox change event
+   * @returns void
+   */
+  toggleSelectAll(col: any, event: any) {
+    if (event.target.checked) {
+      col.options.forEach((option: any) => col.selectedValues.add(option));
+    } else {
+      col.selectedValues.clear();
+    }
+    this.applyAllFilters();
+  }
+
+  /**
+   * @description
+   * Checks whether all options inside a Set Filter are currently selected.
+   * @author Anand Pandey
+   * @param col - Column definition object
+   * @returns boolean - TRUE if all options are selected, otherwise FALSE.
+   */
+  isAllSelected(col: any) {
+    return (
+      col.options?.length > 0 && col.options?.length === col.selectedValues.size
+    );
+  }
+
+  /**
+   * @description
+   * Opens the three-dots column menu for the selected column.
+   * Opens only the menu belonging to the clicked column index
+   * @author Anand Pandey
+   * @param {MouseEvent} event - The click event triggered on the three-dots icon.
+   * @param {any} col - The column definition object for which menu is opened.
+   * @param {number} index - Index of the column whose menu has been requested.
+   * @returns {void}
+   */
+  openMenu(event: MouseEvent, col: any, index: number) {
+    event.stopPropagation();
+    this.showPin = false;
+    this.activeFilterIndex = null;
+    this.menuVisible = this.menuVisible.map(() => false);
+
+    if (!this.menuVisible[index]) this.menuVisible[index] = false;
+
+    this.menuVisible[index] = true;
+
+    // setTimeout(() => {
+    //   const rect = (event.target as HTMLElement).getBoundingClientRect();
+    //   const el = this.colActionMenu?.nativeElement;
+    //   const leftAvailableSpace = rect.left;
+    //   const elWidth = el.offsetWidth;
+    //   if (leftAvailableSpace < elWidth) {
+    //     el.style.right = 'unset';
+    //     el.style.left = '0px';
+    //   }
+    // });
+    setTimeout(() => {
+      const table = this.table?.nativeElement;
+      const tableRect = table.getBoundingClientRect();
+      const rect = (event.target as HTMLElement).getBoundingClientRect();
+      const el = this.colActionMenu?.nativeElement;
+      const elWidth = el.offsetWidth;
+      const popUpLeftWidth = rect.left - elWidth;
+      if (popUpLeftWidth < tableRect.left) {
+        el.style.right = 'unset';
+        el.style.left = '0px';
+      }
+    });
+  }
+
+  /**
+   * @description Sort from three dots menu pop up.
+   * @author Anand Pandey
+   * @param {fieldName} string - fieldname.
+   * @param {string} type - Type defines the sorting type whether this is ascending, descending.
+   * @returns {void}
+   */
+  onSort(col: any, type: string, sortingColumIndex: number) {
+    this.sortingType[sortingColumIndex] = type;
+    this.sortingColumnIndex = sortingColumIndex;
+    Object.keys(this.sortingType).forEach((k) => {
+      if (k !== String(sortingColumIndex)) this.sortingType[k] = '';
+    });
+    if (this.sortingType[sortingColumIndex] == 'asc') {
+      this.ascendingOrder(col);
+    } else if (this.sortingType[sortingColumIndex] == 'dsc') {
+      this.descendingOrder(col);
+    } else {
+      this.rowData = structuredClone(this.originalRowData);
+    }
+    // if (this.sortingType[sortingColumIndex] == '') {
+    //   this.rowData = this.originalRowData;
+    // }
+    this.getGroupedData();
+    this.menuVisible[this.currentIndex] = false;
+  }
+
+  /**
+   * @description Generates grouped data based on the selected `groupBy` columns..
+   * @author Anand Pandey
+   * @returns void
+   */
+  getGroupedData() {
+    if (this.groupBy && this.groupBy.length > 0) {
+      if (this.dynamicGroupingFiltering) {
+        return;
+      }
+      this.groupedResult = this.groupData(this.rowData, this.groupBy) || [];
+    }
+  }
+
+  /**
+   * @description Initializes column resize operation when the user presses the mouse on the resize handle.
+   * @author Anand Pandey
+   * @param {MouseEvent} event - The mousedown event triggered on the resize handle.
+   * @param {number} index - Index of the column being resized.
+   * @returns {void}
+   */
+  startResize(event: MouseEvent, index: number) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.isResizing = true;
+    this.resizingColumnIndex = index;
+    this.startX = event.clientX;
+    this.startWidth = this.colDefs[index].width ?? 150;
+
+    this.zone.runOutsideAngular(() => {
+      this.removeMouseMove = this.renderer.listen(
+        'document',
+        'mousemove',
+        (e: MouseEvent) => this.onMouseMove(e),
+      );
+
+      this.removeMouseUp = this.renderer.listen(
+        'document',
+        'mouseup',
+        (e: MouseEvent) => this.stopResize(e),
+      );
+    });
+  }
+
+  /**
+   * @description Handles column resizing as the mouse moves.
+   * @author Anand Pandey
+   * @param {MouseEvent} event - Mouse movement event during resizing.
+   * @returns {void}
+   */
+  onMouseMove = (event: MouseEvent) => {
+    if (this.resizingColumnIndex == null || this.rafId) return;
+
+    this.rafId = requestAnimationFrame(() => {
+      const movement = event.clientX - this.startX;
+      const newWidth = this.startWidth + movement;
+
+      if (newWidth > 50) {
+        this.zone.run(() => {
+          this.colDefs[this.resizingColumnIndex!].width = newWidth;
+          this.cd.markForCheck();
+        });
+      }
+
+      this.rafId = null;
+    });
+  };
+
+  /**
+   * @description Stops the column resizing operation.
+   * Clears resizing state and removes mouse event listeners.
+   * @author Anand Pandey
+   * @param {MouseEvent} event - Mouse up event ending the resize action.
+   * @returns {void}
+   */
+  stopResize = (event: MouseEvent) => {
+    event.stopPropagation();
+
+    this.isResizing = false;
+    this.resizingColumnIndex = null;
+
+    this.removeMouseMove?.();
+    this.removeMouseUp?.();
+
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  };
+
+  /**
+   * @description Recursively groups row data into a hierarchical structure based on the provided group keys.
+   * @author Anand Pandey
+   * @param {any[]} data - The row data to be grouped.
+   * @param {string[]} groupKeys - Ordered list of column keys to group by.
+   * @returns {any[]} A hierarchical grouped structure containing nested group nodes.
+   */
+  groupData(data: any[], groupKeys: string[]): any {
+    if (groupKeys.length === 0) return data;
+    const [currentKey, ...restKeys] = groupKeys;
+
+    const groups: any = {};
+    for (const row of data) {
+      const key = row[currentKey] ?? '';
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(row);
+    }
+
+    // recursively group child arrays
+
+    let result = [];
+
+    for (const key of Object.keys(groups)) {
+      result.push({
+        key,
+        field: currentKey,
+        expanded: false,
+        children: this.groupData(groups[key], restKeys),
+      });
+    }
+
+    return result;
+  }
+
+  /**
+   * @description Toggles the expand/collapse state of a group node.
+   * @author Anand Pandey
+   * @param {any} node - The group node whose expanded state needs to be toggled.
+   * @returns {void}
+   */
+
+  toggleGroup(node: any) {
+    node.expanded = !node.expanded;
+  }
+
+  /**
+   * @description Pin column on the left side.
+   * @author Anand Pandey
+   * @param {any} col - The selected column details from table on clicking pin or unpin from three dots menu.
+   * @param {number} index - The index of column from table on clicking pin or unpin from three dots menu.
+   * @returns {void}
+   */
+
+  pinColumn(col: any, index: number, direction: string) {
+    this.pinActionClicked[col.colId] = direction;
+    col.leftPinned = direction === 'left';
+    col.rightPinned = direction === 'right';
+
+    if (col.leftPinned) {
+      this.colDefs.splice(index, 1);
+      this.colDefs = [col, ...this.colDefs];
+    } else if (col.rightPinned) {
+      this.colDefs.splice(index, 1);
+      this.colDefs.splice(this.colDefs.length - 1, 0, col);
+    } else {
+      const indx = this.originalColDefs.findIndex(
+        (dt) => dt.fieldName === col.fieldName,
+      );
+      if (index >= 0) {
+        this.colDefs.splice(index, 1);
+        this.colDefs.splice(indx, 0, col);
+      }
+    }
+
+    this.updatePinnedOffsets();
+    this.onClickOutside();
+  }
+
+  showPinActions(event: MouseEvent) {
+    event.stopPropagation();
+    const parentEl = event.currentTarget as HTMLElement;
+
+    this.showPin = true;
+    setTimeout(() => {
+      const menuEl = this.pinMenu?.nativeElement;
+      if (!menuEl || !parentEl) return;
+      const parentRect = parentEl.getBoundingClientRect();
+      const menuWidth = menuEl.offsetWidth;
+
+      const viewPortWidth = window.innerWidth;
+      let x = parentRect.right;
+
+      if (x + menuWidth > viewPortWidth) {
+        menuEl.style.right = `${parentRect.width}px`;
+      }
+    });
+  }
+
+  hidePinActions() {
+    this.showPin = false;
+  }
+
+  /**
+   * @description Updates the horizontal left and right offsets of pinned columns by assigning cumulative widths to each pinned column and resetting non-pinned columns.
+   * @author Anand Pandey
+   * @returns void
+   */
+
+  updatePinnedOffsets() {
+    let leftOffset = 0;
+    let rightOffset = 0;
+
+    // LEFT pinned (normal order)
+    this.colDefs.forEach((col) => {
+      if (col.leftPinned) {
+        col.left = leftOffset;
+        col.right = null;
+        leftOffset += col.width || 120;
+      }
+    });
+
+    // RIGHT pinned (REVERSE order)
+    [...this.colDefs].reverse().forEach((col) => {
+      if (col.rightPinned) {
+        col.right = rightOffset;
+        col.left = null;
+        rightOffset += col.width || 120;
+      }
+    });
+  }
+
+  /**
+   * @description Method to parse column value from rowdata object
+   *  according to given field value in column Defination
+   * @author Tarun Kumar
+   * @param row - current row object
+   * @param toParse - field value
+   * @returns string
+   */
+  parseColValue(row: any, col: any): any {
+    if (!col?.fieldName?.includes('.')) {
+      if (Array.isArray(row[col.fieldName])) {
+        if (row[col.fieldName].every((dt: string) => typeof dt === 'string')) {
+          return row[col.fieldName][0];
+        }
+        if (row[col.fieldName].every((dt: any) => typeof dt === 'object')) {
+          return row[col.fieldName][0]?.[col.cellRendererParams?.tagKey];
+        }
+      }
+      return row[col.fieldName] || 'N/A';
+    } else {
+      let toParseArr = col?.fieldName.split('.');
+      let val = row;
+      for (const key of toParseArr) {
+        val = val[key];
+      }
+      return val || 'N/A';
+    }
+  }
+
+  /**
+   * @description method to reset table configuration
+   * @author Tarun Kumar
+   * @param none
+   * @returns void
+   */
+  resetPagination(): void {
+    //this.pageDetails.pageSize = 20;
+    this.pageDetails.currentPage = 1;
+    this.pageDetails.totalPages = 1;
+    this.recordsToShow.min = 0;
+    this.recordsToShow.max = this.pageDetails.pageSize;
+    this.setPageCount();
+  }
+
+  /**
+   * @description method to set total pages count
+   * @author Tarun Kumar
+   * @param none
+   * @returns void
+   */
+  setPageCount(): void {
+    this.pageDetails.totalPages = Math.ceil(
+      this.totalRecords / this.pageDetails.pageSize,
+    );
+  }
+
+  /**
+   * @description method to update table on page size change
+   * @author Tarun Kumar
+   * @param event
+   * @returns void
+   */
+  onPageSizeChanged(event: any): void {
+    this.recordsToShow.min = 0;
+    this.recordsToShow.max = parseInt(event);
+    this.pageDetails.currentPage = 1;
+    this.pageDetails.pageSize = parseInt(event);
+    this.setPageCount();
+    this.onPaginationChange.emit({
+      page: this.pageDetails.currentPage - 1,
+      pageSize: this.pageDetails.pageSize,
+    });
+  }
+
+  /**
+   * @description method to update table on previous button click
+   * @author Tarun Kumar
+   */
+  onBtPrevClick(): void {
+    this.recordsToShow.min = this.recordsToShow.min - this.pageDetails.pageSize;
+    this.recordsToShow.max = this.recordsToShow.max - this.pageDetails.pageSize;
+    if (this.pageDetails.currentPage > 1)
+      this.pageDetails.currentPage = this.pageDetails.currentPage - 1;
+
+    this.onPaginationChange.emit({
+      page: this.pageDetails.currentPage - 1,
+      pageSize: this.pageDetails.pageSize,
+    });
+  }
+
+  /**
+   * @description method to update table on next button click
+   * @author Tarun Kumar
+   */
+  onBtNextClick(): void {
+    this.recordsToShow.min = this.recordsToShow.min + this.pageDetails.pageSize;
+    this.recordsToShow.max = this.recordsToShow.max + this.pageDetails.pageSize;
+
+    if (this.pageDetails.currentPage < this.pageDetails.totalPages)
+      this.pageDetails.currentPage = this.pageDetails.currentPage + 1;
+
+    this.onPaginationChange.emit({
+      page: this.pageDetails.currentPage - 1,
+      pageSize: this.pageDetails.pageSize,
+    });
+  }
+
+  /**
+   * @description method to update table on selecting any page randomly
+   * @author Tarun Kumar
+   * @param event
+   */
+  goToSelectedPage(event: any): void {
+    let pageNo = event.target.value;
+    if (pageNo < 1) {
+      this.pageDetails.currentPage = 1;
+    } else if (pageNo > this.pageDetails.totalPages) {
+      this.pageDetails.currentPage = this.pageDetails.totalPages;
+    }
+    this.recordsToShow.max =
+      this.pageDetails.currentPage * this.pageDetails.pageSize;
+    this.recordsToShow.min =
+      this.pageDetails.currentPage * this.pageDetails.pageSize -
+      this.pageDetails.pageSize;
+
+    this.onPaginationChange.emit({
+      page: this.pageDetails.currentPage - 1,
+      pageSize: this.pageDetails.pageSize,
+    });
+  }
+
+  /**
+   * @description method to sort data according to type and column
+   * @author Tarun Kumar
+   * @param sortingColumIndex
+   * @param col
+   * @param sortingType
+   */
+  onSortingRowData(sortingColumIndex: number, col: any): void {
+    if (!col.sortable) return;
+    this.sortingColumnIndex = sortingColumIndex;
+    Object.keys(this.sortingType).forEach((k) => {
+      if (k !== String(sortingColumIndex)) this.sortingType[k] = '';
+    });
+
+    if (!this.sortingType[sortingColumIndex]) {
+      this.sortingType[sortingColumIndex] = 'asc';
+    } else {
+      this.sortingType[sortingColumIndex] =
+        this.sortingType[sortingColumIndex] === 'asc' ? 'dsc' : '';
+    }
+
+    if (this.sortingType[sortingColumIndex] == 'asc') {
+      this.ascendingOrder(col);
+    } else if (this.sortingType[sortingColumIndex] == 'dsc') {
+      this.descendingOrder(col);
+    } else {
+      this.rowData = structuredClone(this.originalRowData);
+    }
+
+    this.getGroupedData();
+  }
+
+  /**
+   * @description method to sort table in ascending order according to given field
+   * @param fieldName
+   */
+  ascendingOrder(col: any): void {
+    this.rowData = this.rowData.sort((a, b) => {
+      const valA = this.parseColValue(a, col);
+      const valB = this.parseColValue(b, col);
+      if (typeof valA === 'string' && typeof valB === 'string') {
+        return valA.localeCompare(valB);
+      } else {
+        if (valA > valB) {
+          return 1;
+        } else {
+          return -1;
+        }
+      }
+    });
+  }
+
+  /**
+   * @description method to sort table in descending order according to given field
+   * @param fieldName
+   */
+  descendingOrder(col: any): void {
+    this.rowData = this.rowData.sort((a, b) => {
+      const valA = this.parseColValue(a, col);
+      const valB = this.parseColValue(b, col);
+      if (typeof valA === 'string' && typeof valB === 'string') {
+        return valA.localeCompare(valB) * -1;
+      } else {
+        if (valA > valB) {
+          return -1;
+        } else {
+          return 1;
+        }
+      }
+    });
+  }
+
+  /**
+   * @description method to check/uncheck all rows on header checkbox selection/deselection
+   * @author Tarun Kumar
+   * @param event
+   */
+  onHeaderCheckboxChange(event: any): void {
+    if (event.target.checked) {
+      this.rowData = this.rowData.map((data) => {
+        data.isSelected = true;
+        return data;
+      });
+      this.selectedRow = JSON.parse(JSON.stringify(this.rowData));
+      this.onCheckboxSelection.emit(this.rowData);
+    } else {
+      this.rowData = this.rowData.map((data) => {
+        if (!data.isLocked) data.isSelected = false;
+        return data;
+      });
+      this.selectedRow = [];
+      this.onCheckboxSelection.emit([]);
+    }
+  }
+
+  /**
+   * @description method to check/uncheck row on row checkbox selection/deselection
+   * @author Tarun Kumar
+   * @param event
+   */
+  onRowCheckboxSelection(event: any): void {
+    if (event.target.checked) {
+      let ind = this.rowData.findIndex(
+        (item: any) => item.rowId == event.target.id,
+      );
+      this.rowData[ind].isSelected = true;
+      if (
+        this.checkboxSelectionType != 'multiple' &&
+        this.selectedRow.length > 0
+      ) {
+        (
+          document.getElementById(this.selectedRow[0].rowId) as HTMLInputElement
+        ).checked = false;
+        this.selectedRow = [];
+      }
+      this.selectedRow.push(this.rowData[ind]);
+
+      this.onCheckboxSelection.emit(this.selectedRow);
+    } else {
+      let ind = this.rowData.findIndex(
+        (item: any) => item.rowId == event.target.id,
+      );
+      this.rowData[ind].isSelected = false;
+      let i = this.selectedRow.findIndex(
+        (item: any) => item.rowId == event.target.id,
+      );
+      this.selectedRow.splice(i, 1);
+      this.onCheckboxSelection.emit(this.selectedRow);
+    }
+    this.cd.detectChanges();
+  }
+  /**
+   * @description method to check/uncheck all rows on header checkbox selection/deselection
+   * @author Tarun Kumar
+   * @param col
+   * @returns {object}
+   */
+  getStyle(col: any, type?: string): object {
+    const style: any = {
+      width: `${col.width ?? 150}px`,
+      minWidth: `${col.minWidth ?? 50}px`,
+    };
+    if (col.isAction) {
+      style.position = 'sticky';
+      style.right = '0px';
+      style.zIndex = 14;
+      style.background = '#fff';
+      style.width = '60px';
+      style.minWidth = '60px';
+    } else if (col.leftPinned) {
+      style.position = 'sticky';
+      style.left = col.left + 'px';
+      style.zIndex = 12;
+      style.background = '#fff';
+    } else if (col.rightPinned) {
+      style.position = 'sticky';
+      style.right = col.right + 'px';
+      style.zIndex = 12;
+      style.background = '#fff';
+    } else {
+      style.position = '';
+    }
+    if (type === 'action') {
+      style.background = '#f0f0f0';
+    }
+    return style;
+  }
+  onClickOutside() {
+    this.showPageSizeList = false;
+    this.activeFilterIndex = null;
+    this.menuVisible = this.menuVisible.map(() => false);
+  }
+
+  infinityScroll(event: any) {
+    if (
+      event.target.offsetHeight + event.target.scrollTop >=
+        event.target.scrollHeight - 1 &&
+      this.rowData.length
+    ) {
+      this.onScrollEmitter.emit();
+    }
+  }
+
+  checkAllSelected(): boolean {
+    if (!this.rowData.length) return false;
+    return this.selectedRow.length == this.rowData.length;
+  }
+  checkInterminate(): boolean {
+    if (!this.rowData.length) return false;
+    return (
+      this.selectedRow.length > 0 &&
+      this.selectedRow.length < this.rowData.length
+    );
+  }
+
+  /**
+   * @author Tarun Kumar
+   * @description function triggered when the drag starts
+   * @param {event object, index}
+   * @returns {void}
+   */
+  onDragStart(event: DragEvent, index: number) {
+    this.dragGroupIndex = null;
+    const target = event.target as HTMLElement;
+    if (this.isResizing) {
+      event.preventDefault();
+      return;
+    }
+    this.draggedIndex = index;
+
+    // For column reorder.
+    event.dataTransfer?.setData('text/plain', index.toString());
+
+    // For group panel
+    event.dataTransfer?.setData('columnIndex', index.toString());
+
+    const th = target.closest('th') as HTMLElement;
+    if (!th) return;
+    const clone = th.cloneNode(true) as HTMLElement;
+
+    this.copyComputedStyles(th, clone);
+
+    clone.style.position = 'absolute';
+    clone.style.top = '-9999px';
+    clone.style.left = '-9999px';
+    clone.style.pointerEvents = 'none';
+
+    document.body.appendChild(clone);
+    event.dataTransfer?.setDragImage(clone, 0, 0);
+    setTimeout(() => clone.remove(), 0);
+  }
+
+  onGroupDragStart(event: DragEvent, index: number) {
+    event.dataTransfer?.setData('groupIndex', index.toString());
+    this.dragGroupIndex = index;
+  }
+
+  /**
+   * @author Anand Pandey
+   * @description Copies computed CSS styles from the source element to the target element, including all child elements recursively.
+   * @param {HTMLElement} source - Original element.
+   * @param {HTMLElement} target - Cloned element.
+   * @returns {void}
+   */
+  copyComputedStyles(source: HTMLElement, target: HTMLElement) {
+    const computed = window.getComputedStyle(source);
+    for (const prop of computed) {
+      target.style.setProperty(prop, computed.getPropertyValue(prop));
+    }
+
+    // Copy children styles recursively
+    const sourceChildren = Array.from(source.children) as HTMLElement[];
+    const targetChildren = Array.from(target.children) as HTMLElement[];
+
+    sourceChildren.forEach((srcChild, i) => {
+      const tgtChild = targetChildren[i] as HTMLElement;
+      if (srcChild && tgtChild) {
+        this.copyComputedStyles(srcChild, tgtChild);
+      }
+    });
+  }
+
+  /**
+   * @author Tarun Kumar
+   * @description function to track the index of the element being dragged over and allow dropping
+   * @param {event object, index}
+   * @returns {void}
+   */
+  onDragOver(event: DragEvent, index: number) {
+    event.preventDefault();
+    this.isResizing = false;
+    if (this.dragOverIndex !== index) {
+      this.dragOverIndex = index;
+    }
+  }
+
+  /**
+   * @author Tarun Kumar
+   * @description function to Reorder the items on drop
+   * @param {event object, index}
+   * @returns {void}
+   */
+  onDrop(event: DragEvent, index: number) {
+    event.preventDefault();
+    if (this.draggedIndex === null) return;
+    const draggedItem = this.colDefs[this.draggedIndex];
+    this.colDefs.splice(this.draggedIndex, 1);
+    this.colDefs.splice(index, 0, draggedItem);
+    this.draggedIndex = null;
+    this.dragOverIndex = null;
+  }
+
+  /**
+   * @author Tarun Kumar
+   * @description function to reset dragOverIndex when the drag ends
+   * @param {none}
+   * @returns {void}
+   */
+  onDragEnd() {
+    this.draggedIndex = null;
+    this.dragOverIndex = null;
+  }
+
+  /**
+   * @description Handles drag over on group panel to allow dropping.
+   * @author Anand Pandey
+   * @param {DragEvent} event
+   * @returns {void}
+   */
+  onGroupDragOver(event: DragEvent) {
+    event.preventDefault();
+  }
+
+  /**
+   * @description Handles drag over on a group tag and updates the target index for reordering.
+   * @author Anand Pandey
+   * @param {DragEvent} event
+   * @param {number} index
+   * @returns {void}
+   */
+  onActiveDragOver(event: DragEvent, index: number) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragGroupIndex = index;
+  }
+
+  /**
+   * @description Handles drop on group panel and routes the drop to group reordering or column grouping logic.
+   * @author Anand Pandey
+   * @param {DragEvent} event
+   * @returns {void}
+   */
+  onGroupDrop(event: DragEvent) {
+    const colIndex = Number(event.dataTransfer?.getData('columnIndex'));
+    const groupIndex = Number(event.dataTransfer?.getData('groupIndex'));
+    const target = event.target as HTMLElement;
+    const isOverGroupPanel = target.closest('.group-tag');
+    if (
+      this.dragGroupIndex !== null &&
+      this.dragGroupIndex >= 0 &&
+      groupIndex >= 0
+    ) {
+      if (!isOverGroupPanel) {
+        this.dragGroupIndex = this.activeGroups.length - 1;
+      }
+      this.onActiveGroupDrop(event, this.dragGroupIndex);
+    } else {
+      if (isNaN(colIndex)) return;
+      if (colIndex) this.dragGroupIndex = null;
+
+      const col = this.colDefs[colIndex];
+
+      const el = this.activeGroups.find((c) => c.fieldName === col.fieldName);
+      if (!el) {
+        this.activeGroups.push(col);
+        this.groupBy.push(col.fieldName);
+      }
+      this.colDefs.splice(colIndex, 1);
+      if (this.dynamicGroupingFiltering) {
+        this.activeGroupsEvent.emit(this.groupBy);
+        return;
+      }
+      // this.applyGrouping();
+      this.getGroupedData();
+    }
+  }
+
+  /**
+   * @description Handles column grouping triggered from the column action menu by adding the column to the active group list,
+   * removing it from visible columns, and recalculating grouped row data.
+   *
+   * @param {any} col - The column definition selected for grouping.
+   * @param {number} index - Index of the column in the current column definitions array.
+   * @returns {void}
+   */
+
+  groupByColumnAction(col: any, index: number) {
+    this.activeGroups.push(col);
+    this.groupBy.push(col.fieldName);
+    this.colDefs.splice(index, 1);
+    if (this.dynamicGroupingFiltering) {
+      this.activeGroupsEvent.emit(this.groupBy);
+      return;
+    }
+    this.getGroupedData();
+    this.onClickOutside();
+  }
+
+  /**
+   * @description Handles drop on a group tag and reorders the active groups accordingly.
+   * @author Anand Pandey
+   * @param {DragEvent} event
+   * @param {number} index
+   * @returns {void}
+   */
+  onActiveGroupDrop(event: DragEvent, index: number) {
+    event.stopPropagation();
+    const groupIndex = Number(event.dataTransfer?.getData('groupIndex'));
+    if (isNaN(groupIndex)) return;
+    if (groupIndex === index) return;
+    const item = this.groupBy.splice(groupIndex, 1)[0];
+    this.groupBy.splice(index, 0, item);
+
+    const col = this.activeGroups.splice(groupIndex, 1)[0];
+    this.activeGroups.splice(index, 0, col);
+    if (this.dynamicGroupingFiltering) {
+      this.activeGroupsEvent.emit(this.groupBy);
+      return;
+    }
+    this.getGroupedData();
+  }
+
+  /**
+   * @description Removes a group tag and restores the column to available columns list.
+   * @author Anand Pandey
+   * @param {any} col
+   * @param {number} id
+   * @returns {void}
+   */
+  removeGroup(col: any, id: number) {
+    this.activeGroups.splice(id, 1);
+    const colIndex = this.originalColDefs.findIndex(
+      (dt) => dt.fieldName === col.fieldName,
+    );
+    this.colDefs.splice(colIndex, 0, col);
+    this.groupBy.splice(id, 1);
+    if (this.groupBy.length === 0) {
+      this.groupedResult = [];
+      if (this.dynamicGroupingFiltering) {
+        this.activeGroupsEvent.emit(this.groupBy);
+        return;
+      }
+    } else {
+      if (this.dynamicGroupingFiltering) {
+        this.activeGroupsEvent.emit(this.groupBy);
+        return;
+      }
+      this.getGroupedData();
+    }
+  }
+
+  toggleDropdown(): void {
+    this.showDropdown = !this.showDropdown;
+  }
+
+  selectFilter(option: any, col: any): void {
+    col.filters[0].filterOperation = option.value;
+    this.showDropdown = false;
+  }
+
+  getSelectedFilterLabel(value: string): string {
+    return this.filterOptions.find((o) => o.value === value)?.label || '';
+  }
+
+  toggleFilter(col: any, index: number, event: MouseEvent) {
+    event.stopPropagation();
+    this.activeFilterIndex = this.activeFilterIndex === index ? null : index;
+    this.menuVisible = this.menuVisible.map(() => false);
+  }
+
+  onMouseEnterHeader(index: number) {
+    this.showMoveIcon[index] = true;
+  }
+
+  onMouseLeaveHeader(index: number) {
+    this.showMoveIcon[index] = false;
+  }
+
+  enableColumnDrag(event: MouseEvent, index: number) {
+    event.stopPropagation();
+    this.columnDraggable[index] = true;
+  }
+
+  disableColumnDrag(event: MouseEvent, index: number) {
+    event.stopPropagation();
+    this.columnDraggable[index] = false;
+  }
+
+  dateTimeSelected(date: any) {
+    this.applyAllFilters();
+  }
+
+  convertToNumber(value: number | string): number {
+    return Number(value);
+  }
+
+  hideSettings(): void {
+    this.onHideSettings.emit(false);
+  }
+
+  dragRow(e: Event, row: any) {
+    this.draggedRowData = row;
+    this.isRowSelected = this.selectedRow.some((s) => s.rowId === row.rowId);
+  }
+
+  allowRowDrop(e: Event) {
+    e.preventDefault();
+  }
+  dropRow(targetRow: any) {
+    let sourceIndex = null;
+    let targetIndex = this.rowData.findIndex(
+      (dt: any) => dt.rowId === targetRow.rowId,
+    );
+
+    if (this.selectedRow.length > 0 && this.isRowSelected) {
+      sourceIndex = this.rowData.findIndex(
+        (dt: any) => dt.rowId === this.selectedRow[0].rowId,
+      );
+
+      const selectedIds = new Set(this.selectedRow.map((r) => r.rowId));
+      this.rowData = this.rowData.filter((dt) => !selectedIds.has(dt.rowId));
+      if (sourceIndex > this.rowData.length) {
+        sourceIndex = sourceIndex - this.selectedRow.length + 1;
+      }
+
+      if (targetIndex >= this.rowData.length) {
+        targetIndex = targetIndex - this.selectedRow.length + 1;
+      }
+      this.rowData.splice(sourceIndex, 0, ...this.selectedRow);
+    } else {
+      sourceIndex = this.rowData.findIndex(
+        (dt: any) => dt.rowId === this.draggedRowData.rowId,
+      );
+    }
+    if (sourceIndex < 0 || targetIndex < 0) return;
+    this.moveRow(sourceIndex, targetIndex);
+  }
+
+  moveRow(from: number, to: number) {
+    let rowMoved = [];
+    if (this.selectedRow.length > 0 && this.isRowSelected) {
+      rowMoved = this.rowData.splice(from, this.selectedRow.length);
+    } else {
+      rowMoved = this.rowData.splice(from, 1);
+    }
+
+    this.rowData.splice(to, 0, ...rowMoved);
+    this.isRowSelected = false;
+  }
+
+  clearAllFilter() {
+    this.colDefs.forEach((col) => {
+      this.resetFilter(col);
+    });
+  }
+}