Skip to content

Latest commit

 

History

History
89 lines (64 loc) · 3.63 KB

README.md

File metadata and controls

89 lines (64 loc) · 3.63 KB
Raw

Salesforce LWC Datatable

A lightning-datatable component displays tabular data where each column can be displayed based on the data type. this component provides you datatable search, search with column, data sort and pagination functionality.

Attributes

NAME TYPE DEFAULT REQUIRED DESCRIPTION
key-field text id ✔️ Required for better performance. Associates each row with a unique ID.
columns array ✔️ Array of the columns object that's used to define the data types. Required properties include label, fieldName, and type. The default type is text. See the lightning-datatable Documentation for more information.
records array ✔️ The array of data to be displayed.
searchable boolean false ❌ For client-side data filtering
show-page-entries boolean false ❌ For showing per page records
show-filter-column boolean false ❌ For filtering all columns or a particular column
show-pagination boolean false ❌ For data table pagination
page-size-options array [10, 25, 50, 100] ❌ For page-entries user options
hide-checkbox-column boolean false ❌ If present, the checkbox column for row selection is hidden.
show-row-number-column boolean false ❌ If present, the row numbers are shown in the first column.
hide-table-header boolean false ❌ If present, the table header is hidden.
sorted-by text false ❌ The column fieldName that controls the sorting order. Sort the data using the onsort event handler.
sorted-direction text false ❌ Specifies the sorting direction. Sort the data using the onsort event handler. Valid options include asc and desc.

Usage

Html:

<c-datatable 
    key-field="id"
    columns={columns} 
    records={records}
    searchable
    show-page-entries
    show-filter-column
    show-pagination>
</c-datatable>

JavaScript:

@track columns = [
     {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
     {label: 'Confidence', fieldName: 'confidence', type: 'percent', cellAttributes: { iconName: { fieldName: 'trendIcon' }, iconPosition: 'right' }},
     {label: 'Amount', fieldName: 'amount', type: 'currency', typeAttributes: { currencyCode: 'EUR'}},
     {label: 'Contact Email', fieldName: 'contact', type: 'email'},
     {label: 'Contact Phone', fieldName: 'phone', type: 'phone'},
];

@track records = [{
                    id: 'a',
                    opportunityName: 'Cloudhub',
                    confidence: 0.2,
                    amount: 25000,
                    contact: 'jrogers@cloudhub.com',
                    phone: '2352235235',
                    trendIcon: 'utility:down'
                },
                {
                    id: 'b',
                    opportunityName: 'Quip',
                    confidence: 0.78,
                    amount: 740000,
                    contact: 'quipy@quip.com',
                    phone: '2352235235',
                    trendIcon: 'utility:up'
                }];;

/*More Details: https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example*/

Output:

output

More LWC datatable: lighting-datatable .

Thank you.