lightning-datatable Fundamentals

Building a data table from a plain HTML <table> means hand-rolling sorting, selection, accessibility, and styling from scratch. lightning-datatable provides all of that out of the box — the same component Salesforce's own list views use internally.

get columns() {
    return [
        { label: 'Name', fieldName: 'name', type: 'text' },
        { label: 'Industry', fieldName: 'industry', type: 'text' },
        { label: 'Annual Revenue', fieldName: 'revenue', type: 'currency' },
    ];
}

Each column is an object with a label (the header text shown), a fieldName (which key on each row's data object to read), and a type (text, currency, date, email, and more — each renders and formats differently).

<lightning-datatable
    key-field="id"
    data={accounts}
    columns={columns}>
</lightning-datatable>

key-field names the property on each row that uniquely identifies it (similar in purpose to the key directive from Module 3's list rendering lesson) — required so the datatable can track rows correctly across re-renders.

<lightning-datatable
    key-field="id"
    data={accounts}
    columns={columns}
    onrowselection={handleRowSelection}>
</lightning-datatable>

handleRowSelection(event) {
    this.selectedRows = event.detail.selectedRows;
}

Adding checkboxes for row selection needs no extra configuration — it's automatic once an onrowselection handler is present, and event.detail.selectedRows gives the array of currently selected row objects.