DataTable Lightning Web Component ReadMe CME Spring '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. 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.

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

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

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:

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

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

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

<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;
}