How to Implement a Lightning Data Table in Salesforce with LWC Code

Here's an example of a Lightning Web Component (LWC) code for implementing a Lightning Data Table in Salesforce:

lwcComponent:

<template>

    <lightning-card title="Account Records" icon-name="standard:account">

        <div class="slds-m-around_medium">

            <lightning-datatable

                key-field="Id"

                data={data}

                columns={columns}

                onrowaction={handleRowAction}

                hide-checkbox-column="true">

            </lightning-datatable>

        </div>

    </lightning-card>

</template>

lwcComponent:

import { LightningElement, wire } from 'lwc';

import { refreshApex } from '@salesforce/apex';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import getAccountRecords from '@salesforce/apex/AccountController.getAccountRecords';

const columns = [

    { label: 'Account Name', fieldName: 'Name', type: 'text' },

    { label: 'Industry', fieldName: 'Industry', type: 'text' },

    { label: 'Phone', fieldName: 'Phone', type: 'phone' },

    { label: 'Website', fieldName: 'Website', type: 'url', typeAttributes: { target: '_blank' } }

];

export default class LwcComponent extends LightningElement {

    data;

    error;

    @wire(getAccountRecords)

    wiredAccountData({ error, data }) {

        if (data) {

            this.data = data;

            this.error = undefined;

        } else if (error) {

            this.error = error;

            this.data = undefined;

            this.showToast('Error', 'An error occurred while retrieving account records.', 'error');

        }

    }

    get columns() {

        return columns;

    }

    handleRowAction(event) {

        const row = event.detail.row;

        // Handle row action logic here

    }

    showToast(title, message, variant) {

        const event = new ShowToastEvent({

            title: title,

            message: message,

            variant: variant

        });

        this.dispatchEvent(event);

    }

    refreshTable() {

        return refreshApex(this.wiredAccountData);

    }

}

Explanation:

1. The HTML markup includes the Lightning Card and Lightning Data Table components. The lightning-datatable component is responsible for rendering the data table with the specified columns and data.
2. In the JavaScript file, the @wire decorator is used to retrieve the account records using the getAccountRecords Apex method. The retrieved data is then stored in the data property and displayed in the data table.
3. The columns array defines the columns to be displayed in the data table.
4. The handleRowAction method handles the row-level actions, such as clicking on a row or performing custom actions.
5. The showToast method is used to display toast notifications with the specified title, message, and variant.
6. The refreshTable method utilizes the refreshApex function to refresh the data in the data table.
7. Please note that the code assumes you have an Apex class named AccountController with a method `getAccountRecords` that retrieves the account records.

Make sure to import the necessary modules and components and adjust the code as per your specific requirements.

Remember to also include appropriate styling in your CSS file (lwcComponent.css) to enhance the appearance of the Lightning Data Table component.

That's it! You can now use this Lightning Web Component in your Salesforce org to display and interact with account records in a Lightning Data Table.