--- schema_version: "1" id: 37a59b0dfe8c6d9ee1109e0903a0b149876d11371456716ebeb4d0cca81dfe12 title: DataTable Lightning Web Component ReadMe CME Spring '20 (Managed Package) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_datatable_lightning_web_component_readme_cme_spring20.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_datatable_lightning_web_component_readme_cme_spring20.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: e0fc59a605ac9d62cf757f34c69a0d45c2fa5b329a863c7780b6322a04e7d323 description: For the managed package runtime, this page contains the DataTable LWC Readme as of the Vlocity CME Spring '20 release. products: - Omnistudio release: "264" --- # DataTable Lightning Web Component ReadMe CME Spring '20 (Managed Package) For the managed package runtime, this page contains the DataTable LWC Readme as of the Vlocity CME Spring '20 release. ![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US). For the latest ReadMe, see [DataTable Lightning Web Component ReadMe (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_datatable_lightning_web_component_readme.htm&release=264.0.0&type=5 "For the managed package runtime, this page contains the DataTable LWC ReadMe as of the Summer '21 release."). The _DataTable Lightning Web Component_ creates a tabular structure of the data provided. The _DataTable LWC_ 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 groupByAttributes).

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 columnsAttributes.

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 columnsAttributes.

columns

JSON

array

yes

Contains heading names and specifies settings for each column. See Available columnsAttributes.

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 pagesizemust be set.

draggable

true, false (Default: false)

boolean

  

Specifies whether rows are draggable. The onupdate event is fired when a row is dragged and the order is updated. Inside the event handler get the updated data from event.detail.result.

row-delete

true, false (Default: false)

boolean

  

Specifies whether each row includes a delete option. Once the row is deleted, it is removed from the table. The ondelete event is fired. Inside the event handler get the deleted data from event.detail.result.
## Example c-data-table Component ``` ``` ## 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 dataJSON.

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 userSelectableis set to true, user can make column visible.

confirmdeleterow

true, false (Default: false)

boolean

  

Enables the user to show the delete confirmation prompt when deleting a row from the table.
## 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 the data table: ``` ``` DataTableCell or an extend LWC of a DataTableCell are supported inside the data table. ## Column Required Attributes a) data-field-name : This is the same field name specified inside columns array. b) class : Add a dataTableCell class to treated it as a column UI. ## Data Inside the Extended Component a) cellData : The column cell data. For example, if this column field name is "email", this variable comtains related data for that field name. Read it by "cellData.value". b) rowData: Contains complete row data as one single record and can also be used to show more data. c) columnData: Contains metadata for what you pass inside `columns`JSON. NOTE: To customize one column, you must specify all the columns inside the data table. If you don't want to customize any column, leave the data table empty. NOTE: Custom column UI support is not available in GROUP BY tables. ## Example customDataTableCell ``` ``` ``` 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; } ```