Any way to introduce a separator into lightning:datatable row actions?

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


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

Source : Link , Question Author : Keith C , Answer Author : Paul

Leave a Comment