angularngx-datatable

Ngx-datatable is not showing the data

I am working on an angular component, I am using ngx-datatable for displaying the table data. The table is not showing the data.

the table :

        <ngx-datatable
          class="ngx-datatable"
          [class.table]="currentStyle !== 'listview'"
          [rows]="desigs"
          [messages]="{
            emptyMessage: 'No Data' | translate,
            totalMessage: 'Total' | translate,
            selectedMessage: false
          }"
          [columnMode]="ColumnMode.force"
          headerHeight="auto"
          [rowHeight]="auto"
          footerHeight="auto"
          [limit]="10"
         >
          <!-- Column Definitions -->
          <ngx-datatable-column
            name="#"
            [sortable]="false"
            [resizeable]="false"
            [width]="20"
          >
            <ng-template
              let-value="row"
              let-rowIndex="rowIndex"
              ngx-datatable-cell-template
            >
              {{ rowIndex + 1 }}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column
            name="{{ 'Name' | translate }}"
            [sortable]="false"
            [width]="80"
          >
            <ng-template let-value="row" ngx-datatable-cell-template>
              <span>{{ value.name }}</span>
            </ng-template>
           </ngx-datatable-column>
      </ngx-datatable>

The data I am passing:

 [
        {
            "id": 1,
            "name": "Manager",
            "created_at": "2021-12-12T15:01:24",
            "updated_at": "2021-12-12T15:01:24"
        },
        {
            "id": 4,
            "name": "supervisor",
            "created_at": "2021-12-12T15:01:42",
            "updated_at": "2021-12-12T15:01:42"
        }
    ]

Note1: There is no error in the console even restarting the application. Note2: The same data can be displayed using a simple table.

enter image description here

Solution

  • I found the mistake, it was the NgxDatatableModule which I forgot to import in the module.

    @NgModule({
  declarations: [DesigsListComponent],
  imports: [
    CommonModule,
    DesignationsRoutingModule,
    SharedModule,
    NgxDatatableModule,
  ],
})
export class DesignationsModule {}

    After importing the NgxDatatableModule it works fine.