Hiding LWC datatable Header

Question

My Coloum header are still getting displayed even if there is no data in datatable. I want to hide it in case it doesnt contain any data. I have contained my Datatable in template. but still the column header are getting displayed! Any solutions?

<template>
    <p id="custom" class="slds-box slds-text-heading_small" style="background-color:WhiteSmoke;">
        <lightning-icon icon-name="custom:custom11"></lightning-icon>&nbsp;&nbsp;&nbsp;<b style="font-size:14px">Selected EGs&nbsp;({count})</b>&nbsp;
     
    </p>
    
    <template if:true={showPPGRecords}>
  <div>
    <lightning-datatable key-field="Id" 
    data={priclst}  
    columns={columns}  
    hide-checkbox-column="true"  
    show-row-number-column="false"  
    >  
</lightning-datatable> 
 </div>
</template>
</template>

import { LightningElement,api,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { getRecord } from 'lightning/uiRecordApi';
import getSelectedEGs from '@salesforce/apex/PricingRequestGenericController.getPPGEGRelatedList';

const FIELDS = ['Account.Relationship_Status__c'];
const columns = [ 
    { label: 'Title', fieldName: 'Title__c' },
    { label: 'Entitlement Id', fieldName: 'EG_Number__c' },
    { label: 'Number', fieldName: 'Bse_c' },
    { label: 'Related Party', fieldName: 'MA3__c' }    ,  
    { label: 'Center', fieldName: 'Center__c' },

];


export default class RelatedEGForProductPricingGroup extends NavigationMixin(LightningElement) {

    @api recordId;
    @api objectApiName;
    isNewVisible = true;
    Account;
    currenObjectName;
    error;
    columns = columns;
    priclst=[];
    callChildCmp;
    currenRecordId;
    showPPGRecords=false;
    hideHeader = false;
    count='';
    
 
    //End Code
    connectedCallback() {
        this.currenRecordId = this.recordId;
        this.currenObjectName = this.objectApiName;
        getSelectedEGs( { currentRecordId:this.recordId} )    
        .then(result => {  
            if(result)
            {
            this.showPPGRecords = true;   
            this.priclst=result;
            this.count = result.length;  
            }
            else{
                this.count = 0;
            }
        })  
        .catch(error => {  
             this.error = error;    
        }); 
          
    }
  
    handleView()
    {
        var compDetails = {
            componentDef: "c:relatedlstNavPricingApproval",
            attributes: {
                 //passing reordId to the next lwc component
                getIdFromParent: this.recordId,
                getObjectApi:this.currenObjectName
               
            }
        };
        var encodedCompDetails = btoa(JSON.stringify(compDetails));
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: '/one/one.app#' + encodedCompDetails
            }
        });
    }
    handleNew()
    {
        

         this.callPricingApproval=true;        
    }
    handleNewPricingRequest(){
        this.callPricingGenericCMP=true;        
    }
 }

Answer 1

Update :

length of result variable could be zero hence check length of result for assigning value to showPPGRecords

//End Code
    connectedCallback() {
        this.currenRecordId = this.recordId;
        this.currenObjectName = this.objectApiName;
        getSelectedEGs( { currentRecordId:this.recordId} )    
        .then(result => {  
            if(result)
            {
            this.showPPGRecords = !!result.length;   
            this.priclst=result;
            this.count = result.length;  
            }
            else{
                this.count = 0;
            }
        })  
        .catch(error => {  
             this.error = error;    
        }); 
          
    }

Answer 2

I don't think you have any standard tag to hide the column headers as they are used to map your data items in the order. You'll probably need to go for custom CSS to hide the column headers.

EDITED :

I am unaware of any styling hook. However, you can go with the below option -

1. Create a static resource for CSS. e.g dtStyle.css Enclose your datable in a custom class -

<div class="myTable">
    <lightning-datatable
        key-field="Id"
        data={tableData}
        columns={columns}
        hide-checkbox-column>
    </lightning-datatable>
</div>

.myTable table>thead {
  display:none;
}

3. Import the CSS in your LWC Component

import {loadStyle} from 'lightning/platformResourceLoader'
import DTSTYLE from '@salesforce/resourceUrl/dtStyle'

4. In the rendered callback of LWC -

renderedCallback(){ 
    loadStyle(this, DTSTYLE).then(()=>{
        console.log("Loaded Successfully")
    }).catch(error=>{ 
        console.error("Error in loading the colors")
    })
}