How to use custom LWC lightning component in lightning-datatable

If we want to have custom lightning component in LWC lightning-datatable, for example Upload file for each of the records, how can we do that?


Step 1 : create custom component as follows.

pocCustomComp.html :

        Id: {recordId}
    <lightning-file-upload label="Upload"

and its JS:

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class PocCustomComp extends LightningElement {
    @api recordId;
    @api acceptedFormats;
    handleUploadFinished() {
        this.dispatchEvent(new CustomEvent('uploadfinished', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                data: { name: 'some data', recordId: this.recordId }
        this.dispatchEvent(new ShowToastEvent({
            title: 'Completed',
            message: 'File has been uploaded',

Step 2 : Create a new component which extends datatable


import LightningDatatable from 'lightning/datatable';
import pocFileUpload from './pocFileUpload.html';

export default class PocLightningDatatable extends LightningDatatable {
    static customTypes = {
        fileUpload: {
            template: pocFileUpload,
            typeAttributes: ['acceptedFormats'],

Here we are defining custom data types – fileUpload. Also do you notice that we are importing pocFileUpload template? You need to create pocFileUpload.html in the same folder as pocLightningDatatable

enter image description here

pocFileUpload.html – you have to use the custom component that we created before.

    <c-poc-custom-comp record-id={value}

Observe the usage of value here, it is automatically passed as the value for the fieldName we define in columns.

Step 3 : We can use the component (that extended datatable) where-ever we want

    <c-poc-lightning-datatable key-field="id"

And the javascript which uses custom datatype:

import { LightningElement, track } from 'lwc';
import findAccounts from '@salesforce/apex/poc.findAccounts';

export default class Poc extends LightningElement {
    @track data = [];
    connectedCallback() {
        this.columns = [
            { label: 'Name', fieldName: 'Name' },
            { label: 'Account Number', fieldName: 'AccountNumber' },
            { label: 'Upload', type: 'fileUpload', fieldName: 'Id', typeAttributes: { acceptedFormats: '.jpg,.jpeg,.pdf,.png' } }
        findAccounts().then(res => { = res; }).catch(err => console.error(err));
    handleUploadFinished(event) {
        console.log('data => ', JSON.stringify(;

Note: pocLightningDatatable.html will not have anything in it.

Apex class:

public without sharing class poc {

    public static List<Account> findAccounts() {
        return [SELECT Name, AccountNumber from Account Limit 10];



enter image description here

Source : Link , Question Author : salesforce-sas , Answer Author : salesforce-sas

Leave a Comment