Showing image in data table is one of major requirements in projects. In this post, we will see how we can show image in Lightning Web Component Data Table. In last blog Integrate Salesforce Stackexchange using Lightning Web Component and Apex I have created community to show Salesforce StackExchange user list. Let us add profile picture of user in same community.
By default datatable does not support image data type. We have to create custom data type for image in Lightning Web component.
Steps for creating custom data type
- Custom Control Creation
- Extend Lightning Data Table
- Use extended data table in Component
1. Custom Control Creation
Create custom control for showing profile pics. For this we need to create a lightning web component with below code. We are using img control to show profile pic and source for this image will be passed at runtime using @api parameter.
2. Extend Lightning Data Table
We have to extend lightning data table to show image in table row. Create another Lightning Web Component named ‘salesforceCodexDataTable’ . Create imageTableControl.html in same folder to use above created image control to show profile pics. This file is used as custom type while extending data table.
Folder structure for custom components:
3. Use extended data table in Component
After image custom data type is created for data table. Let us use this in component to show profile pics of Salesforce Stack Exchange User on community portal.
Here we have used image type to show profile pic in line no 3. fieldName: ‘profile_image‘ is having profile image url which is passed to image control as source url.