5

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' },
];
  • @PranayJaiswal text overflow is not the issue. I updated image in question. Please check. Thanks! – Koustubh Nov 15 at 8:31
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.