DataTable Lightning Web Component ReadMe Summer '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}"
  styles="{styles}"
>
</c-data-table>

Example of styles object

styles = {
  showGroupedHeaderAsAnchor: true, // used to show the group table header as anchor tag
  columnHeaderCaps: true // used to capitalize the table columns header fields
};

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

{
    "sortFieldName": "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. event.detail.fieldNamewill give the name of the field from where event was triggered.

Adding Custom Column UI

To add a custom column specify each column inside a dataTable and add the relevant column inside the data table element.

Note: The element inside the dataTable is either a dataTableCell or an extended LWC of the dataTableCell. The display order is the same as the order of the dataTableCell HTML in the slot.

NOTE: To customize one column you must specify all the columns inside the dataTable. If you do not want to customize any column then leave dataTable empty.

NOTE: GROUP BY tables does not support custom column UI.

Example customDataTableCell

DataTableCell or an extend LWC of a DataTableCell are supported 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>

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

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