Hide Header row of Lightning Datatable in LWC

How to hide the header row of Lightning Datatable?

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 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!