4

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?

2 Answers 2

3

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

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 Commented Feb 24, 2023 at 14:32
  • wow thanks @Raul should have just tried it from the beginning Commented Feb 24, 2023 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.

You must log in to answer this question.

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