Skip to content

Lightning-datatable has wrong type of parameters passed to custom type columns through typeAttributes that passsed not with "fieldName" #4177

Open
@Paul-Kalynyn

Description

@Paul-Kalynyn

Description

I have created custom type for editing Picklist values of records using lightning-combobox. Inside its template it uses typeAttributes.options for options attribute. But if you specify in column configuration "typeAttributes" : { "options" : [ option1, options2 ]} then it will pass to actual options of lightning-combobox not the specified array, but an object { "0" : option1, "1": option2 }. And then under the hood lightning-combobox will ignore it and use empty array for options. But if you specify column configuration with "typeAttributes" : { "options" : { "fieldName" : "actionFieldName" } and then modify all rows of data for datatable by adding field "actionFieldName" that will contains expected options [ option1, option2 ] as value - it will work as expected, but this kind of configuration can be called workaround.

Steps to Reproduce

  1. Create LWC that extend LightningDatatable.
  2. Create custom type with edit template for lightning-datatable.
  3. Use lightning-combobox inside this template with {typeAttributes.options} as value for options attribute:
<template>
	<lightning-combobox
		name="customCombobox"
		data-inputable="true"
		label={typeAttributes.label}
		value={editedValue}
		placeholder={typeAttributes.placeholder}
		options={typeAttributes.options}
		variant="label-hidden"
		dropdown-alignment="auto">
	</lightning-combobox>
</template>
  1. For static customTypes variable of created LWC use this:
customCombobox : {
	template: customComboboxTemplate,
	editTemplate: customComboboxEditTemplate,
	typeAttributes: [ 'label', 'placeholder', 'options', 'value' ],
	standardCellLayout: true
}
  1. Create LWC that will use this LWC as datatable and add column with created custom type:
 {
	label: 'Custom Picklist',
	fieldName: 'picklistData',
	type: 'customCombobox',
	typeAttributes: {
		label: 'Custom Picklist',
		placeholder: 'Choose Value...',
		options: [ {
			{ label: 'Option 1', value: 'option1' },
			{ label: 'Option 2', value: 'option2' }
		}],
		value: { fieldName : 'picklistData' }
	},
	hideDefaultActions: true,
	editable : true
}

Expected Results

When you pass data to this custom lwc and clicks on edit button near "Custom Picklist" column value, then combobox appears with ability to choose between "Option 1" and "Option 2".

Actual Results

Combobox appears with no options to select

Version

SF Api version 60.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    External: Lightning ComponentsCategorizes issue or PR as related to Lightning base components.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions