<div style="display: block;">
  <div class="dg-wrapper">
    <div class="clr-row">
      <div class="clr-col-8">
        <h3>{{charttitle || 'Data Grid'}}</h3>
      </div>
    </div>
    <clr-datagrid [clrDgLoading]="loading">
      <clr-dg-placeholder> <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
        <div *ngIf="error;else loadingSpinner">{{error}}</div>
      </clr-dg-placeholder>

      <!-- Dynamic columns based on response keys -->
      <clr-dg-column *ngFor="let header of dynamicHeaders" [clrDgField]="header.key"> 
        <ng-container *clrDgHideableColumn="{hidden: false}">
          {{header.displayName}}
        </ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let item of givendata" [clrDgItem]="item">
        <!-- Dynamic cells based on response keys -->
        <clr-dg-cell *ngFor="let header of dynamicHeaders">
          {{item[header.key]}}
        </clr-dg-cell>
      </clr-dg-row>

      <clr-dg-footer>
        <clr-dg-pagination #pagination [clrDgPageSize]="10">
          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
          of {{pagination.totalItems}} Records
        </clr-dg-pagination>
      </clr-dg-footer>
    </clr-datagrid>
  </div>
</div>