For the managed package runtime, this page contains the DataTable LWC ReadMe as of the Vlocity Insurance and Health Summer '19 release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
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 (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
<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 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 |
|
|
groupFieldName |
string |
yes |
The reference key (field name) from thedata JSON used to group the table. |