-1

I use with Primeng datatable when No records found it display a row with message, how can I hide this row?

<p-dataTable>
              <p-column [style]="{'width': '500px'}" header="Artifacts">
                  <ng-template pTemplate="filter" let-col>
                      <textarea rows="3" cols="30" style="width: 100%" pInputTextarea [(ngModel)]="parametersForAll['Artifacts']"
                      placeholder="Artifacts ..."></textarea>
                  </ng-template>
                </p-column> 
    </p-dataTable>

this css doesn't work for me:

.ui-datatable-emptymessage{
display:none
}
sari k
  • 2,051
  • 6
  • 28
  • 34

1 Answers1

1

You did not mention it but you probably put that css in your component css file. Since, by default, component's encapsulation is Emulated, it will generate your styles with custom attributes.

I.e.

.ui-datatable-emptymessage{
    display:none
}

becomes something like following after compilation

.ui-datatable-emptymessage[_ng-content0]{
    display:none
}

Therefore, it does not apply to primeng. You can either put this css in global styles.css file or change ViewEncapsulation of your component to None

e.g.

@Component({
   selector: 'my-comp',
   template: '',
   encapsulation: ViewEncapsulation.None
})

For more info, check the docs.

Bunyamin Coskuner
  • 8,719
  • 1
  • 28
  • 48