It does not show the results in my datatables in angular

Following this example :

categoria.component.html

<blockquote>Please click on a row</blockquote>
<p class="text-danger">You clicked on: <strong>{{ message }}</strong></p>
<br />
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

categoria.component.ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

import { CategoriaService } from '../services/categoria.service';
import { Categoria } from '../models/categoria';

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

@Component({
    selector: 'app-categoria',
    templateUrl: '../views/categoria.component.html',
    styleUrls: ['../styles/categoria.component.css'],
  providers: [CategoriaService]
})
export class CategoriaComponent implements OnInit {

  message = '';
  dtOptions: DataTables.Settings = {};

  public id;
  public categoria: Categoria[];

  constructor(
    private http: HttpClient
  ){
  }

  someClickHandler(info: any): void {
    this.message = info.id + ' - ' + info.nombre;
  }

  ngOnInit(): void {
    const that = this;

    this.dtOptions = {
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post(
            'http://localhost/webapp-backend/index.php/categorias/listar',
            dataTablesParameters, {}
          ).subscribe(resp => {
            that.categoria = resp.data;
            console.log(resp.data.length);
            callback({
              recordsTotal: resp.data.length,
              recordsFiltered: resp.data.length,
              data: []
            });
          });
      }, 
      columns: [
        {
          searchable: false,
          orderable: false,
          title: 'N°',
          data: 'id'
        },
        {
          title: 'Nombre',
          data: 'nombre'
        },
        {
          searchable: false,
          title: 'Estado',
          data: 'status'
        }
      ],
      order: [[1, 'asc']],
      rowCallback: (row: Node, data: any[] | Object, index: number) => {
        const self = this;
        $('td', row).unbind('click');
        $('td', row).bind('click', () => {
          self.someClickHandler(data);
        });
        return row;
      }
    };
  }
}

The result I get from the url is as follows:

{
  "status": "success",
  "code": 200,
  "data": [
    {
      "id": 6,
      "nombre": "jardin",
      "status": true
    },
    {
      "id": 7,
      "nombre": "ciudad",
      "status": true
    },
    {
      "id": 8,
      "nombre": "flores",
      "status": true
    },
    {
      "id": 9,
      "nombre": "fantasia",
      "status": true
    },
    {
      "id": 18,
      "nombre": "Espacio",
      "status": true
    },
    {
      "id": 23,
      "nombre": "Tela",
      "status": true
    },
    {
      "id": 24,
      "nombre": "Cultura",
      "status": true
    },
    {
      "id": 25,
      "nombre": "Pais",
      "status": true
    },
    {
      "id": 26,
      "nombre": "Hogar",
      "status": true
    },
    {
      "id": 27,
      "nombre": "Zapatos",
      "status": true
    },
    {
      "id": 28,
      "nombre": "Pantalones",
      "status": true
    },
    {
      "id": 29,
      "nombre": "Insigneas",
      "status": true
    },
    {
      "id": 30,
      "nombre": "Cuadros",
      "status": true
    },
    {
      "id": 31,
      "nombre": "Baño",
      "status": true
    }
  ]
}

And the table I get is the following (no data):