[SalesForce] Lighting datatable doesn’t apply styling to 1st row in LWC

I have a lightning datatable in my LWC. I have applied column border styling to it, but it's not getting applied only to the 1st row. Rest all rows get the styling. I didn't find any explanation for it. Is this a salesforce bug?

column borders not displaying

HTML

<div class={flexipageRegionWidth}>
       <div class="slds-table_bordered slds-table_col-bordered slds-table_striped slds-scrollable" style="height: 20rem">
              <lightning-datatable key-field="Id" data={wrappers} columns={columns}
                        onrowaction={navigateToRecordViewPage} hide-checkbox-column="true">
              </lightning-datatable>
       </div>
</div>

JavaScript

const columns = [
    {
        label: 'Name',
        type: 'button',
        sortable: 'true',
        typeAttributes: {
            label: {fieldName: 'name'},
            variant: 'base',
        }
    },
    { label: 'Email', fieldName: 'email', type: 'email' },
    { label: 'Phone', fieldName: 'phone', type: 'phone'},
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' },
];

Best Answer

This seems to be a bug related to slds-table_col-bordered. In the lightning-datatable documentation, I could not find any example using this border to be honest.

I replicated the issue on this LWC Playground: https://developer.salesforce.com/docs/component-library/tools/playground/xQ4KLIxJh/27/edit

Related Topic