function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
raghavendra kiran 9raghavendra kiran 9 

how to get this structure in lightning along with the list view.. this is for datatable which is replica of account page

User-added image
i have done coding for the datatable but getting the header section i.e All Accounts and DropDown of LIstViews,
i dont know how to do it...for the lignting component
Best Answer chosen by raghavendra kiran 9
raghavendra kiran 9raghavendra kiran 9
sorry for delay in reply,
DEEPAKSINGH what you said, it is in lengthy process done in another shortcut method...done by few lines of code...  :)
 

All Answers

Deepak_KumarDeepak_Kumar
Hi Raghavendra, 
Please Try this code for your design. 
<div class="slds-m-bottom_small slds-page-header">
    <lightning:layout horizontalAlign="spread">
        <lightning:layoutItem>
            <div class="slds-media">
                <div class="slds-media__figure">
                    <lightning:icon iconName="standard:account" size="medium" variant="slds-icon-inverse"></lightning:icon>
                </div>
                <div class="slds-media__body">
                    <div style="font-size: 0.8125rem;">Accounts</div>
                    <lightning:layout>
                        <lightning:layoutItem size="11">
                            <div class="slds-page-header__title slds-text-heading_small">Recently Viewed</div>
                        </lightning:layoutItem>
                        <lightning:layoutItem size="1">
                            <lightning:buttonMenu variant="bare" menuAlignment="right" iconName="utility:down" iconSize="large">
                                <lightning:menuItem label="All Accounts"></lightning:menuItem>
                                <lightning:menuItem label="Recent Accounts"></lightning:menuItem>
                                <lightning:menuItem label="new Last Week"></lightning:menuItem>
                                <lightning:menuItem label="Add More"></lightning:menuItem>
                            </lightning:buttonMenu>
                        </lightning:layoutItem>
                    </lightning:layout>
                </div>
                <div class="slds-media__figure slds-media__figure_reverse"></div>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout>
        <lightning:layoutItem size="7">
            <div style="font-size: 0.8125rem;">10 items •</div>
        </lightning:layoutItem>
        <lightning:layoutItem size="5">
            <lightning:layout>
                <lightning:layoutItem size="10">
                    <lightning:input label="Input label" placeholder="search this list" type="text" variant="label-hidden"></lightning:input>
                </lightning:layoutItem>
                <lightning:layoutItem size="2">
                    <lightning:buttonIcon alternativeText="" iconClass="" variant="bare" type="button" iconName="utility:settings" size="medium"></lightning:buttonIcon>
                    <lightning:buttonMenu variant="bare" menuAlignment="left" iconName="utility:down" iconSize="medium">
                        <lightning:menuItem label="Menu Item"></lightning:menuItem>
                        <lightning:menuItem label="Menu Item"></lightning:menuItem>
                    </lightning:buttonMenu>
                </lightning:layoutItem>
            </lightning:layout>
        </lightning:layoutItem>
    </lightning:layout>
</div>
<div>
    <div class="slds-align_absolute-center slds-text-heading_medium">Add your table here</div>
</div>

Please mark as solved and also best answer if it will solve yoy problem.

Thanks
Deepak.
raghavendra kiran 9raghavendra kiran 9
sorry for delay in reply,
DEEPAKSINGH what you said, it is in lengthy process done in another shortcut method...done by few lines of code...  :)
 
This was selected as the best answer