Angular 8 - ngx-DataTable doesn't show datas

Question

I have a datable that is returning the data from my API, but it is not being rendered. Below is the code:

Module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ModuloEscolaRoutingModule } from './modulo-escola-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MacroareasComponent } from './macroareas/macroareas.component';
import { ProfessoresComponent } from './professores/professores.component';
import { SharedModule } from '../../shared/shared.module';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
    declarations: [
        DashboardComponent,
        MacroareasComponent,
        ProfessoresComponent
    ],
    imports: [
        CommonModule,
        SharedModule,
        ModuloEscolaRoutingModule,
        NgxDatatableModule,
    ]
})
export class ModuloEscolaModule { }

My Component.ts

import { Component, OnInit } from '@angular/core';
import { HttpService } from 'src/app/shared/services/http.service';


@Component({
    selector: 'app-macroareas',
    templateUrl: './macroareas.component.html',
    styleUrls: ['./macroareas.component.scss']
})
export class MacroareasComponent implements OnInit {

    title = 'Macroáreas';
    public macroarea = [];
    loadingIndicator: boolean = true;
    reorderable: boolean = true;
    public right_side_bar: boolean;
    columns = [
      { prop: 'Macroárea' },
      { name: 'Cadastrado em' },
      { name: 'Ação' }
    ];

    constructor(private http: HttpService) {
        this.http.get('macroareas').subscribe(
            (res: any) => {
                this.macroarea = res;
            },
            error => {
                console.log(error);
            }
        )
    }


    ngOnInit() {

    }

    toggleSearch() {
        this.right_side_bar = !this.right_side_bar;
        console.log(this.right_side_bar)
    }

    dismissSearch(event) {
        this.right_side_bar = false;
    }


}

And my component.html

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <button (click)="toggleSearch()">filter</button>
            <div class="card">
                <div class="card-header">
                    <h5>{{ title }}</h5>
                </div>
                <div class="card-body custom-datatable">
                    <ngx-datatable class="bootstrap" [rows]="macroarea" [loadingIndicator]="loadingIndicator"
                        [columns]="columns" [columnMode]="'force'" [headerHeight]="40" [summaryRow]="true"
                        [summaryPosition]="'bottom'" [footerHeight]="40" [rowHeight]="'auto'"
                        [reorderable]="reorderable" [limit]="10">
                    </ngx-datatable>
                </div>
            </div>
        </div>
    </div>
</div>

In the image below I show the data return and how it is displayed on my screen

the exact amount of rows is being displayed, but the rows are empty and do not show the data. Would anyone know how to solve this problem?