5

I have a custom LightningDatatable and I'm passing some typeAttributes to my component. Problem is, the last field is never being passed along my component.

customdatatable.js

export default class CustomDatatable extends LightningDatatable {
    static customTypes = {
        lookup: {
            template: LookupTemplate,
            typeAttributes: ['uniqueId', 'objectType', 'icon', 'label', 'displayFields', 'displayFormat', 'valueId', 'filters', 'additionalSearchField', 'editable', 'fieldName', 'extraField']
        }
    };
}

lookupTemplate.html

<template>
    <c-lookup-lwc editable={typeAttributes.editable} unique-key={typeAttributes.uniqueId}
        obj-name={typeAttributes.objectType} icon-name={typeAttributes.icon} label-name={typeAttributes.label}
        display-fields={typeAttributes.displayFields} display-format={typeAttributes.displayFormat}
        value-id={typeAttributes.valueId} field-name={typeAttributes.fieldName} extra-field={typeAttributes.extraField}
        additional-search-field={typeAttributes.additionalSearchField}>
    </c-lookup-lwc>
</template>

lookupLwc.js

export default class LookupLwc extends LightningElement {

    @api extraField;
    ...
}

In my lookupLwc component, all my fields such as editable and displayFields are populated correctly, but the last field, extraField is always undefined. Whichever property I put at the end in the typeAttributes in customdatatable.js is always undefined, so I'm wondering if there are a maximum number of properties you can pass?

5
  • Hey, just crossed this issue, looks like the number of attributes per custom template is limited at 11 or 12. Only workaround is to create an other template under it..Thanks though ;)
    – AshBringer
    Commented May 31, 2022 at 0:30
  • No it's not limited, I remember having a bug somewhere which caused the issue.
    – ViqMontana
    Commented May 31, 2022 at 7:45
  • I am also running into this issue. @ViqMontana is there a workaround for the bug causing this? Commented Jun 1, 2022 at 21:23
  • @Timestretch post your question as a new question
    – ViqMontana
    Commented Jun 2, 2022 at 7:10
  • @ViqMontana if you found the bug causing the issue can you please reply to this post with the answer?
    – TehNrd
    Commented Aug 21, 2022 at 3:40

1 Answer 1

3

Late on the response to this, but there seems to be an undocumented limit on the number of typeAttributes you can pass into a custom datatable cell. The limit appears to be 11 or 12. I was able to work around this by wrapping my type attributes in an object, passing it to the cell, and then unwrapping the properties I needed within cell.

Example code:

column config:

{
    label: 'Example Field',
    fieldName: 'Some_Field__c',
    type: 'exampleCustomCell',
    wrapText: true,
    typeAttributes: {
        wrapper: {
            attribute1: 'Here ',
            attribute2: 'is ',
            attribute3: 'an ',
            attribute4: 'example ',
            attribute5: 'of ',
            attribute6: 'a ',
            attribute7: 'custom ',
            attribute8: 'datatable ',
            attribute9: 'cell ',
            attribute10: 'that ',
            attribute11: 'in ',
            attribute12: 'effect ',
            attribute13: 'can ',
            attribute14: 'consume ',
            attribute15: 'more ',
            attribute16: 'than ',
            attribute17: 'eleven ',
            attribute18: 'type ',
            attribute19: 'attributes',
            attribute20: '!'
        }
    }
}

exampleCustomCell.html:

<template>
    {typeAttributes.wrapper.attribute1}
    {typeAttributes.wrapper.attribute2}
    {typeAttributes.wrapper.attribute3}
    {typeAttributes.wrapper.attribute4}
    {typeAttributes.wrapper.attribute5}
    {typeAttributes.wrapper.attribute6}
    {typeAttributes.wrapper.attribute7}
    {typeAttributes.wrapper.attribute8}
    {typeAttributes.wrapper.attribute9}
    {typeAttributes.wrapper.attribute10}
    {typeAttributes.wrapper.attribute11}
    {typeAttributes.wrapper.attribute12}
    {typeAttributes.wrapper.attribute13}
    {typeAttributes.wrapper.attribute14}
    {typeAttributes.wrapper.attribute15}
    {typeAttributes.wrapper.attribute16}
    {typeAttributes.wrapper.attribute17}
    {typeAttributes.wrapper.attribute18}
    {typeAttributes.wrapper.attribute19}
    {typeAttributes.wrapper.attribute20}
</template>

relatedListCustomTypes.js

import LightningDatatable from 'lightning/datatable';
import exampleCustomCellTemplate from './exampleCustomCell.html';

export default class RelatedListCustomTypes extends LightningDatatable {
    static customTypes = {
        exampleCustomCell: {
            template: exampleCustomCellTemplate,
            standardCellLayout: false,
            typeAttributes: ['wrapper'],
        }
    }
}

Result:

data cell visual

You can see how this can be applied when dynamically adding type attributes to some data - you can just create and write attributes to the wrapper object thanks to the flexibility of JS.

4
  • Interesting! Could you provide some example code? Commented Aug 5, 2022 at 20:14
  • 1
    I just wasted so much time on this. I've confirmed the limit is 11. This seems so arbitrary and feels like a bug. I am going to open a case.
    – TehNrd
    Commented Aug 21, 2022 at 3:38
  • 1
    @FelixvanHove finally added some Commented Aug 30, 2022 at 22:56
  • @TehNrd can you link to your case? Would love to follow it. Commented Aug 30, 2022 at 22:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .