Create a Custom Data Type

The lightning-datatable component formats data based on the type you specify for the column.

Before you create your own data type, check the standard data types to see if one meets your requirements. You can use type attributes to customize the output for many types. The standard data types are:

• action
• boolean
• button
• button-icon
• currency
• date
• date-local
• email
• location
• number
• percent
• phone
• text (default)
• url

For more information on standard data types and their type attributes, see the lightning-datatable reference documentation.

Additionally, consider SLDS styling hooks before you create your own data type. SLDS styling hooks help you customize a supported data type across the shadow DOM. For example, you can use an SLDS styling hook to apply a different color on a button data type.

Create your own data type to implement a custom cell, such as a delete row button or an image, or even a custom text or number display. You can also apply a custom class for each row on your custom data type.

To define and use a custom data type, extend the LightningDatatable class of the lightning-datatable component in a new component.

Create a Lightning web component and define your type in an HTML template in the component folder. The template can contain the complete UI for a simple data type that doesn’t require JavaScript. The template can also embed a component that you define in another folder. For example, use a separate component when you want to include logic that determines what to display.

Let’s look at the folder structure for the component myCustomTypeDatatable, which defines two custom types.

In your JavaScript file myCustomTypeDatatable.js, extend the LightningDatatable class and specify your type’s name and template file. This example creates a custom name type and custom number type using the customName.html and customNumber.html templates.

Pass in the following properties to the customTypes object.

In your custom data template customName.html, add the markup for your data type. This example creates a custom type that renders a text label using a lightning-badge component.

The customNumber.html template uses the default bare layout because myCustomTypeDatatable.js sets standardCellLayout: false for customNumber. You can add your own styling. This example adds a small padding around the cell and floats the number to the right. An icon is displayed if the number matches criteria specified in the data definition.

Let’s implement a data table that uses the custom types. The first column displays the account name using the custom type we created in the previous section. The fieldName property matches the Name field on the account object.

Display 10 account records in the data table using an Apex controller.

To implement the custom type datatable, create a wrapper component to contain your extended datatable component, define the datatable’s columns, and fetch data. Here we use myDatatable as the wrapper.

When defining the columns, you can pass in SLDS utility classes using the cellAttributes property.

myDatatable.js shows several ways to apply styling on a custom cell. The Industry column uses the slds-text-color_success class only if the field value matches Energy. The NumberOfEmployees column uses the slds-theme_alert-texture class on all rows of the column. Additionally, the customNumber type that’s used for the NumberOfEmployees column includes layout and padding classes implemented directly in the customNumber.html markup.

Next, pass the data returned by the getAccountList Apex controller to the data attribute in your custom type datatable component.

You can determine which custom data types to load dynamically at run time based on context. For example, you can pass one set of data types when the datatable displays data from a specific object and then have a different set of data types for another object.

To dynamically load a custom data type, use a data provider component and pass in your templates via the customdatatypes slot. To create a data provider component, import your template files and use an @api annotated getDataTypes() method in your component class.

Return the template names and properties using getDataTypes() instead of the static customTypes property. You also don’t need to extend LightningDatatable to create a custom type.

Your lightning-datatable component passes in the custom data types using a customdatatypes slot.

When passing in custom data types using a slot, the lightning-datatable component listens to slot changes and updates the columns accordingly.

Let’s implement a data table with a button that loads a Contact Picture column using a custom data type.

When you click the Add Custom Type button, the Contact Picture column is only displayed using the customdatatypes slot. The button is disabled after you load the custom data type.

Create your custom data type and add the custom data type component in the same folder. For example, the customProvider.html file contains an empty <template> tag and the customPicture.html file contains the UI for a custom data type that displays an image.

The customProvider.js file imports and defines the custom data type within the same folder. It extends LightningElement instead of LightningDatatable, and it returns the custom data type definition via the public getDataTypes() method.

The customPicture.html file displays the picture using the typeAttributes column property pictureUrl.

Next, create your lightning-datatable component wrapper.

Pass in the custom data type using the customdatatypes slot.

Define your column data and pass in the customPictureType custom data type.

On initialization, the custom data type column is empty because the showCustomTypes property is false. The constructor() method removes the customPictureType column from the columns object and the addCustomTypes() method sets all columns on the columns object.

If the standard data types don't meet your requirements, use a custom data type to define how a cell displays your data . With custom data types, you can also customize data type layout and styles. Similar to a standard data type, you can make a custom data type editable.

When sorting with a standard data type, you can identify which column is being sorted via the onsort event handler using event.detail.fieldName. For an example, see the lightning-datatable reference documentation.

However, when sorting a custom data type, you can't use event.detail.fieldName as it returns undefined. To sort a custom data type, pass in the field name to your sorting function. Let's say your custom data type returns the Picture__c field name.

See Also

• Pass Markup into Slots
• Dispatch a Custom Event From a Custom Data Type