I am trying to display data nicely inside a component that is place in the left section of the page record, however i am really struggling with the following issues:

  1. For some reason all of the fields despite each one to be in their one table cell like on my code below, they get put into the first cell of the table
  2. I want the table to be the same width of the component? will this be possible? I understand that there might be a bit of too much data, but will the component automatically add a horizontal scroller?

enter image description here

This is the current code

        <lightning:card title="Customer History" class="slds-has-divider_bottom-space">
        <table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal">
                <tr class="slds-text-title_caps">
                        Date Closed
                        Sub Status
                        Special Notes
                <aura:iteration items="{!v.oppLST}" var="item">
                    <lightning:recordViewForm aura:id="viewForm" recordId="{!item.Id}" objectApiName="Opportunity">
                                <lightning:outputField fieldName="CloseDate"/>
                                <lightning:outputField fieldName="StageName"/>
                                <lightning:outputField fieldName="Sub_Status__c"/>
                                <lightning:outputField fieldName="Special_Notes__c"/>
                                <a onclick="{!c.navToRecord}" data-recid="{!item.Id}">


Like the first suggestion i have added a datatable instead:

            data="{! v.oppLST }"
            columns="{! v.columns }"

This improve the displayed however, everything is quite squich and i dont have the horizontal scroller, is there a way to set it up from the beginning scroller = true or something like that?

And how could i make 1 of the fields of the table clickable to open a modal?

enter image description here

  • Why are you not just using lightning:datatable for such a simple data table? – tsalb Jul 11 '18 at 3:34
  • @tsalb perhaps was my lack of knowledge of that option, I have ammend/edit my question as I still have a display not irregularity but not totally happy with the result, also the table give me an easy way to make a field clickable, not sure how i will go with that option in datatable – manza Jul 11 '18 at 5:16
  • The documentation in the component library shows you how to set default widths. You can't open a modal from a link click right now, but you can add an action or an in-cell button to do that. – tsalb Jul 11 '18 at 5:20
  • @tsalb thank you, perhaps I am looking at the wrong documentation as the one that I found is lacking those details, would you mind sharing yours? this is mine, developer.salesforce.com/docs/component-library/bundle/… i also understand that click does not open the modal, my question goes on how would you modify the component controller to do that? I will modify my answer with what i have tried shortly – manza Jul 11 '18 at 5:22

Initial width

When width of lightning:datatable columns exceed a container like this, you will auto-get scrolling on the x-axis.

<div style="width: 300px">

To set the initialWidth attribute, you do this during your column setup.

let columns = [
    label: "Some Column",
    fieldName: "Some_Column__c",
    type: "text",
    cellAttributes: {
      alignment: "left"
    initialWidth: 80

Opening a modal from datatable

You can't open a modal with lightning:datatable right now using a link. If you check the following section (no anchor tags sadly) in the specification here

Formatting with Data Types

You'll see that there's only action, button, or url which have any interactivity right now. You can nest your modal pop inside an action which is more in-line with SLDS. If you need to pop a modal on link click, then you are stuck rolling your own component from the blueprints here.

FYI: you can also decide to display a button with no label and just an icon, if it's apparent that a modal should be launched from that. Then you don't need a down-arrow action button.

| improve this answer | |

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.