Datatable Lightning Web Component ReadMe Winter '20 (Managed Package)

For the latest ReadMe, see DataTable Lightning Web Component ReadMe (Managed Package).

The DataTable Lightning Web Component creates a tabular structure of the data provided. It supports grouping, search, pagination and sorting capabilities.

Available c-data-table Attributes

IMPORTANT: The table reflects the order by which attributes must be set for c-data-table.

Attribute	Value	Type	Required	Description
extraclass		string		Adds a class to the table element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.
issearchavailable	true, false (Default: false)	boolean		To make table searchable, set to true. Displays the search input field and filter dropdown.
issortavailable	true, false (Default: false)	boolean		To make table sortable, set to true. This feature is not available on phones and smaller screens.
theme	slds, nds (Default: slds)	string		Specifies which theme to use.
icon-url	url	string		Overrides the default URL of the svg resource. Used with Newport Design System (NDS) theme only.
group-by	JSON	object		To group table based on a record field, set this attribute. To make field name the group header, set the field name as the value for this attribute. To add a group description with the group header, pass an object as a value for this attribute (see Available groupBy Attributes).
pagesize		number		If set, enables pagination.
row-level-edit	true, false (Default: false)	boolean		To enable row-level editing, set to true. The columns JSON must have editable fields. See Available columns Attributes.
user-selectable-column	true, false (Default: true)	boolean		Enables users to choose which columns are visible. If set to true, in the columns JSON, only those fields with userSelectable set to true will be visible. See Available columns Attributes.
columns	JSON	array	yes	Contains heading names and specifies settings for each column. See Available columns Attributes.
records	JSON	array	yes	Contains the data to populate the table.
cell-level-edit	true, false (Default: false)	boolean		To enable cell-level editing, set to true. To make specific cells editable, see Available columns Attributes.
group-order	asc, dsc	string		Orders group in ascending or descending order.
hide-table-header	true, false (Default: false)	boolean		To hide table header, set to true.
pagelimit	(Default: 3)	number		Specifies how many page navigation links to add to pagination. The pagesize must be set.
draggable	(Default: false)	boolean		Specifies whether rows should be draggable or not. whenever a drag happens and order is updated then onupdate event is fired. Inside event handler you can get the updated data inside event.detail.result.
row-delete	(Default: false)	boolean		Specifies whether each row includes a delete option or not. NOTE: if once deleted it gets removed from the table altogether. Whenever we delete ondelete event is fired. Inside event handler you can get the deleted data inside event.detail.result.

Example c-data-table Component

<c-data-table extraclass="slds-table_bordered" issearchavailable="true" issortavailable="true" theme="{theme}" icon-url="{iconUrl}" group-by="company" pagesize="4" onupdate="{tableDataUpdated}" row-level-edit="true" user-selectable-column="true" columns="{columns}" records="{tableData}"
>
</c-data-table>

Example data JSON

[{ "email": "jsolitas@motorsrus.com", "company": "Motors R Us", "age": "44", "balance": "$11,500", "address": "846 Livonia Avenue, Siglerville, Maryland, 5503", "isActive": true }, { "email": "robasanjo@treeline.org", "company": "TreeLine Group", "age": "32", "balance": "$9,678", "address": "902 Myrtle Avenue, Rockhill, Delaware, 3863", "isActive": true }, { "email": "n-daily@dailys.com", "company": "Daily Corp", "age": "57", "balance": "$22,888", "address": "408 Aster Court, Riceville, Indiana, 9646", "isActive": false }, { "email": "g-gomez@dailys.com", "company": "Daily Corp", "age": "44", "balance": "$6,983", "address": "856 Benson Avenue, Ballico, North Carolina, 4930", "isActive": true }
];

Available columns Attributes

Attribute	Value	Type	Required	Description
editable	true, false (Default: false)	boolean		Specifies whether column is editable.
fieldName		string	yes	Gets the key for the column from the data JSON.
label		string	yes	Sets the visible name of the column heading.
searchable	true, false (Default: false)	boolean		To enable the ability to search column values, set to true.
sortable	true, false (Default: false)	boolean		To enable column sorting, set to true. On hover of column heading, a sorting icon displays next to the column name.
type	number, text, email, textarea, checkbox (Default: text)	string		Specifies the type of value column holds.
userSelectable	true, false (Default: false)	boolean		If set to true, enables user to choose if column is visible.
visible	true, false (Default: true)	boolean		To hide column, set to false. If set to false and userSelectable is set to true, user can make column visible.

Example columns JSON

 [{ "fieldName": "company", "label": "Company", "sortable": true, "searchable": true }, { "fieldName": "email", "label": "Email", "sortable": true, "searchable": true, "type": "email", "editable": true, "userSelectable": true }, { "fieldName": "age", "label": "Age", "sortable": true, "type": "number", "editable": true, "userSelectable": true }, { "fieldName": "balance", "label": "Balance", "sortable": true, "userSelectable": true }, { "fieldName": "address", "label": "Address", "sortable": false, "type": "textarea", "editable": true, "userSelectable": true }, { "fieldName": "isActive", "label": "Active", "sortable": false, "type": "checkbox", "editable": true } ];

Available group-by Attributes

Attribute	Value	Type	Required	Description
fields	list	array		Sets group header description for every visible row after grouping. Each object takes a field name that has its own group desciption, which by default is the sum of all selected field from all the records. To get group description using a custom function, pass function to methodToCalculateSummary, which takes 'groupItems' as an argument. For example, nameOfFunction(groupItems){}.
groupFieldName		string	yes	The reference key (field name) from the data JSON used to group the table.

Example group-by JSON

 { "groupFieldName": "company", "fields": [ { "name": "balance", "methodToCalculateSummary": "" } ] };

Available Event Listeners

onupdate

Triggers when table data changes.

ondelete

Triggers when a table row is deleted.

onrowclick

Triggers when a row is clicked and includes the record on which the click happens. Is inside event.detail.result.

Adding Custom Column UI

To add a custom column specify each column inside data table:

<c-data-table extraclass="slds-table_bordered" issearchavailable="true" issortavailable="true" theme={theme} icon-url={iconUrl} draggable="true" columns={columns} records={tableData} onupdate={tableUpdateHandler} ondelete={tableUpdateHandler} row-delete="true"
> <c-customDataTableCell data-field-name="email" class="dataTableCell"> </c-customDataTableCell> <c-data-table-cell data-field-name="age" class="dataTableCell"> </c-data-table-cell> <c-data-table-cell data-field-name="balance" class="dataTableCell"> </c-data-table-cell> <c-data-table-cell data-field-name="address" class="dataTableCell"> </c-data-table-cell> <c-data-table-cell data-field-name="isActive" class="dataTableCell"> </c-data-table-cell> <c-data-table-cell data-field-name="phone" class="dataTableCell"> </c-data-table-cell>
</c-data-table>

As you can see how we create a data table is not changed at all, the only piece that is different is for each column you want to show, you have to write its relevant column inside data table element.

THE ELEMENT THAT IS SUPPORTED INSIDE DATA TABLE IS EITHER DATATABLECELL OR EXTENDED LWC OF DATA TABLE CELL.

Each column element should have two mandatory attributes: a) data-field-name : This is the same field name we specify inside columns array as mentioned before.

b) class : You should add a dataTableCell class for it to be treated a column UI.

INSIDE EXTENDED COMPONENT YOU WILL HAVE FOLLOWING DATA: a) cellData : This is that particular column cell data. For eg: if this column field name is "email". this variable will contain related data to that field name. You can read it by "cellData.value"

b) rowData: This contains complete row data as it is of one single record and can be used to show more data as well.

c) columnData: This contains metadata of what you pass inside columns json.

NOTE: Even if we just want to customize one column we have to specify all the columns inside data table. If you dont want to customize any column then keep inside of data table empty.

NOTE: For now custom column UI support is not supported in GROUP BY tables.

Examples of a custom column UI component. You can use it as a reference. Please look at above data table example.

customDataTableCell

<template> <div if:true={cellData} class="tableRowCell"> <!--Start your custom content from here--> {cellData.value} : <br>{rowData.phone} <button onclick={toggleText}>Toggle</button> <div if:true={hiddenText}> {cellData.value} </div> </div>
</template>

import {track} from 'lwc';
import dataTableCell from "c/dataTableCell";
export default class DataTableCellExtended extends dataTableCell { @track hiddenText= false; toggleText(){ this.hiddenText = !this.hiddenText; }
}

.tableRowCell{ display: table-cell; padding: 0.25rem 0.5rem; white-space: nowrap; position: relative;
} .tableRowCell:first { border: 0;
}