HTML File (articleDatatable.html)

<template>
    <lightning-card title="Articles" icon-name="custom:custom63">
        <lightning-datatable
            key-field="id"
            data={articles}
            columns={columns}
            hide-checkbox-column>
        </lightning-datatable>
    </lightning-card>
</template>

JavaScript File (articleDatatable.js)

import { LightningElement } from 'lwc';

export default class ArticleDatatable extends LightningElement {
    // Sample data
    articles = [
        { id: '1', title: 'Introduction to LWC', author: 'John Doe', publishedDate: '2024-01-01' },
        { id: '2', title: 'Advanced LWC Concepts', author: 'Jane Smith', publishedDate: '2024-01-15' },
        { id: '3', title: 'Building Custom Components', author: 'Robert Brown', publishedDate: '2024-02-01' }
    ];

    // Column definitions
    columns = [
        { label: 'Title', fieldName: 'title', type: 'text' },
        { label: 'Author', fieldName: 'author', type: 'text' },
        { label: 'Published Date', fieldName: 'publishedDate', type: 'date' }
    ];
}

lightning-datatable Component:

data: Binds the data to the table.
columns: Binds the column definitions.
key-field: Identifies the unique field for each row (e.g., id).
hide-checkbox-column: Hides the checkbox column, making it a simple table.

Column Types:

let columns = [
    
{ label: 'Text', fieldName: 'textField', type: 'text' }, // Plain text
{ label: 'Number', fieldName: 'numberField', type: 'number' }, // Numeric value
{ label: 'Currency', fieldName: 'currencyField', type: 'currency' }, // Currency
{ label: 'Date', fieldName: 'dateField', type: 'date',
    typeAttributes: { day: 'numeric', month: 'short', year: 'numeric',
    hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true
}
}, // Date
{ label: 'Date/Time', fieldName: 'dateTimeField', type: 'date-local' }, // Date and time
{ label: 'Email', fieldName: 'emailField', type: 'email' }, // Email with mailto link
{ label: 'Phone', fieldName: 'phoneField', type: 'phone' }, // Phone number with tel link
{ label: 'URL', fieldName: 'urlField', type: 'url', typeAttributes: { label: { fieldName: 'urlLabel' } } }, // URL with custom label
{ label: 'Checkbox', fieldName: 'checkboxField', type: 'boolean' }, // Boolean (Checkbox)
{ label: 'Picklist', fieldName: 'picklistField', type: 'text' }, // Display picklist as text
{ label: 'Rich Text', fieldName: 'richTextField', type: 'richText' }, // Rich text (customized display)
{ label: 'Action', type: 'action', typeAttributes: { rowActions: actions } }, // Row-level actions (buttons)
{ label: 'Custom Type', fieldName: 'customField', type: 'customType' }, // Custom LWC cell renderer

];

lightning-datatable is an essential component for Salesforce developers who need to present data in a modern, interactive, and Salesforce-native way. Its flexibility and feature-rich API make it a cornerstone for building user-friendly and efficient Salesforce apps.
divyesh dudhat

Blogs

LWC lightning-datatable