CODEWITHSUNDEEP
angularprimengprimeng-datatableprimeng-table
Nitin Avula
Nitin Avula

Reputation: 349

How to create a custom reusuable component to display Empty message in Primeng Table?

I'm using primeng tables in my project and I'm trying to create a custom reusable component to display empty message when no data is available. So, In my component if I have the below code it is working fine.

<ng-template pTemplate="emptymessage">
      <tr>
        <td colspan="12" class="empty-message">
          <div class="empty-message-container">No Data</div>
        </td>
      </tr>
</ng-template>

But, when I create a custom component and call it here, it is just displaying the empty message, but the colspan is not working. Below is the code for my custom component.

Html code:

<tr>
 <td [attr.colspan]="colspan" class="empty-message">
  <div class="empty-message-container">No Data</div>
 </td>
</tr>

Ts code:

import {Component, Input} from '@angular/core';
import {TableModule} from "primeng/table";

@Component({
 selector: 'app-table-empty-message',
 standalone: true,
 imports: [TableModule],
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;
}

Css code:

.empty-message {
  padding: 20px;
}

.empty-message-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }

And I'm calling the custom component in my code as follows:

<ng-template pTemplate="emptymessage">         
      <app-table-empty-message [colspan]="11"></app-table-empty-message>
    </ng-template>

This would only display the "No Data" message but not in the center.

Any help would be appreciated. Thanks in Advance!

Best regards, Nitin

Upvotes: 0

Views: 147

Answers (1)

truonghungit
truonghungit

Reputation: 312

Only display "No Data" message but not in the center, because the app-table-empty-message tag is not valid for the tbody.

You can adjust the selector of your component to tr[app-table-empty-message]

HTML code

 <td [attr.colspan]="colspan" class="empty-message">
  <div class="empty-message-container">No Data</div>
 </td>

TS Code

import {Component, Input} from '@angular/core';
import {TableModule} from "primeng/table";

@Component({
 selector: 'tr[app-table-empty-message]',
 standalone: true,
 imports: [TableModule],
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;
}

Use

<ng-template pTemplate="emptymessage">         
  <tr app-table-empty-message [colspan]="11" ></tr>
</ng-template>

Upvotes: 1

Related Questions