Dispatch a Custom Event From a Custom Data Type

The lightning-datatable component fires several custom events, including the rowselection event when a row is selected. For more information on the custom events available for lightning-datatable, see the lightning-datatable reference documentation.

If these custom events don't meet your requirements, you can dispatch your own custom event and handle it from your parent component.

Here's an example that navigates to a record when a custom data type is clicked. The data table loads a Contact Picture column using a custom data type.

Clicking a contact's photo redirects you to the corresponding contact record page using the navigation service.

The customDataTypes.js file imports and defines the customPicture data type within the same folder. To make the record ID available when the photo is clicked, the custom data type includes the recordId type attribute.

The customPicture template passes in the pictureUrl and recordId type attributes to the c-custom-pic component.

The c-custom-pic component includes a click handler. It displays an image based on the pictureUrl value passed in to the custom data type.

The click handler dispatches a clicked custom event with the detail property.

The datatableCustomDataType parent component listens to and handles the photoclick custom event.

The parent component imports the lightning/navigation module so it can navigate to a record edit page.

The ContactController.cls Apex class returns a list of contacts.

See Also

• Create a Custom Data Type
• Navigate to Pages, Records, and Lists