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 datatable 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 child component, which is a new component you can create on your own that's not part of the lwc-recipes repo.

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.

If you dispatch a custom event on a custom data type via the customdatatypes slot, you can handle the custom event on the lightning-datatable component. For example, add the onphotoclick handler like this.

For more information, see Pass in Custom Data Types Using a Slot.

See Also

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