Hide Header row of Lightning Datatable in LWC

How to hide the header row of Lightning Datatable?

Hide Header row of Lightning Datatable in LWC

You can hide the header row of the lightning-datatable by setting the hide-table-header attribute of the datatable, this is how it looks after hiding the header:

Hide Header LWC Datatable

Hide table header with a static value

.html:

<lightning-datatable
    hide-table-header
    key-field="id"
    data={data}
    columns={columns}>
</lightning-datatable>


Hide table header with JS attribute

Also, you can set the hide-table-header value dynamically using the JavaScript properties like below:

.html:

<lightning-datatable
    hide-table-header={hideTableHeader}
    key-field="id"
    data={data}
    columns={columns}>
</lightning-datatable>

.js:

export default class BasicDatatable extends LightningElement {
    hideTableHeader = true;

    //...
}

Thank you for visiting, I hope this was helpful!

No comments :
Post a Comment

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com