Sample Code:
Apex Class:
public with sharing class AccountController {
@AuraEnabled( cacheable = true )
public static List< Account > fetchAccounts() {
return [ SELECT Id, Name, Industry, AccountNumber, Rating, Type, Phone
FROM Account
LIMIT 100 ];
}
}
Lightning Web Component:
HTML:
<template>
<div class="slds-box slds-theme--default">
<div>
<div class="tableFixHead">
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr>
<th scope="col">
Account Name
</th>
<th scope="col">
Account Number
</th>
<th scope="col">
Industry
</th>
<th scope="col">
Rating
</th>
<th scope="col">
Type
</th>
<th scope="col">
Phone
</th>
</tr>
</thead>
<tbody>
<template iterator:it={records}>
<tr key={it.value.Id}>
<td data-label="Account Name">
<div class="slds-cell-wrap">{it.value.Name}</div>
</td>
<td data-label="Account Number">
<div class="slds-cell-wrap">{it.value.AccountNumber}</div>
</td>
<td data-label="Industry">
<div class="slds-cell-wrap">{it.value.Industry}</div>
</td>
<td data-label="Rating">
<div class="slds-cell-wrap">{it.value.Rating}</div>
</td>
<td data-label="Type">
<div class="slds-cell-wrap">{it.value.Type}</div>
</td>
<td data-label="Phone">
<div class="slds-cell-wrap">{it.value.Phone}</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</template>
JavaScript:
import { LightningElement, wire } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
export default class Sample extends LightningElement {
records;
error;
@wire( fetchAccounts )
wiredAccount( { error, data } ) {
if (data) {
this.records = data;
this.error = undefined;
} else if ( error ) {
this.error = error;
this.records = undefined;
}
}
}
CSS:
.tableFixHead {
overflow: auto;
height: 250px;
}
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th {
position: sticky;
top: 0;
z-index: 4;
background: white;
}
Output: