#Datatable0 discussing

I have the most recent version of the Flow Base Packs and the Datatable.  All experience cloud users are assigned a permission set group and the perm sets that are installed with these packages are included in that PSG.  Attached are some debug logs I ran on a user reporting the issue.  As well as some Chrome developer tool results.  I have no idea how to fix this.  The datable is not a fancy setup in the screen flow.  It just displays a list of contacts.  Prior to the screen I have the contacts sorted by 3 fields that are check box fields.  Any help would be appreciated. #Unofficial SF #Datatable #Flow #Automation @Eric Smith

# Solution: Making Row Action Dropdown Menu Extend Outside the Lightning Datatable 

## Problem 

When creating a custom datatable component using Lightning Web Components (LWC), I noticed that the row action dropdown menu (containing options like Edit, Delete, etc.) was confined within the table boundaries and wouldn't extend outside the table. This negatively impacted the user experience, especially with narrow tables. 

In standard Salesforce behavior, these dropdown menus extend outside the table and appear above other elements. However, this behavior wasn't occurring in my custom datatable component. 

## Root Cause 

The root cause of the issue was the `slds-table_fixed-layout` CSS class used in the datatable component. This class fixes the width of the table and controls the width of cells, but it also applies the `table-layout: fixed` CSS property. This property locks the table layout and prevents content from overflowing, which prevents the dropdown menu from extending outside the table. 

## Solution 

The solution is very simple: remove or replace the `slds-table_fixed-layout` class. 

```html 

<c-custom-datatable 

    key-field="Id" 

    data={itemsData} 

    columns={columns} 

    draft-values={draftValues} 

    onsave={handleSave} 

    onrowaction={handleRowAction} 

    class="slds-table_bordered" <!-- instead of slds-table_fixed-layout --> 

    hide-checkbox-column 

    wrap-text-max-lines="2" 

    wrap-table-header="all"> 

</c-custom-datatable> 

``` 

## Result 

This simple change allows the dropdown menu to extend outside the table and aligns with standard Salesforce behavior. I hope this solution helps other developers who encounter similar issues. 

Hello,

I have a lightning datatable where I have introduced a new custom type "customPicklist" for the column. Now when I declare the LeadSource column as customtype as editable and picklist field shows as editable and works fine. But for the type "text" for other columns, i.e Email it is not editable. I have attached screenshot at the end. Is there an issue in the code or the data table wont work as editable due to use of both standard and custom types ? Any guidance would help. Thanks!

myCustomTypeDataTable.js

import picklistColumn from './picklistColumn.html';

 static customTypes = {

        customPicklist: {

          template: picklistColumn,

          standardCellLayout: true,

          typeAttributes: ['label', 'placeholder', 'options', 'value']

        }

picklistColumn.html

<template>

    <lightning-combobox name="picklist" data-inputable="true" label={typeAttributes.label} value={typeAttributes.value} placeholder={typeAttributes.placeholder} options={typeAttributes.options} 

        dropdown-alignment="auto"></lightning-combobox>

</template>

•  In my main component, I  also have standard types along with the custom type to be used as editable field.

contactList.js 

const COLUMNS = [

    { label: 'First Name', fieldName: FIRSTNAME_FIELD.fieldApiName, type: 'text' },

    { label: 'Last Name', fieldName: LASTNAME_FIELD.fieldApiName, type: 'text' },

    { label: 'Email', fieldName: EMAIL_FIELD.fieldApiName, type: 'text', editable:true, wrapText:true },

    { label: 'LeadSource', fieldName: 'LeadSource', type: 'customPicklist', editable: true, wrapText:true, typeAttributes: {

            placeholder: 'Choose Type', options: [

                { label: 'Web', value: 'Web' },

                { label: 'Other', value: 'Other' },

            ], 

            value: { fieldName: 'LeadSource' } // default value for picklist,

        }

    }

];

contactList.html

 <c-my-custom-type-data-table

           key-field="Id"

           data={contacts.data}

           columns={columns}>

           </c-my-custom-type-data-table>

Additional Context

Since I am using the customtypes, I have to use the above tag instead of <lightning-datatable> . If I use the standard lightning datatable, the text type fields becomes editable as expected.

Component:

#Salesforce Developer  #Lightning Web Components  #Datatable  #Customer Type

[▶️]🔴🔥🎬 Use Flow Repeater Component To Collect Information And Create Records | #Salesforce Summer 24 Release Feature

Welcome, Trailblazers! With each new Salesforce release comes a wave of innovation, empowering businesses and admins to unlock new capabilities and enhance user experiences. Among the exciting features introduced in the Summer ’24 release is the groundbreaking Flow Repeater Component, designed to revolutionize the way users collect input and build lists of records seamlessly within Salesforce Flow.

In this blog post and video, I will delve into the intricacies of this game-changing feature, exploring how it simplifies the process of gathering user input to construct lists of records with unparalleled efficiency. In the video, I will be showing how to use the repeater component to collect user input and then create multiple contacts under the selected account. Also inside repeater component, I will be using conditional rendering to make the use case a little advance.

In next couple of days, I will be publishing videos covering some of the important release features/enhancements from Summer 24 Release.

🎬 https://www.youtube.com/watch?v=MJ05n2DTR6M

🖋️ https://bit.ly/3JDaQIn

@The Blog Group

#Flow #Summer24 #Datatable@* Release Readiness Trailblazers *