Внешний фильтр ag-grid

Question

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

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

export class AgreementListComponent implements OnInit {
    private gridApi;
    private gridColumnApi;
    ageType = "";

    private columnDefs;
    private defaultColDef; 
    private rowData: [
    {
        title: 'Agreement 1', status: 'Status 1', type: 'Type 1', effectiveDate: 'February/28/2020', 
        expirationDate: 'February/28/2020',
        upcomingStipulations: 'Upc Stip 1', overdueStipulations: 'Over Stip 1'
    },
    {
        title: 'Agreement 2', status: 'Status 2', type: 'Type 2', effectiveDate: 'February/28/2020', 
        expirationDate: 'February/28/2020',
        upcomingStipulations: 'Upc Stip 2', overdueStipulations: 'Over Stip 2'
    }
    ];

    constructor() {
        this.columnDefs = [
            { headerName: "Agreement Title", filter: true, field: 'title' },
            { headerName: "Status", filter: 'agTextColumnFilter', field: 'status' },
            { headerName: "Agreement Type", filter: true, field: 'type' },
            { headerName: "Effective Date", filter: true, field: 'effectiveDate' },
            { headerName: "Expiration Date", filter: true, field: 'expirationDate' },
            { headerName: "Upcoming Stipulations", filter: true, field: 'upcomingStipulations' },
            { headerName: "Overdue Stipulations", filter: true, field: 'overdueStipulations' },
    ]

    this.defaultColDef = { filter: true };
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.gridColumnApi = params.columnApi;
        this.rowData =   this.rowData
    }

    isExternalFilterPresent() {
        return this.ageType != "everyone";
    }

    externalFilterChanged(newValue) {
        console.log('externalFilterChanged')
        this.ageType = newValue;
        this.gridApi.onFilterChanged();
    }

    doesExternalFilterPass(node) {
        switch (this.ageType) {
            case "below30":
            return node.data.status = 'Status 1';
        default:
            return true;
        }
    }
    ngOnInit() {

    }

}

, и это мой Html

<div>
    <button (click)="externalFilterChanged('Status 1')">Status 1</button>
</div>
<ag-grid-angular style="width: 100%; height: 400px;" class="ag-theme-balham" 
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    [doesExternalFilterPass]="doesExternalFilterPass" 
    [isExternalFilterPresent]="isExternalFilterPresent"
    [animateRows]="true"
    [defaultColDef]="defaultColDef"
    [enableSorting]="true"
    [enableFilter]="true"
    (gridReady)="onGridReady($event)">
</ag-grid-angular>

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