Data Table generator
Every list view, related list and report eventually becomes a table. Configure header contrast, zebra striping, hover highlight and sticky headers so dense data stays scannable.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<table class="slds-table slds-table_bordered studio-table">
<thead>
<tr class="slds-line-height_reset">
<th scope="col"><div class="slds-truncate">Account</div></th>
<th scope="col"><div class="slds-truncate">Stage</div></th>
<th scope="col"><div class="slds-truncate">Amount</div></th>
</tr>
</thead>
<tbody>
<template for:each={rows} for:item="row">
<tr key={row.id} class="slds-hint-parent">
<td><div class="slds-truncate">{row.account}</div></td>
<td><div class="slds-truncate">{row.stage}</div></td>
<td><div class="slds-truncate">{row.amount}</div></td>
</tr>
</template>
</tbody>
</table>
</template>Design tips for data tables
- Sticky headers matter most on tables the user scrolls — skip it for short, four-row summaries.
- Zebra striping helps on 6+ rows; on short tables it can look noisy, so it is toggleable here.
- Keep the hover background subtle — a strong hover color competes with row selection states.
Related components
Components developers commonly compare against or pair with Data Table.