(LWC) - Lightning Datatable: Custom Data Types

Question

Is it possible to create lookup fields and picklists with custom data types now?

Documentation says:

Create your own data types if you want to implement a custom cell, such as a delete row button or an image, or even a custom number display.

Component difference page also says:

lightning-datatable supports custom data types in table cells.

Since a child component is needed for custom data types, can these inner components be a custom picklist component or a lookup component?

import LightningDatatable from 'lightning/datatable';

import deleteRow from './deleteRow.html';
export default class MyDatatable extends LightningDatatable {
   static customTypes = {
       deleteRowButton: {
           template: deleteRow,
           // Provide template data here if needed
           typeAttributes: ['attrA', 'attrB'],
       }
      //more custom types here
   };
}

Answer 1

Yes, absolutely. You can create your own custom component with any tags/content you want and render it in a table cell for that column.

Step 1 : create custom component
Step 2 : Create a new component which extends datatable
Step 3 : We can use the component (that extended datatable) where-ever we want

Full details here: How to use custom LWC lightning component in lightning-datatable

Answer 2

Below I described step by step how you can do it.

For more details and code you can check the following post:
Custom Types in LWC Lightning Datatable

Create a Custom Data Type component

customTypeA/customTypeA.html

<template>
   <a href='#' onclick={fireCustomTypeA}>
      CustomTypeA
   </a>
</template>

customTypeA/customTypeA.js

import { LightningElement, api } from 'lwc';

export default class CustomTypeA extends LightningElement {

@api recordId;
@api recordName;
@api createdDate;

  fireCustomTypeA() {
    const event = new CustomEvent('customtypea', {
        composed: true,
        bubbles: true,
        cancelable: true,
        detail: {
            recordId: this.recordId,
            recordName: this.recordName
        },
    });
    this.dispatchEvent(event);
  }
}

Creating a Template

customLightningDatatable/customTypeA.html

<template>
  <c-custom-type-a
    record-id={value}
    record-name={typeAttributes.recordName}
    record-created-date={typeAttributes.createdDate}
  ></c-custom-type-a>
</template>

Create Custom Lightning Datatable

customLightningDatatable/customLightningDatatable.js

import LightningDatatable from 'lightning/datatable';
import customTypeA from './customTypeA';
import customTypeB from './customTypeB';
export default class CustomLightningDatatable extends LightningDatatable {
static customTypes = {
    customTypeA: {
        template: customTypeA,
        typeAttributes: ['recordId', 'recordName']
    },
    customTypeB: {
        template: customTypeB,
        typeAttributes: ['recordId', 'recordName']
    }
  }
}

Use Custom Lightning Datatable

<template>
   <c-custom-lightning-datatable key-field="id"
                              data={data} 
                              columns={columns} 
                              hide-checkbox-column
                              oncustomtypea={handleCustomTypeA}
                              oncustomtypeb={handleCustomTypeB}>
   </c-custom-lightning-datatable>
</template>

import { LightningElement } from 'lwc';
export default class MyDataTable extends LightningElement {
 
columns = [
    { label: 'Record Name', fieldName: 'name', type: 'text'},
    { label: 'Custom Type A', fieldName: 'id', type: 'customTypeA', typeAttributes: {
            recordName: { fieldName: 'name' },
            createdDate: { fieldName: 'createdDate' }
        }
    },
    { label: 'Custom Type B', fieldName: 'id', type: 'customTypeB', typeAttributes: {
        recordName: { fieldName: 'name' },
        createdDate: { fieldName: 'createdDate' }
    }
    }
];

data = [
    { id: 1, name: 'Example 1', createdDate: '08-05-2020 '},
    { id: 2, name: 'Example 2', createdDate: '08-05-2020 '},
    { id: 3, name: 'Example 3', createdDate: '08-05-2020 '},
    { id: 4, name: 'Example 4', createdDate: '08-05-2020 '},
    { id: 5, name: 'Example 5', createdDate: '08-05-2020 '},
    { id: 6, name: 'Example 6', createdDate: '08-05-2020 '},
    { id: 7, name: 'Example 7', createdDate: '08-05-2020 '},
    { id: 8, name: 'Example 8', createdDate: '08-05-2020 '}
];
 
handleCustomTypeA(event) {
    const { recordId, recordName } = event.detail;
    console.log('CUSTOM TYPE A' + recordId);
}

handleCustomTypeB(event) {
    const { recordId, recordName } = event.detail;
    console.log('CUSTOM TYPE B' + recordId);
}
}