Action Menu Getting Partially Cut Off

Question

As seen in the two images above, I have an LWC DataTable with row actions that are being partially cut off (both upward and downward). I have tried the following:

Ligntning datatables actions menu hidden

And the 5 other identical (Stack and SuccessSF) posts that say the same thing, but nothing changes the behavior. My grid lives inside of a Modal, with one other grid (if that makes a difference). How do I make the row actions show up on top of the grid, instead of underneith the columns and only within the boundaries of the grid?

Answer 1

I had this issue with the lightning-datatable action column and found that setting the menuAlignment to auto fixed it for me. So, try that inside where you are declaring your column for the actions.

{
  type: 'action', 
  typeAttributes: {
    rowActions: [{...}],
    menuAlignment: 'auto'
  }
}