cats-data-grid 0.0.2 → 0.0.5

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

@@ -0,0 +1,1389 @@
+<div class="tableArea" #table>
+  @if (settingsRequired && settingsClicked) {
+    <div
+      class="setting_options"
+      appOutsideClick
+      (clickOutside)="hideSettings()"
+    >
+      <div class="column_header">Select Headers</div>
+      <div class="checkbox_container">
+        <input
+          class="custom_check_box"
+          type="checkbox"
+          [checked]="activeAll"
+          (change)="activeAllSelection($event)"
+        />
+        <span>Select All</span>
+      </div>
+
+      <div class="item_container" id="table_scroll">
+        @for (col of colDefs; track col.colId) {
+          <div class="column_item checkbox_container">
+            <input
+              class="custom_check_box"
+              type="checkbox"
+              [checked]="col.active"
+              (change)="changeActiveColSelection($event, col)"
+              [disabled]="col.headerLocked"
+            />
+            <span>{{ col.headerName | titlecase }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  }
+  @if (groupByRequired) {
+    <!-- Group Panel -->
+    <div
+      class="group_panel"
+      (dragover)="onGroupDragOver($event)"
+      (drop)="onGroupDrop($event)"
+    >
+      <img alt="" src="images/t-data-pipeline.svg" class="icon" />
+      @for (g of activeGroups; track $index) {
+        <div
+          class="group_tag"
+          draggable="true"
+          (dragstart)="onGroupDragStart($event, $index)"
+          (dragover)="onActiveDragOver($event, $index)"
+          (drop)="onActiveGroupDrop($event, $index)"
+        >
+          <img src="images/t-gripper.svg" alt="" />
+          <span>{{ g.headerName }}</span>
+          <button class="remove_tag" (click)="removeGroup(g, $index)">
+            <img src="images/t-x.svg" alt="" />
+          </button>
+        </div>
+        <img src="images/chevron-right.svg" alt="" class="divider" />
+      }
+      @if (activeGroups.length === 0) {
+        <div class="group_placeholder">Drag here to set row groups</div>
+      }
+    </div>
+  }
+  @if (activeFilters.size > 0) {
+    <div class="active_filters_container">
+      <div class="tag_wrapper">
+        @for (filter of appliedFilters; track filter.fieldName) {
+          <div class="active_filter_tag">
+            <div class="active_filter_label ellipsis">
+              @for (item of filter.filters; track $index) {
+                @if (item.filterValue) {
+                  @if ($index > 0 && item.filterValue) {
+                    <span class="filter_logic"> {{ filter.filterLogic }} </span>
+                  }
+                  <span class="filter_field">{{ filter.fieldName }}:</span>
+                  <span class=""> {{ item.filterOperation }}</span>
+                  <span class="filter_value">{{ item.filterValue }}</span>
+                }
+              }
+            </div>
+            <button
+              class="remove_filter_btn"
+              (click)="removeActiveFilter(filter)"
+            >
+              <img src="images/t-x.svg" alt="" />
+            </button>
+          </div>
+        }
+      </div>
+      <div class="clear_all" (click)="clearAllFilter()">Clear All Filters</div>
+    </div>
+  }
+  <div
+    class="table_wrapper global"
+    id="table_scroll"
+    #parent
+    (scroll)="infinityScroll($event)"
+    [ngClass]="{ tbody_height: activeFilters.size > 0 }"
+    [class.no-horizontal-scroll]="
+      (!rowData || rowData.length === 0) &&
+      (!groupedResult || groupedResult.length === 0)
+    "
+  >
+    <div class="table-inner-wrapper">
+      <table cellspacing="0" cellpadding="0">
+        <thead class="sticky-top">
+          <tr>
+            @if (
+              checkBoxSelection &&
+              checkboxSelectionType == "multiple" &&
+              atLeastOneColumnChecked
+            ) {
+              <th style="min-width: 50px; width: 50px">
+                <div class="th_wraper">
+                  <span class="checkbox_container"
+                    ><input
+                      class="pointer custom_check_box"
+                      type="checkbox"
+                      name=""
+                      id=""
+                      [checked]="checkAllSelected()"
+                      [indeterminate]="checkInterminate()"
+                      (change)="onHeaderCheckboxChange($event)"
+                  /></span>
+                  <div class="filter_three_dot_wrapper">
+                    <span class="resize-handle default_cursor"> | </span>
+                  </div>
+                </div>
+              </th>
+            }
+            <!-- @else{
+          <th></th>
+          }  -->
+            @if (activeGroups.length > 0) {
+              <th class="active_group">
+                <div class="th_wraper">
+                  <div class="text_wrapper">
+                    <span class="ellipsis headerName">Group</span>
+                  </div>
+                  <div class="filter_three_dot_wrapper">
+                    <div class="three-dots">
+                      <img src="images/t-more-vertical.svg" />
+                    </div>
+                  </div>
+                </div>
+              </th>
+            }
+            @for (col of colDefs; track col.colId) {
+              @if (col.active) {
+                <th
+                  [ngStyle]="getStyle(col, 'action')"
+                  [ngClass]="{
+                    'drag-over': dragOverIndex === $index,
+                    pinned_column: col.leftPinned || col.rightPinned,
+                  }"
+                  (dragover)="onDragOver($event, $index)"
+                  (drop)="onDrop($event, $index)"
+                  (mouseenter)="onMouseEnterHeader($index)"
+                  (mouseleave)="onMouseLeaveHeader($index)"
+                >
+                  <div class="th_wraper">
+                    <div
+                      class="text_wrapper"
+                      [ngStyle]="getStyle(col, 'action')"
+                      (click)="onSortingRowData($index, col)"
+                    >
+                      @if (showMoveIcon[$index] && !col.isAction) {
+                        <img
+                          src="images/t-move.svg"
+                          class="move-icon"
+                          [draggable]="!isResizing || columnDraggable[$index]"
+                          (dragstart)="onDragStart($event, $index)"
+                          (dragend)="onDragEnd()"
+                          (mouseenter)="enableColumnDrag($event, $index)"
+                          (mouseleave)="disableColumnDrag($event, $index)"
+                        />
+                      }
+                      <span class="ellipsis headerName">{{
+                        col?.headerName
+                      }}</span>
+
+                      @if (
+                        sortingRequired &&
+                        sortingColumnIndex == $index &&
+                        col?.sortable &&
+                        !col.isAction
+                      ) {
+                        <span class="sorting_icon">
+                          @if (sortingType[$index] === "asc") {
+                            <img
+                              src="images/t-arrow-up.svg"
+                              class="sorting_up"
+                              [draggable]="false"
+                              (dragstart)="
+                                $event.preventDefault();
+                                $event.stopPropagation()
+                              "
+                            />
+                          }
+                          @if (sortingType[$index] === "dsc") {
+                            <!-- <i class="fa fa-caret-down" [ngClass]="sortingColumnIndex == $index && sortingType == 'dsc' ? 'muted_sort' : ''"></i> -->
+                            <img
+                              src="images/t-arrow-down.svg"
+                              class="sorting_down"
+                              [draggable]="false"
+                              (dragstart)="
+                                $event.preventDefault();
+                                $event.stopPropagation()
+                              "
+                            />
+                          }
+                        </span>
+                      }
+                    </div>
+                    <div class="filter_three_dot_wrapper">
+                      <!-- Column Filters Logic-->
+                      @if (filterRequired && col.filterable) {
+                        <div
+                          #trigger
+                          class="filters"
+                          (click)="toggleFilter(col, $index, $event)"
+                        >
+                          @if (activeFilters.has(col.fieldName)) {
+                            <img
+                              src="images/t-filter-applied.svg"
+                              class="filter-icon"
+                              [draggable]="false"
+                              (dragstart)="
+                                $event.preventDefault();
+                                $event.stopPropagation()
+                              "
+                            />
+                          } @else {
+                            <img
+                              src="images/t-filter.svg"
+                              class="filter-icon"
+                              [draggable]="false"
+                              (dragstart)="
+                                $event.preventDefault();
+                                $event.stopPropagation()
+                              "
+                            />
+                          }
+                          @if (activeFilterIndex === $index) {
+                            <div class="filt_wrap">
+                              <div
+                                adaptivePosition
+                                [trigger]="trigger"
+                                [parentContainer]="parent"
+                                [matchWidth]="false"
+                                class="filter_wrapper"
+                                id="filter_wrapper-{{ $index }}"
+                                (click)="$event.stopPropagation()"
+                                appOutsideClick
+                                (clickOutside)="onClickOutside()"
+                              >
+                                <!-- Text Filter -->
+                                @if (col.filterType === "text") {
+                                  <lib-common-input
+                                    [options]="filterOptions"
+                                    [selectedValue]="
+                                      col.filters[0].filterOperation
+                                    "
+                                    placeholder="Select filter"
+                                    (valueChange)="
+                                      col.filters[0].filterOperation = $event
+                                    "
+                                  ></lib-common-input>
+
+                                  <div class="search_input">
+                                    <img src="images/search.svg" alt="" />
+                                    <input
+                                      type="text"
+                                      placeholder="Filter"
+                                      [(ngModel)]="col.filters[0].filterValue"
+                                      (keyup)="applyAllFilters()"
+                                    />
+                                  </div>
+
+                                  <!-- <input
+                         type="text"
+                         [(ngModel)]="col.filters[0].filterValue"
+                         placeholder="Filter…"
+                         (keyup)="applyAllFilters()"
+                       /> -->
+
+                                  @if (col.filters[0].filterValue) {
+                                    <div class="logic-row radio_option">
+                                      <input
+                                        type="radio"
+                                        name="filterLogic{{ col.fieldName }}"
+                                        [(ngModel)]="col.filterLogic"
+                                        value="AND"
+                                        id="{{ $index }}"
+                                        (change)="applyAllFilters()"
+                                      />
+                                      <label [for]="$index">AND</label>
+
+                                      <input
+                                        type="radio"
+                                        name="filterLogic{{ col.fieldName }}"
+                                        [(ngModel)]="col.filterLogic"
+                                        value="OR"
+                                        id="{{ $index + 1 }}"
+                                        (change)="applyAllFilters()"
+                                      />
+                                      <label [for]="$index + 1">OR</label>
+                                    </div>
+
+                                    <lib-common-input
+                                      [options]="filterOptions"
+                                      [selectedValue]="
+                                        col.filters[1].filterOperation
+                                      "
+                                      placeholder="Select filter"
+                                      (valueChange)="
+                                        col.filters[1].filterOperation = $event
+                                      "
+                                    ></lib-common-input>
+                                    <!-- <input
+                         type="text"
+                         [(ngModel)]="col.filters[1].filterValue"
+                         placeholder="Filter…"
+                         (keyup)="applyAllFilters()"
+                       /> -->
+
+                                    <div class="search_input">
+                                      <img src="images/search.svg" alt="" />
+                                      <input
+                                        type="text"
+                                        placeholder="Filter"
+                                        [(ngModel)]="col.filters[1].filterValue"
+                                        (keyup)="applyAllFilters()"
+                                      />
+                                    </div>
+                                  }
+                                }
+
+                                <!-- Number Filter -->
+                                @if (col.filterType === "number") {
+                                  <lib-common-input
+                                    [options]="numberFilterOptions"
+                                    [selectedValue]="
+                                      col.filters[0].filterOperation
+                                    "
+                                    placeholder="Select filter"
+                                    (valueChange)="
+                                      col.filters[0].filterOperation = $event
+                                    "
+                                  ></lib-common-input>
+
+                                  <!-- <input
+                         type="number"
+                         [(ngModel)]="col.filters[0].filterValue"
+                         (input)="applyAllFilters()"
+                       /> -->
+
+                                  <div class="search_input">
+                                    <img src="images/search.svg" alt="" />
+                                    <input
+                                      type="number"
+                                      placeholder="Filter"
+                                      [(ngModel)]="col.filters[0].filterValue"
+                                      (input)="applyAllFilters()"
+                                    />
+                                  </div>
+
+                                  @if (col.filters[0].filterValue) {
+                                    <div class="logic-row radio_option">
+                                      <input
+                                        type="radio"
+                                        name="filterLogic{{ col.fieldName }}"
+                                        [(ngModel)]="col.filterLogic"
+                                        value="AND"
+                                        id="{{ $index }}"
+                                        (change)="applyAllFilters()"
+                                      />
+                                      <label [for]="$index">AND</label>
+
+                                      <input
+                                        type="radio"
+                                        name="filterLogic{{ col.fieldName }}"
+                                        [(ngModel)]="col.filterLogic"
+                                        value="OR"
+                                        id="{{ $index + 1 }}"
+                                        (change)="applyAllFilters()"
+                                      />
+                                      <label [for]="$index + 1">OR</label>
+                                    </div>
+
+                                    <lib-common-input
+                                      [options]="numberFilterOptions"
+                                      [selectedValue]="
+                                        col.filters[1].filterOperation
+                                      "
+                                      placeholder="Select filter"
+                                      (valueChange)="
+                                        col.filters[1].filterOperation = $event
+                                      "
+                                    ></lib-common-input>
+
+                                    <div class="search_input">
+                                      <img src="images/search.svg" alt="" />
+                                      <input
+                                        type="text"
+                                        placeholder="Filter"
+                                        [(ngModel)]="col.filters[1].filterValue"
+                                        (keyup)="applyAllFilters()"
+                                      />
+                                    </div>
+                                    <!-- <input
+                         type="text"
+                         [(ngModel)]="col.filters[1].filterValue"
+                         placeholder="Filter…"
+                         (keyup)="applyAllFilters()"
+                       /> -->
+                                  }
+                                }
+
+                                <!-- DATE FILTER -->
+                                @if (col.filterType === "date") {
+                                  <lib-common-input
+                                    [options]="numberFilterOptions"
+                                    [selectedValue]="
+                                      col.filters[0].filterOperation
+                                    "
+                                    placeholder="Select filter"
+                                    (valueChange)="
+                                      col.filters[0].filterOperation = $event
+                                    "
+                                  ></lib-common-input>
+
+                                  <!-- <input
+                         type="date"
+                         [(ngModel)]="col.filters[0].filterValue"
+                         (change)="applyAllFilters()"
+                       /> -->
+                                  <lib-common-calendar
+                                    [dateConfig]="dateConfig"
+                                    [(ngModel)]="col.filters[0].filterValue"
+                                    (dateTimeSelected)="
+                                      dateTimeSelected($event)
+                                    "
+                                  ></lib-common-calendar>
+
+                                  @if (col.filters[0].filterValue) {
+                                    <div class="logic-row radio_option">
+                                      <input
+                                        type="radio"
+                                        name="filterLogic{{ col.fieldName }}"
+                                        [(ngModel)]="col.filterLogic"
+                                        value="AND"
+                                        id="{{ $index }}"
+                                        (change)="applyAllFilters()"
+                                      />
+                                      <label [for]="$index">AND</label>
+
+                                      <input
+                                        type="radio"
+                                        name="filterLogic{{ col.fieldName }}"
+                                        [(ngModel)]="col.filterLogic"
+                                        value="OR"
+                                        id="{{ $index + 1 }}"
+                                        (change)="applyAllFilters()"
+                                      />
+                                      <label [for]="$index + 1">OR</label>
+                                    </div>
+
+                                    <lib-common-input
+                                      [options]="numberFilterOptions"
+                                      [selectedValue]="
+                                        col.filters[1].filterOperation
+                                      "
+                                      placeholder="Select filter"
+                                      (valueChange)="
+                                        col.filters[1].filterOperation = $event
+                                      "
+                                    ></lib-common-input>
+
+                                    <lib-common-calendar
+                                      [dateConfig]="dateConfig"
+                                      [(ngModel)]="col.filters[1].filterValue"
+                                      (dateTimeSelected)="
+                                        dateTimeSelected($event)
+                                      "
+                                    ></lib-common-calendar>
+                                  }
+                                }
+
+                                <!-- SET FILTER (CHECKBOX LIST) -->
+                                @if (col.filterType === "set") {
+                                  <!-- <input
+                         type="text"
+                         placeholder="Search..."
+                         (input)="filterSetOptions(col, $event)"
+                       /> -->
+                                  <div class="search_input">
+                                    <img src="images/search.svg" alt="" />
+                                    <input
+                                      type="text"
+                                      placeholder="Search..."
+                                      (input)="filterSetOptions(col, $event)"
+                                    />
+                                  </div>
+
+                                  <div class="set_option_details">
+                                    <label class="checkbox_container">
+                                      <input
+                                        class="custom_check_box"
+                                        type="checkbox"
+                                        [checked]="isAllSelected(col)"
+                                        (change)="toggleSelectAll(col, $event)"
+                                      />
+                                      (Select All)
+                                    </label>
+                                    <div class="set_options" id="table_scroll">
+                                      @for (
+                                        opt of col.filteredOptions;
+                                        track $index
+                                      ) {
+                                        <label class="checkbox_container">
+                                          <input
+                                            class="custom_check_box"
+                                            type="checkbox"
+                                            [checked]="
+                                              col.selectedValues.has(opt)
+                                            "
+                                            (change)="
+                                              toggleSetOption(col, opt, $event)
+                                            "
+                                          />
+                                          {{ opt }}
+                                        </label>
+                                      }
+                                    </div>
+                                  </div>
+                                }
+                                <div class="filter_btn">
+                                  <button
+                                    class="reset_btn"
+                                    type="button"
+                                    (click)="resetFilter(col)"
+                                  >
+                                    Reset
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          }
+                        </div>
+                      }
+
+                      <!-- Three dots menu-->
+                      <div #triggerColMenu>
+                        @if (threeDotsMenuRequired && col.columnAction) {
+                          <div
+                            class="three-dots"
+                            (click)="openMenu($event, col, $index)"
+                          >
+                            <img
+                              src="images/t-more-vertical.svg"
+                              [draggable]="false"
+                              (dragstart)="
+                                $event.preventDefault();
+                                $event.stopPropagation()
+                              "
+                            />
+                          </div>
+                        }
+                      </div>
+                      @if (!col.isAction) {
+                        <span
+                          class="resize-handle"
+                          (mousedown)="startResize($event, $index)"
+                        >
+                          |
+                        </span>
+                      }
+                    </div>
+                  </div>
+
+                  <!-- popup open -->
+                  @if (menuVisible[$index]) {
+                    <div
+                      #colActionMenu
+                      class="dropdown_wrapper"
+                      adaptivePosition
+                      [trigger]="triggerColMenu"
+                      [parentContainer]="parent"
+                      [matchWidth]="false"
+                      [isColumnActionMenu]="true"
+                      (click)="$event.stopPropagation()"
+                      appOutsideClick
+                      (clickOutside)="onClickOutside()"
+                    >
+                      <div class="right_click_dropdown" id="table_scroll">
+                        @if (
+                          sortingType[$index] === "dsc" ||
+                          sortingType[$index] === ""
+                        ) {
+                          <div
+                            class="right_click_item"
+                            (click)="onSort(col, 'asc', $index)"
+                          >
+                            <div class="left_item">
+                              <img
+                                src="images/arrow-up.svg"
+                                class="sorting_up"
+                                [ngClass]="{ disable: !col.sortable }"
+                              />
+                              <span class="text">Sort Ascending</span>
+                            </div>
+                          </div>
+                        }
+                        @if (
+                          sortingType[$index] === "asc" ||
+                          sortingType[$index] === ""
+                        ) {
+                          <div
+                            class="right_click_item"
+                            (click)="onSort(col, 'dsc', $index)"
+                          >
+                            <div class="left_item">
+                              <img src="images/arrow-down.svg" />
+                              <span class="text">Sort Descending</span>
+                            </div>
+                          </div>
+                        }
+                        @if (
+                          sortingType[$index] === "asc" ||
+                          sortingType[$index] === "dsc"
+                        ) {
+                          <div
+                            class="right_click_item"
+                            (click)="onSort(col, '', $index)"
+                          >
+                            <div class="left_item">
+                              <img src="images/trash-2.svg" />
+                              <span class="text">Clear Sort</span>
+                            </div>
+                          </div>
+                        }
+                        <div class="divder"></div>
+
+                        <div
+                          class="right_click_item"
+                          (mouseenter)="showPinActions($event)"
+                          (mouseleave)="hidePinActions()"
+                        >
+                          <div class="left_item">
+                            <img src="images/pin.svg" />
+                            <span class="text">Pin Column</span>
+                          </div>
+                          <div class="right_item">
+                            <img src="images/chevron-right.svg" />
+                            @if (showPin) {
+                              <div class="second_dropdown" #pinMenu>
+                                <div
+                                  (click)="pinColumn(col, $index, 'none')"
+                                  class="right_click_item"
+                                >
+                                  <div class="left_item">
+                                    @if (
+                                      (pinActionClicked[col.colId] ??
+                                        "none") === "none"
+                                    ) {
+                                      <img src="images/check.svg" />
+                                    } @else {
+                                      <img src="" alt="" />
+                                    }
+                                    <span class="text">No Pin</span>
+                                  </div>
+                                </div>
+                                <div
+                                  (click)="pinColumn(col, $index, 'left')"
+                                  class="right_click_item"
+                                >
+                                  <div class="left_item">
+                                    @if (
+                                      pinActionClicked[col.colId] === "left"
+                                    ) {
+                                      <img src="images/check.svg" />
+                                    } @else {
+                                      <img src="" alt="" />
+                                    }
+                                    <span class="text">Pin Left</span>
+                                  </div>
+                                </div>
+                                <div
+                                  (click)="pinColumn(col, $index, 'right')"
+                                  class="right_click_item"
+                                >
+                                  <div class="left_item">
+                                    @if (
+                                      pinActionClicked[col.colId] === "right"
+                                    ) {
+                                      <img src="images/check.svg" />
+                                    } @else {
+                                      <img src="" alt="" />
+                                    }
+                                    <span class="text">Pin Right</span>
+                                  </div>
+                                </div>
+                              </div>
+                            }
+                          </div>
+                        </div>
+
+                        <!-- <div
+                       class="right_click_item"
+                       (click)="pinColumn(col, $index, 'left')"
+                     >
+                       <div class="left_item">
+                         <img src="images/pin.svg" />
+                         <span class="text">{{
+                           col.leftPinned ? "Unpin Left Column" : "Pin Column Left"
+                         }}</span>
+                       </div>
+                     </div>
+                     <div
+                       class="right_click_item"
+                       (click)="pinColumn(col, $index, 'right')"
+                     >
+                       <div class="left_item">
+                         <img src="images/pin.svg" />
+                         <span class="text">
+                           {{
+                             col.rightPinned
+                               ? "Unpin Right Column"
+                               : "Pin Column Right"
+                           }}
+                         </span>
+                       </div>
+                       <div class="right_item">
+                         <img src="images/arrow-right.svg" alt="" />
+                       </div>
+                     </div> -->
+                        <div class="right_click_item">
+                          <div class="left_item">
+                            <img src="" alt="" />
+                            <span class="text">Autosize This Column</span>
+                          </div>
+                        </div>
+                        <div class="right_click_item">
+                          <div class="left_item">
+                            <img src="" alt="" />
+                            <span class="text">Autosize All Columns</span>
+                          </div>
+                        </div>
+                        <div
+                          class="right_click_item"
+                          [ngClass]="{ disabled_option: !groupByRequired }"
+                        >
+                          <div
+                            class="left_item"
+                            (click)="groupByColumnAction(col, $index)"
+                          >
+                            <img src="images/t-group-by-name.svg" alt="" />
+                            <span class="text"
+                              >Group by {{ col.headerName }}</span
+                            >
+                          </div>
+                        </div>
+                        <div class="right_click_item">
+                          <div class="left_item">
+                            <img src="images/t-choose-column.svg" alt="" />
+                            <span class="text">Choose Columns</span>
+                          </div>
+                        </div>
+                        <div class="right_click_item">
+                          <div class="left_item">
+                            <img src="" alt="" />
+                            <span class="text">Reset Columns</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </th>
+              }
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @if (groupedResult && groupedResult.length > 0) {
+            @for (group of groupedResult; track group.key) {
+              <tr (click)="toggleGroup(group)">
+                <td
+                  class="group-cell"
+                  [attr.colspan]="
+                    colDefs.length +
+                    (checkBoxSelection ? 1 : 0) +
+                    (activeGroups.length > 0 ? 1 : 0)
+                  "
+                >
+                  <span class="group-toggle">
+                    <img
+                      src="images/{{
+                        group.expanded
+                          ? 'chevron-down.svg'
+                          : 'chevron-right.svg'
+                      }}"
+                    />
+                    {{ group.key }} ({{ group.children.length }})
+                  </span>
+                </td>
+              </tr>
+
+              @if (group.expanded) {
+                <!-- CASE 1: CHILDREN ARE MORE GROUPS -->
+                @if (group.children[0]?.children) {
+                  @for (child of group.children; track child.key) {
+                    <ng-container
+                      [ngTemplateOutlet]="groupTemplate"
+                      [ngTemplateOutletContext]="{
+                        $implicit: child,
+                        colDefs: colDefs,
+                        checkBoxSelection: checkBoxSelection,
+                        activeGroups: activeGroups,
+                        level: 1,
+                      }"
+                    ></ng-container>
+                  }
+                }
+
+                <!-- CASE 2: CHILDREN ARE RAW ROWS -->
+                @if (!group.children[0]?.children) {
+                  @for (row of group.children; track row.rowId) {
+                    <tr [ngClass]="row | addClass: tableOptions">
+                      <!-- Checkbox column if any -->
+                      @if (checkBoxSelection) {
+                        <td>
+                          <span class="checkbox_container">
+                            <input
+                              class="custom_check_box"
+                              type="checkbox"
+                              [checked]="row.isSelected"
+                          /></span>
+                        </td>
+                      }
+                      @if (activeGroups.length > 0) {
+                        <td class="group-placeholder"></td>
+                      }
+
+                      <!-- Render columns -->
+                      @for (col of colDefs; track col.colId) {
+                        <td
+                          [ngStyle]="getStyle(col)"
+                          [ngClass]="[
+                            col?.addClass ? col.addClass(row) : '',
+                            col.leftPinned || col.rightPinned
+                              ? 'pinned_column'
+                              : '',
+                          ]"
+                        >
+                          <!-- {{ row[col.fieldName] }} -->
+                          @if (!col?.cellRenderer) {
+                            <div class="cell-value ellipsis">
+                              <div
+                                class="more_data_wrapper"
+                                [ngClass]="{ ellipsis: !col.wrapText }"
+                              >
+                                {{ parseColValue(row, col) }}
+                              </div>
+                              <div class="see_more_data" id="table_scroll">
+                                <div class="item">
+                                  <span class="desc">
+                                    {{ parseColValue(row, col) }}</span
+                                  >
+                                </div>
+                              </div>
+                            </div>
+                          } @else {
+                            <div
+                              [rowParam]="row"
+                              [col]="col"
+                              [api]="tableOptions"
+                              [currentValue]="row[col.fieldName]"
+                              appRendererParser
+                            ></div>
+                          }
+                        </td>
+                      }
+                    </tr>
+                  }
+                }
+              }
+            }
+          } @else {
+            @for (data of rowData; track data.rowId) {
+              <tr
+                [ngClass]="data | addClass: tableOptions"
+                (dragover)="allowRowDrop($event)"
+                (drop)="dropRow(data)"
+              >
+                @if (checkBoxSelection && atLeastOneColumnChecked) {
+                  <td style="min-width: 50px">
+                    @if (checkboxSelectionType == "multiple") {
+                      <span class="checkbox_container"
+                        ><input
+                          type="checkbox"
+                          class="pointer custom_check_box"
+                          name=""
+                          id="{{ data.rowId }}"
+                          [disabled]="data.isLocked"
+                          [checked]="data.isSelected || data.isLocked"
+                          (change)="onRowCheckboxSelection($event)"
+                      /></span>
+                    } @else {
+                      <span class="radio_option">
+                        <input
+                          type="radio"
+                          name=""
+                          id="{{ data.rowId }}"
+                          [checked]="data?.isSelected"
+                          (change)="onRowCheckboxSelection($event)"
+                        />
+                        <label [for]="data.rowId"></label>
+                      </span>
+                    }
+                  </td>
+                }
+                @for (col of colDefs; track col.colId) {
+                  @if (col.active) {
+                    <td
+                      [ngStyle]="getStyle(col)"
+                      [ngClass]="[
+                        col?.addClass ? col.addClass(data) : '',
+                        col.leftPinned || col.rightPinned
+                          ? 'pinned_column'
+                          : '',
+                      ]"
+                      class="table_cell"
+                    >
+                      <div class="col_wrapper">
+                        @if (col?.fieldName === firstCol?.fieldName) {
+                          <div
+                            [draggable]="true"
+                            (dragstart)="dragRow($event, data)"
+                            class="gripper"
+                          >
+                            <img src="images/gripper.svg" />
+                          </div>
+                        }
+
+                        @if (!col?.cellRenderer) {
+                          <div class="cell-value ellipsis">
+                            <div
+                              class="more_data_wrapper"
+                              [ngClass]="{ ellipsis: !col.wrapText }"
+                            >
+                              {{ parseColValue(data, col) }}
+                            </div>
+                            <div class="see_more_data" id="table_scroll">
+                              <div class="item">
+                                <span class="desc">
+                                  {{ parseColValue(data, col) }}</span
+                                >
+                              </div>
+                            </div>
+                          </div>
+                        } @else {
+                          <div
+                            [rowParam]="data"
+                            [col]="col"
+                            [api]="tableOptions"
+                            [currentValue]="data[col.fieldName]"
+                            appRendererParser
+                          ></div>
+                        }
+                      </div>
+                      <!-- Commented for later use -->
+                      <!-- <div class="tool_tip">
+                <span class=""> {{ parseColValue(data, col.fieldName) }}aditya </span>
+              </div> -->
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          }
+        </tbody>
+
+        <ng-template
+          #groupTemplate
+          let-node
+          let-colDefs="colDefs"
+          let-checkBoxSelection="checkBoxSelection"
+          let-activeGroups="activeGroups"
+          let-level="level"
+        >
+          <!-- GROUP HEADER -->
+          <tr (click)="toggleGroup(node)">
+            <td
+              [attr.colspan]="
+                colDefs.length +
+                (checkBoxSelection ? 1 : 0) +
+                (activeGroups.length > 0 ? 1 : 0)
+              "
+              [style.paddingLeft.px]="level * 20"
+              class="group-cell"
+            >
+              <span class="group-toggle">
+                <img
+                  src="images/{{
+                    node.expanded ? 'chevron-down.svg' : 'chevron-right.svg'
+                  }}"
+                />
+                {{ node.key }} ({{ node.children.length }})
+              </span>
+            </td>
+          </tr>
+
+          <!-- CHILDREN -->
+          @if (node.expanded) {
+            <!-- CASE: more groups -->
+            @if (node.children[0]?.children) {
+              @for (child of node.children; track child.key) {
+                <ng-container
+                  [ngTemplateOutlet]="groupTemplate"
+                  [ngTemplateOutletContext]="{
+                    $implicit: child,
+                    colDefs: colDefs,
+                    checkBoxSelection: checkBoxSelection,
+                    activeGroups: activeGroups,
+                    level: level + 1,
+                  }"
+                >
+                </ng-container>
+              }
+            }
+
+            <!-- CASE: final rows -->
+            @if (!node.children[0]?.children) {
+              @for (row of node.children; track row.rowId) {
+                <tr [ngClass]="row | addClass: tableOptions">
+                  <!-- Checkbox column if any -->
+                  @if (checkBoxSelection) {
+                    <td>
+                      <span class="checkbox_container">
+                        <input
+                          type="checkbox custom_check_box"
+                          [checked]="row.isSelected"
+                      /></span>
+                    </td>
+                  }
+                  @if (activeGroups.length > 0) {
+                    <td class="group-placeholder"></td>
+                  }
+
+                  <!-- Render columns -->
+                  @for (col of colDefs; track col.colId) {
+                    <td
+                      [ngStyle]="getStyle(col)"
+                      [ngClass]="[
+                        col.leftPinned || col.rightPinned
+                          ? 'pinned_column'
+                          : '',
+                      ]"
+                    >
+                      <!-- {{ row[col.fieldName] }} -->
+                      @if (!col?.cellRenderer) {
+                        <div class="cell-value ellipsis">
+                          <div
+                            class="more_data_wrapper"
+                            [ngClass]="{ ellipsis: !col.wrapText }"
+                          >
+                            {{ parseColValue(row, col) }}
+                          </div>
+                          <div class="see_more_data" id="table_scroll">
+                            <div class="item">
+                              <span class="desc">
+                                {{ parseColValue(row, col) }}</span
+                              >
+                            </div>
+                          </div>
+                        </div>
+                      } @else {
+                        <div
+                          [rowParam]="row"
+                          [col]="col"
+                          [api]="tableOptions"
+                          [currentValue]="row[col.fieldName]"
+                          appRendererParser
+                        ></div>
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            }
+          }
+        </ng-template>
+      </table>
+
+      @if (
+        (!rowData || rowData.length === 0) &&
+        (!groupedResult || groupedResult.length === 0)
+      ) {
+        <div class="empty_overlay">
+          <div class="empty_content">
+            @if (tableOptions?.noDataTemplate) {
+              <ng-container
+                *ngTemplateOutlet="tableOptions.noDataTemplate"
+              ></ng-container>
+            } @else {
+              <span>No Data To Show</span>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  </div>
+  <!--  Table Wrapper Ends-->
+  @if (paginationRequired) {
+    <div class="pagination_main">
+      <div class="entries_details">
+        <span>Showing</span>
+        <div class="pagination_select">
+          <div
+            class="select_dropdown pointer"
+            (click)="showPageSizeList = !showPageSizeList"
+          >
+            <p class="select_text mb-0">{{ pageDetails.pageSize }}</p>
+            <span class="chevron_img">
+              <img src="images/chevron-down.svg" class="pointer" />
+            </span>
+          </div>
+          @if (showPageSizeList) {
+            <div
+              class="select_option"
+              appOutsideClick
+              (clickOutside)="onClickOutside()"
+            >
+              @for (option of pageSizeList; track $index) {
+                <span
+                  class="pointer"
+                  (click)="onPageSizeChanged(option); onClickOutside()"
+                  >{{ option }}</span
+                >
+              }
+            </div>
+          }
+        </div>
+        <span
+          >Rows |
+          {{ totalRecords > 0 ? convertToNumber(recordsToShow.min) + 1 : 0 }} -
+          {{
+            recordsToShow.max > totalRecords ? totalRecords : recordsToShow.max
+          }}
+          of
+          {{ totalRecords }} Entries</span
+        >
+      </div>
+      <div class="pagination_form">
+        <!-- <span>Page</span> -->
+
+        <button class="outlined_btn first_btn disable_btn" type="button">
+          <span> <img src="images/chevrons-left.svg" alt="" /> </span>
+        </button>
+        <button
+          class="outlined_btn prev_btn"
+          [ngClass]="pageDetails.currentPage > 1 ? '' : 'disable_btn'"
+          type="button"
+          (click)="onBtPrevClick()"
+        >
+          <span> <img src="images/chevron-left.svg" alt="" /> </span>
+        </button>
+        <div>
+          <input
+            class="input_style"
+            type="number"
+            [(ngModel)]="pageDetails.currentPage"
+            (change)="goToSelectedPage($event)"
+            name=""
+            id=""
+          />
+        </div>
+        <button
+          class="outlined_btn next_btn"
+          type="button"
+          [ngClass]="
+            pageDetails.currentPage < pageDetails.totalPages
+              ? ''
+              : 'disable_btn'
+          "
+          (click)="onBtNextClick()"
+        >
+          <span> <img src="images/chevron-right.svg" alt="" /> </span>
+        </button>
+        <!-- <span>of {{ pageDetails.totalPages }}</span> -->
+
+        <button class="outlined_btn last_btn disable_btn" type="button">
+          <span> <img src="images/chevrons-right.svg" alt="" /> </span>
+        </button>
+      </div>
+    </div>
+  }
+  <!-- Pagination Ends -->
+</div>
+
+<!-- cell right click code start here -->
+<div class="dropdown_wrapper d-none">
+  <div class="right_click_dropdown">
+    <div class="right_click_item">
+      <div class="left_item">
+        <img src="images/scissors.svg" />
+        <span class="text">Cut</span>
+      </div>
+
+      <span class="right_item">Ctrl+X</span>
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <img src="images/copy.svg" alt="" />
+        <span class="text">Copy</span>
+      </div>
+
+      <span class="right_item">Ctrl+C</span>
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <img src="images/copy.svg" alt="" />
+        <span class="text">Copy with Headers</span>
+      </div>
+      <span class="right_item"></span>
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <img src="images/copy.svg" alt="" />
+        <span class="text">Copy with Group Headers</span>
+      </div>
+      <span class="right_item"></span>
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <img src="images/clipboard.svg" alt="" />
+        <span class="text">Paste</span>
+      </div>
+
+      <span class="right_item">Ctrl+V</span>
+    </div>
+
+    <div class="right_click_item active">
+      <div class="left_item">
+        <img src="images/bar-chart.svg" alt="" />
+        <span class="text">Chart</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <img src="images/download.svg" alt="" />
+        <span class="text">Export</span>
+      </div>
+
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+  </div>
+
+  <!-- Chart section Start Here -->
+  <div class="second_dropdown">
+    <div class="right_click_item active">
+      <div class="left_item">
+        <span class="text">Column</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Bar</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Pie</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Line</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Area</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">XY(Scatter)</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Polar</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Stastical</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Hierarchical</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Specialized</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Funnel</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Combination</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+  </div>
+
+  <!-- Export Section start Here -->
+  <div class="export_section d-none">
+    <div class="right_click_item active">
+      <div class="left_item">
+        <img src="images/file.svg" alt="" />
+        <span class="text">CSV Report</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+
+    <div class="right_click_item">
+      <div class="left_item">
+        <img src="images/file.svg" alt="" />
+        <span class="text">Excel Report</span>
+      </div>
+      <img src="images/chevron-right.svg" alt="" />
+    </div>
+  </div>
+
+  <!-- Column Group Section Start Here -->
+  <div class="third_dropdown">
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Grouped</span>
+      </div>
+    </div>
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">Stacked</span>
+      </div>
+    </div>
+    <div class="right_click_item">
+      <div class="left_item">
+        <span class="text">100% Stacked</span>
+      </div>
+    </div>
+  </div>
+</div>