I'm developing a lightning component which displays some records. Initially, I have put a <lightning:datatable> inside a <lightning:card> but the table is not showing as I expected: it displays a scroll bar at the bottom as if the columns were too wide.

To solve it, I tried to define the initialWidth attribute of the columns, and it did solve it, but to a fixed width, like 50px or 100px, which is not what I want because it stops being responsive.

How can I configure the card/datatable in order to show my data with a responsive design but at the same time without scrollbars?

This is the component:

<aura:component description="PotentialDuplicates" controller="PotentialDuplicatesController" implements="flexipage:availableForAllPageTypes,force:hasRecordId">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <lightning:card title="Potential Duplicates" iconName="standard:contact">
        <lightning:datatable data="{!v.mydata}" columns="{!v.mycolumns}" keyField="Id" hideCheckboxColumn="true"/>

This is the controller:

   init: function (cmp, event, helper) {
        cmp.set('v.mycolumns', [
                {label: 'Contact Name', fieldName: 'Name', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'phone'},
                {label: 'Email', fieldName: 'Email', type: 'email'}


This is how it renders:


And if I place it somewhere else:

Picture 2


I didn't face this issue rendering it on Chrome. I suggest you applying a padding on your lightning card (class="slds-p-around_medium"). I believe it will fix this issue. You can use different sizes by checking the following link: https://www.lightningdesignsystem.com/utilities/padding/

<lightning:card title="Potential Duplicates" iconName="standard:contact" class="slds-p-around_medium" >
    <lightning:datatable data="{!v.mydata}" columns="{!v.mycolumns}" keyField="Id" hideCheckboxColumn="true"/>

**enter image description here**

  • It's still displaying with the bar on my instance of Firefox AND Chrome. I'm starting to think it might have to do with the flexipage layout... – Javier García Manzano Mar 15 '18 at 9:54
  • Nevermind. I tried placing it elsewhere, and still. I think I'm missing something... – Javier García Manzano Mar 15 '18 at 9:57

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.