📊 Lightning Data Table in Lightning Web Components (LWC)

The lightning-datatable component in LWC provides a rich, flexible way to display tabular data, supporting features like column formatting, inline editing, sorting, and more — all without writing much custom HTML or JavaScript.

---

🌟 What Is lightning-datatable?

The lightning-datatable is a powerful base component that renders a responsive table using the data and metadata you provide. It’s commonly used for displaying Salesforce records with built-in support for inline editing, custom formatting, and row-level actions.

---

🔧 Essential Attributes of lightning-datatable

---

✅ Simple Lightning Data Table Example

This example shows a basic data table that displays account data retrieved from Apex.

🧩 HTML – lightningDatatableComponent.html

<template>
    <lightning-card title="Lightning Data Table">
        <lightning-datatable
            data={fetchedAccounts}
            columns={columns}
            key-field="Id">
        </lightning-datatable>
    </lightning-card>
</template>

🧩 JavaScript – lightningDatatableComponent.js

import { LightningElement, wire } from 'lwc';
import accountRecords from '@salesforce/apex/ControllerClass.accountRecords';

export default class LightningDatatableComponent extends LightningElement {
    fetchedAccounts;

    columns = [
        { label: 'Account Name', fieldName: 'Name', type: 'text', sortable: true },
        { label: 'Type', fieldName: 'Type', type: 'text', sortable: true },
        { label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency', sortable: true },
        { label: 'Phone', fieldName: 'Phone', type: 'phone', sortable: true },
        { label: 'Website', fieldName: 'Website', type: 'url', sortable: true },
        { label: 'Rating', fieldName: 'Rating', type: 'text', sortable: true }
    ];

    @wire(accountRecords)
    wiredAccounts({ error, data }) {
        if (data) {
            this.fetchedAccounts = data;
        } else if (error) {
            console.error('Error fetching accounts:', error);
        }
    }
}

🧩 Apex Controller – ControllerClass.cls

public class ControllerClass {
    @AuraEnabled(cacheable=true)
    public static List<Account> accountRecords() {
        return [
            SELECT Id, Name, Rating, Website, Type, AnnualRevenue, Phone
            FROM Account
        ];
    }
}

---

✏️ Lightning Data Table With Inline Editing

lightning-datatable also supports inline editing, allowing users to update field values directly in the table without navigating to the record detail page.

🧩 HTML – lightningDatatableComponent.html

<template>
    <lightning-card title="Lightning Data Table with Inline Editing">
        <lightning-datatable
            data={fetchedAccounts}
            columns={columns}
            key-field="Id"
            hide-checkbox-column
            draft-values={draftValues}
            onsave={handleSave}>
        </lightning-datatable>
    </lightning-card>
</template>

🧩 JavaScript – lightningDatatableComponent.js

import { LightningElement, wire } from 'lwc';
import accountRecords from '@salesforce/apex/ControllerClass.accountRecords';
import updateAccounts from '@salesforce/apex/ControllerClass.updateAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class LightningDatatableComponent extends LightningElement {
    fetchedAccounts;
    draftValues = [];

    columns = [
        { label: 'Account Name', fieldName: 'Name', type: 'text', editable: true, sortable: true },
        { label: 'Type', fieldName: 'Type', type: 'text', sortable: true },
        { label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'currency', sortable: true },
        { label: 'Phone', fieldName: 'Phone', type: 'phone', sortable: true },
        { label: 'Website', fieldName: 'Website', type: 'url', sortable: true },
        { label: 'Rating', fieldName: 'Rating', type: 'text', sortable: true }
    ];

    @wire(accountRecords)
    wiredAccounts({ error, data }) {
        if (data) {
            this.fetchedAccounts = data;
        } else if (error) {
            console.error('Error fetching accounts:', error);
        }
    }

    handleSave(event) {
        const updatedFields = event.detail.draftValues;

        updateAccounts({ data: updatedFields })
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Accounts updated successfully.',
                        variant: 'success'
                    })
                );
                this.draftValues = [];
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error',
                        message: 'Failed to update records.',
                        variant: 'error'
                    })
                );
                console.error('Update error:', error);
            });
    }
}

🧩 Apex Controller – ControllerClass.cls

public class ControllerClass {

    @AuraEnabled(cacheable=true)
    public static List<Account> accountRecords() {
        return [
            SELECT Id, Name, Rating, Website, Type, AnnualRevenue, Phone
            FROM Account
        ];
    }

    @AuraEnabled
    public static void updateAccounts(Object data) {
        List<Account> updatedAccounts = 
            (List<Account>) JSON.deserialize(JSON.serialize(data), List<Account>.class);
        update updatedAccounts;
    }
}

---

🧠 Conclusion

lightning-datatable is a robust and flexible component that lets you build data-rich experiences quickly in LWC. With support for formatting, inline editing, sorting, and more, it is perfect for displaying records in a structured, user-friendly way.

🚀 Key Takeaways:

• Use columns to define the structure and formatting of the data.

• Use draft-values and onsave for inline editing.

• Leverage Apex with @wire or imperative calls for dynamic data loading and updates.

• Don’t forget to handle errors and success messages with ShowToastEvent.