Using Custom types in LWC (Lightning Web Component) Data tables

LWC – Data table 

Lightning Web Components are built using HTML and JavaScript. To display rows and columns of record data in a tabular format, we can make use of the lightning-data table component. This uses the data tables blueprint from Salesforce Lightning Design System (SLDS) and provides an effortless way of displaying the recorded data on desktop and not on mobile devices. A data table is also used with other features like pagination, searching, sorting, navigating, and filtering data. 

Custom data type in data table 

The data table displays the data in a tabular format where each of the column is formatted based on the data type which is specified for each column. The data type is specified using the “type” attribute in each column definition. This lightning-data table component supports many standard data types like text, action, Boolean, button, currency, date, etc.,  

If we have a use case to display some information that goes beyond the standard data types and its associated formatting, we can create our own custom data types using the custom data type feature of LWC data table.  

For example, to display toggle buttons, images, rich text as below. 

Architecture 

Instead of using the standard data table tag (lightning-data table) to display the data table, we will create a custom data table to use the custom data types. The custom data table (customDatatable) is used as a child-parent web component (app). The custom data table components make use of the standard LightningDatatable class. The custom data table component can be used to define multiple custom data types. Based on the template name provided in the custom data table, the corresponding custom data type is mapped, and its template is displayed as cell content. The HTML to be rendered should also be placed within the custom data table component’s folder for each custom data type. 

Implementation of custom data types 

Below are the steps to be followed for implementing custom data types in the lightning-data table. 

  • Create a custom data template 
  • Define the custom data type and create custom lightning data table component 
  • Implement custom lightning data table component with custom data type 

Step 1: Create a custom data template 

This is the component that defines the data type to be displayed within the cell of the data table. 

As per the example, “toggleButtonOutput” is the custom data template to be used for toggling custom data type. 

  • Meta data file: (toggleButtonOutput.js-meta.xml) 

The component is exposed in the meta data file, but targets are not required. 

  • HTML file: (toggleButtonOutput.html) 

HTML file defines the outlook of the cell. The markup for the custom data type is defined in the HTML file. This example creates a custom type that renders the cell with lightning-input component with type as “toggle.” 

  • JS file: (toggleButtonOutput.js) 

JS file contains the logic to be executed on firing a browser event like onClick, onChange. This example displays the row id in toast message during “onchange” event of the toggle. 

Step 2: Define the custom data type and create custom lightning data table component 

Create a custom data type by extending the “standard LightningDatatable” class. To create custom data types, create a lightning web component and define the type in JavaScript.  

The folder structure is  

where “myTypes” is the folder that holds templates for custom data types “customName,” “customNumber” and the definition of the component, “myTypes.” “myTypes” component JS file (myTypes.js) extends “LightningDatatable” class and specifies the custom type’s name and the corresponding template file to be rendered for that custom template.  

As per the example, “customDatatable” is the newly created custom lightning data table component which is used to define the custom data type. 

  • Meta data file: (customDatatable.js-meta.xml) 

The component is exposed in the meta data file, but targets are not required. toggleButtonOutput.js-meta.xml 

  • HTML file: (customDatatable.html) 

No content is given in this file because it is rendered based on the custom type of template which is defined in the JS file (customDatatable.js) 

  • JS file: (customDatatable.js) 

This JS file extends the LightningDatatable class and defines the template to be used for the custom data type. “customTypes” object have below properties. 

  1. template à the name of HTML template file name 
  1. typeAttributes à the comma-separated list of attributes 
  1. standardCellLayout à Specifies whether the standard layout is used 
customDatatable.js
  • HTML file: (toggleButtonColumnTemplate.html) 

HTML file uses the custom data type template created in Step 1. This is created within the same folder which holds the custom lightning data table component (the component which extends LightningDatatable class). 

Step 3: Implement custom lightning data table component with custom data type 

Implementing the custom lightning data table which holds the custom data type in the web component designed for the use case.  

As per the example, “app” is the parent web component which holds the custom lightning data table component.  

  • Meta data file: (app.js-meta.xml) 

The component is exposed in the meta data file with the target as “Home” page. 

app.js-meta.xml
  • HTML file: (app.html) 

This HTML file calls the custom data table component (created in Step 2) 

app.html
  • JS file: (app.js) 

This JS file defines the columns and data to be used for the custom lightning data table. Any logic to be executed during the browser events are also implemented in this file. 

Output 

  • The component (“app”) is placed in the home page. The column “Custom Buttons” make use of the custom data type “toggle” within lightning data table. 
Graphical user interface, text, application, emailDescription automatically generated
  • On clicking the toggle button of 2nd row 
Graphical user interface, text, application, TeamsDescription automatically generated
  • Info toast message with the row id is displayed. 
Graphical user interface, applicationDescription automatically generated

Limitations of Using custom data types in lightning-data table 

  • It does not support inline editing 
  • Unable to dispatch custom events 
  • It does not support keyboard accessibility 

Summary 

Thus, custom data types can be used in the lightning web component data table along with the standard data types and its properties. This feature overcomes the challenges faced in displaying the data with types other rather than the standard data types.  

References 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.