--- schema_version: "1" id: 8dc53e12f08cf0f5b47b14f5152f164a78616a82cdd59eb32a5bb1e0e8a3224b title: Datatable Lightning Web Component ReadMe Summer '19 (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_summer19.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_datatable_lightning_web_component_readme_summer19.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: e62c795094fd36430c10b8b183ae343fd281b00d1db199a55de7b1317b78fee8 description: For the managed package runtime, this page contains the DataTable LWC ReadMe as of the Vlocity Insurance and Health Summer '19 release. products: - Omnistudio release: "264" --- # Datatable Lightning Web Component ReadMe Summer '19 (Managed Package) For the managed package runtime, this page contains the DataTable LWC ReadMe as of the Vlocity Insurance and Health Summer '19 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. 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 (seeAvailable 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 thecolumns 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	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.

## 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 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 thedata 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.