У меня включены сортировка и фильтрация в Ag-Grid, в сетке графически отображаются эти параметры, но они не работают.

Я пытаюсь реализовать сетку с ag-сеткой с сортируемыми и фильтруемыми столбцами. Стрелки и поля поиска появляются, но ничего не делают.

Для начала я включил параметры сортировки и фильтрации в своих тегах и в defaultColDefs. Это не сработало, поэтому я индивидуально настроил сортировку по столбцам, которые я хотел отсортировать. После этого я попробовал написать компаратор. Ни один из этих вариантов не сработал.

Примечание: данные загружаются из JSON

вот HTML:

 <ag-grid-angular 
      style="width: 100%; height: 800px;" 
      id="myGrid"
      class="ag-theme-balham"
      [enableSorting] = "true"
      [enableFilter] = "true"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [components]="components"
      [rowBuffer]="rowBuffer"
      [rowSelection]="rowSelection"
      [rowDeselection]="true"
      [rowModelType]="rowModelType"
      [paginationPageSize]="paginationPageSize"
      [cacheOverflowSize]="cacheOverflowSize"
      [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
      [infiniteInitialRowCount]="infiniteInitialRowCount"
      [maxBlocksInCache]="maxBlocksInCache"
      [rowData]="rowData"
      [animateRows] = "true"
      (gridReady)="onGridReady($event)"
    >
    </ag-grid-angular>

Вот голая версия моего компонента с аг-сеткой:

import { Component, OnInit } from '@angular/core';
import { DataService } from 'app/data-service';
import { Grid, GridOptionsWrapper, GridApi } from 'ag-grid-community';

@Component({
  selector: 'app-grid-form',
  templateUrl: './grid-form.component.html',
  styleUrls: ['./grid-form.component.css']
})
export class GridFormComponent implements OnInit {



//grid variables
  private title: string;
  private columnDefs;
  private defaultColDef;
  private rowData;
  private gridApi;
  private gridColumnApi;
  private components;
  private rowBuffer;
  private rowSelection;
  private rowModelType;
  private paginationPageSize;
  private cacheOverflowSize;
  private maxConcurrentDatasourceRequests;
  private infiniteInitialRowCount;
  private maxBlocksInCache;
  private currentDate:Date;
  private sortingOrder;

 ngOnInit() {
 this.defaultColDef = { 
      sortable: true,
      resizable: true,
      filter: true,
    };
    this.components = {
      loadingRenderer: function(params) {
        if (params.value !== undefined) {
          return params.value;
        } else {
          return '<img src="../images/loading.gif">';
        }
      }
    };
    this.rowBuffer = 0;
    this.rowSelection = "multiple";
    this.rowModelType = "infinite";
    this.paginationPageSize = 100;
    this.cacheOverflowSize = 2;
    this.maxConcurrentDatasourceRequests = 1;
    this.infiniteInitialRowCount = 1000;
    this.maxBlocksInCache = 10;
    this.title = 'User Report Grid'
    this.columnDefs = [

      {
        headerName: "NUM User",
        field: "numUser",
        width: 50
        },
      {
        headerName: "ID Customer",
        field: "idCustomer",
        width: 150,
        sortable: true,
      },
      {
        headerName: "ID Event",
        field: "eventId",
        width: 100,
        filter: "agTextColumnFilter",
        sortingOrder:["asc", "desc"]
     },
    ];


  }

onGridReady(params){
    this.loadGrid(params);
  }

  private loadGrid(params){
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;


    this.dataService.getGridData(this.resourcePath, this.paramets).subscribe(
      data =>{
        var dataSource = {
          rowCount: null,
          getRows: function(params){
            setTimeout(function(){
              var rowsThisPage = data.slice(params.startRow, params.endRow);
              var lastRow = -1;
              if(data.length <= params.endRow){
                lastRow = data.length;
              }
              this.caller = params.successCallback(rowsThisPage, lastRow);
            }, 500);
          }
        };
        params.api.setDatasource(dataSource);
      }
    );
  }

Странно то, что стрелки и параметры поиска действительно существуют в сетке. Просто их использование никак не меняет сетку.

Я был бы очень признателен за помощь в этом, так как я не понимаю, почему это происходит, и уже отвеченные на вопросы и форумы не помогли. Спасибо.