# 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.