filterModifiedReportRunTable() {
    let filters = this.shareDashboardConfiguration.api.getFilterModel();
    this.saveFilter(filters, 'reportRunResultGrid');
    this.shareRunTableFilter = this.tableFilterService.filter(
      this.shareDashboardConfiguration,
      this.shareConfigurationcolumnDefs,
    );
    console.log("filterModifiedReportRunTable" +this.shareDashboardConfiguration);

    console.log("filterModifiedReportRunTable" +this.shareConfigurationcolumnDefs);

    console.log("filterModifiedReportRunTable" +this.shareRunTableFilter);
    this.cdr.detectChanges(); // Manually trigger change detection

  }
  clearFilterShareTable(filter) {
    this.removeFilter('reportRunResultGrid');
    this.shareRunTableFilter = this.tableFilterService.clearFilter(
      this.shareDashboardConfiguration,
      this.shareConfigurationcolumnDefs,
      filter,
    );
    console.log("filterModifiedReportRunTable" +this.shareDashboardConfiguration);

    console.log("filterModifiedReportRunTable" +this.shareConfigurationcolumnDefs);

    console.log("filterModifiedReportRunTable" +this.shareRunTableFilter); 
     this.cdr.detectChanges(); // Manually trigger change detection
  }

<!-- Filter  -->
        <div class="row justify-content-between mx-0 mt-3">
          <div class="m-2 ml-3" style="padding-top: 2px">
            <strong style="font-size: 16px; letter-spacing: 1px; color: #e53e3e" translate>Filters:</strong>
            <strong *ngIf="shareRunTableFilter == null || shareRunTableFilter.length == 0" style="color: #9aa8af" translate>
              No Filter Selected
            </strong>
            <span class="filter-tabs" *ngFor="let filter of shareRunTableFilter">
              {{ filter.columnName }}: {{ filter.filter }}
              <a (click)="clearFilterShareTable(filter)" class="pl-2 cursor-pointer">×</a>
            </span>
          </div>
        </div>

.gridster {
    position: relative;
    box-sizing: border-box;
    background: none;
    width: 100%;
    height: calc(100vh - 190px);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
}

.user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .user-card-header .d-flex {
    flex-grow: 1;
  }
  
  .user-card-header label {
    margin-right: 0.5rem;
  }
  
  .user-card-header .form-control {
    max-width: 200px; /* Adjust as needed */
  }
  
  .user-card-header .btn {
    margin-left: 1rem;
  }
  
.modal-background {
  background-color:#0a192f !important;
}

i tried many ways still on the UI it is showing Filter: No active filters selected though we have applied filter successfully on column it should show the column header name on which filter is applied Filter:(column header name). also my console.log is not showing anything on console.