5

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
   };
}
7

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

1
  • I am loosing inline editing feature for custom lightning datatable. Is it expected ? – Rajendra Singh Nagar Aug 6 '20 at 13:39
7

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

enter image description here

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);
}
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.