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

Answer

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

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

Leave a Comment