6

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

Improve this question
1
  • 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

Reset to default
3

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

Improve this answer
1
  • 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 .