0

I'm building a custom UI with datatable and want to align the Lightning:card and action button in same line. Following is the code and screemshot of how it aligns now. enter image description here

<lightning:card title = "Records" iconName = "custom:custom24" class="slds-table_bordered">
                <div class="slds-m-around_x-large">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                            <div class="slds-media__body">
                                <h3>
                                    <lightning:button class="slds-float_right slds-card__header-link slds-truncate" variant="neutral" label="Click Here!" iconName="utility:download" iconPosition="right"/>
                                    
                                </h3>
                            </div>
                        
                        
                    </header> 
                    <div >
                        <lightning:datatable data = "{! v.data }" 
                                             columns = "{! v.columns }" 
                                             keyField = "Id"
                                             maxRowSelection = "1"
                                             onrowselection = "{! c.onSelection }"
                                             />
                    </div>
                </div>
            </lightning:card>

I want align the button and lightning:card title in same line for this data table. Please guide

3

You'll want to set the actions attribute of the lightning:card to place an action in that spot

<lightning:card title = "Records" iconName = "custom:custom24" class="slds-table_bordered">
  <aura:set attribute="actions">
    <lightning:button variant="neutral" 
                      label="Click Here!" 
                      iconName="utility:download" 
                      iconPosition="right"/>
  </aura:set>
  <!-- rest of body of the card goes here --/>
</lightning:card>

https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example

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.