Create a Custom Data Type for lightning-tree-grid

The lightning-tree-grid component uses lightning-datatable to format 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-tree-grid reference documentation.

The lightning-tree-grid component supports these approaches for defining custom types.

• Extend the LightningTreeGrid class. If your use case is simple, create a new tree grid component that defines the custom type. A simple use case means the custom type can use a standard cell layout supplied by the tree grid, and you don't require use of dynamic custom types.
• Use a slot. If you want to use dynamic custom types, pass the custom type into the lightning-tree-grid component in a slot. See Pass in Custom Data Types Using a Slot.

Create your own data type to implement a custom cell, such as 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 LightningTreeGrid class of the lightning-tree-grid 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.

The UI that you include in the template can be whatever suits your use case and usability requirements.

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

In your JavaScript file customDatatypeTreegrid.js, extend the LightningTreegrid 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.

Using the lwc:if conditional directive makes sure that the badge is displayed only when the record includes an industry name.

The customName example is a simple data type that's expressed with only HTML. Let's take a look at the more complex customNumber example, which composes a child component from a separate component bundle.

The child component contains a lightning-formatted-number base component that displays in red or green text color depending on its value. An icon is displayed next to the number based on its value.

The JavaScript file contains the customization for the text colors, icon names, and icon variants.

Let's implement a lightning-tree-grid component that uses the custom data types. The first column displays the account name using the standard text type. The second column uses the customName data type and the third column uses the customNumber data type. The nested contact names and email use standard data types. The last column is a button-icon standard type that displays a record edit modal when clicked.

Display 10 account records with associated contacts in your component using an Apex controller.

To implement the treegrid with the custom data types, create a wrapper component to contain your extended treegrid component. Define the columns and fetch data. Here we use accountsTreegrid as the wrapper component. It extends NavigationMixin(LightningElement) so we can use the lightning/navigation module to navigate to a record edit modal.

The wrapper component uses data.map to create a new array based on the original data retrieved from the Apex controller. For each account in data, it creates a new object using the spread operator ... to copy all existing properties. It then adds the _children property with the value of account.Contacts. The resulting array is directly assigned to this.accounts.

Finally, assign accounts on the data attribute of the lightning-tree-grid component.

The handleRowAction event handler displays a record edit modal using the lightning/navigation module.

Let's implement a lightning-tree-grid component that loads a Ratings column using a custom data type. The example adds several buttons that you can click to expand or collapse nested rows. It also adds a Ratings button that you can click to display the Ratings column.

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 customRating.html file contains the UI for the account rating.

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

The customRating component composes a child component that renders the corresponding icon for the account rating. It uses the lwc:if conditional directive to render the child component only if the account has a rating value passed into the optionValue property.

The option-value attribute passes the data to the customDatatypeRating child component.

This component receives data from the parent component through the optionValue property.

In the JavaScript file, the option getter function calculates the value of the option property. If the account rating that's returned by optionValue is Hot, the lightning-dynamic-icon base component sets the option property to up, which displays the up trending icon. If the account rating that's returned by optionValue is Warm, the component displays the neutral trending icon. Otherwise, the component displays the down trending icon for Cold and unknown ratings.

Finally, create your lightning-tree-grid component wrapper.

Pass in the custom data type using the customdatatypes slot.

Define your column data and pass in the customRating custom data type to the Rating column.

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

Additionally, the handleExpandAll() method calls the expandAll() public method on the lightning-tree-grid component to expand all nested rows. And the handleCollapseAll() method calls the collapseAll() public method on the lightning-tree-grid component. In both cases, the lwc:ref directive locates the lightning-tree-grid component in the DOM using a unique ID you specify.