Design a site like this with
Get started

Using custom LWC components in lightning datatable

Using this article, you will be able to use custom LWC lightning component in lightning-datatable. PFB screenshot:

Here I created custom component to show in column UPLOAD

For doing this, you can follow 3 steps as below:

Step 1 : create custom component as follows.

pocCustomComp.html :

        Id: {recordId}
    <lightning-file-upload label="Upload"
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

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

<!-- pocFileUpload.html -->
    <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:

@track data = [];
	connectedCallback() {
		this.columns = [
			{ label: 'Name', fieldName: 'Name', typeAttributes: { acceptedFormats: '.jpg,.jpeg,.pdf,.png' } },
			{ label: 'Account Number', fieldName: 'AccountNumber' },
			{ label: 'Upload', type: 'fileUpload', fieldName: 'Id' }
		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.


Join the Conversation


  1. How do you save the file you uploaded on the record?
    Also, is it possible for lookup, picklist etc?


Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: