In SLDS there is a slds-has-divider_top-space style that allows a separator to be displayed between groups of actions:

SLDS menu

and this class can be specified in e.g. a lightning:menuItem.

Is there any way to achieve a similar effect for the row actions of lightning:datatable that are setup via JavaScript i.e. to break up menus like this one:

lightning:datatable menu

  • 1
    There is no way to do it this way, I checked myself trying to achieve this by passing the class attribute to the action, but it was never added. The only way you could do it is probably just have a fixed CSS style bases on the list element and then add the border and padding.
    – Paul
    Jun 21, 2018 at 9:14

1 Answer 1


@Keith C I didn't provide a solution but here is a fixed CSS example:

For the data table add a class:

lightning:datatable class="action-test"

Now in the Style section of the component add this CSS, in my case I want separator before 2nd element(CSS is copied from lightning design to match the same style):

.THIS .action-test .slds-dropdown :nth-child(2):before {    
    content: "";
    border-top: 1px solid #dddbda;
    margin-top: .5rem;
    padding-top: .5rem;
    display: block;}

The output looks like this:

enter image description here

The downside is, having this fixed after specific element, you can also make CSS selector to find an option by name and then add separator.

  • That's further than I got. Thanks for posting, though yes being so hard coded it is problematic.
    – Keith C
    Jun 21, 2018 at 14:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .