3

I am trying to use the base lightning-datatable component. However, I do not see a way to implement the slds-table_striped CSS class as outlined in the Lighting Design System component blueprint (https://www.lightningdesignsystem.com/components/data-tables/#Striped-rows).

Is the only way to implement this is to re-create the datatable from scratch?

Improve this question

2 Answers 2

Reset to default
2

You can SLDS striped row class to datatable base component:

<lightning-datatable
    key-field="id"
    data={accounts}
    columns={columns}
    class="slds-table_striped"
>
</lightning-datatable>

Output:

enter image description here

Only problem is with odd row, when selected they will have same color as unselected even rows: enter image description here

Improve this answer
2
  • 1
    Ah interesting, I would have thought the CSS class would have only been applied to the outer LWC component in the raw HTML <lightning-datatable class="slds-table_striped"> and not to the actual HTML <table> element that needs the class
    – Bryan Anderson
    Feb 24 at 14:32
  • wow thanks @Raul should have just tried it from the beginning
    – Bryan Anderson
    Feb 24 at 14:36
0

Unfortunately looks like you're out of luck. There are no documented attributes that would enable the striping so it'll only be available if you rebuild the component using the slds base component.

Improve this answer

You must log in to answer this question.

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