I am trying to implement a new lightning data table LWC, and I want to add a few picklist custom data types to some of the table cells. The picklists render correctly. However, the dropdown menu for each picklist is hidden behind the table row. How would I change the style for the picklist data type component so that the dropdown menu is visible? I have attached a screenshot of the current state of the picklist in the table cell for reference.
When I ran into this - I noticed that the lightning-datatable wraps the custom data type component with a div that has a class of slds-truncate as it defaults to clip text behavior which will only allow one line
Text clipping truncates the content to a single line within the column.
This prevents the drop-down from appearing and you can test this by inspecting the element and removing it in chrome dev tools.
You can set that column to wrap text to avoid the issue by passing in for wrapText: true
{ label: 'Name',
fieldName: 'Name',
type: 'yourType',
wrapText: true
}
