Apex Code Development You need to sign in to do that
Don't have an account?
anil kumar devunoori Scrollbar on Lightning Datatable and Lightning Tree and containing DIV height
I am working on a requirement to develop a lightning component to display
Actual Issue: How to display scrollbar on lightning tree/table on devices responsive to device size.
More details below:
I am not sure what is best practice to display Scrollbar when more records need to be displayed in tree and table.
Somehow I am able to display scrollbar but it seems wont work on all screen sizes. I have placed tree and table inside div with specific height
Component code
Only Tree and Table tags code snippet from above code:
Can you please help on below issues:
If I don't mention height in div, the table is not displaying all records. I have commented div tags with height: The tree and table are displayed as below. No scrollbar and no way to see all records in tree and table
If I mention more height than the height of screen, I can see scrollbar but, it is not showing the records at end of the scroll as it is outside of maximum height of screen. see the image below
I need clarifications on below queries as well:
what is the best way to display lightning table and lightning tree in lightning components so that it works well on all screens
How can I display lightning tree/table whole height on screen. Assuming that tree/table has 1000 items/rows, and show 1000 items/rows one time. without scroll bar, but page with height equla or more than tree/table height. I guess this is one of method to make it work on all devices. In my requirement, I dont expect elements more than 1000.
One more point, I have added this lightning component to Lightning App Page.
- objects list as lightning:tree in left pane and
- fields list as lightning:table in right pane as shown in below image
Actual Issue: How to display scrollbar on lightning tree/table on devices responsive to device size.
More details below:
I am not sure what is best practice to display Scrollbar when more records need to be displayed in tree and table.
Somehow I am able to display scrollbar but it seems wont work on all screen sizes. I have placed tree and table inside div with specific height
Component code
<ltng:require styles="{!$Resource.HideAppPageHeader}"/> <!--Declare Attributes--> <!--Objects Available Table --> <aura:attribute name="objList" type="Object[]"/> <aura:attribute name="filteredObjList" type="Object[]"/> <aura:attribute name="mycolumns" type="List"/> <aura:attribute name="treeItems" type="Object[]" /> <aura:attribute name="filteredTreeItems" type="Object[]" /> <aura:attribute name="searchText" type="string" default=""/> <aura:attribute name="objectTypes" type="String[]" default="['Custom', 'Standard', 'Both']" /> <aura:attribute name="objTypeValue" type="String" default="Both"/> <aura:attribute name="selectionTypes" type="String[]" default="['Selected', 'Not Selected', 'All']" /> <aura:attribute name="selTypeValue" type="String" default="All"/> <aura:attribute name="fields" access="public" type="Object[]"/> <aura:attribute name="filteredFields" access="public" type="Object[]"/> <aura:attribute name="fieldColumns" type="List"/> <aura:attribute name="selectedFields" type="List"/> <!--Declare Handler--> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <div class="slds-grid slds-gutters_direct-xxx-small slds-scrollable--x slds-scrollable--y"> <div class="slds-col slds-size_1-of-5" style="background-color:white;"> <div class="slds-p-around_xxx-small"> <ui:inputText aura:id="textinput" keyup="{!c.searchOnKeyUp}" updateOn="keyup" value="{!v.searchText}" placeholder="Search" /> </div> <fieldset class="slds-form-element slds-p-around_xxx-small"> <div class="customRadioCls"> <aura:iteration items="{!v.objectTypes}" var="item"> <span class="slds-radio"> <input type="radio" id="{!item}" name="objradiogroup" onchange="{!c.handleObjTypeRG}" value="{!item}" checked="{!(v.objTypeValue==item)?'checked':''}"/> <label class="slds-radio__label" for="{!item}"> <span class="slds-radio_faux"></span> <span class="slds-form-element__label">{!item}</span> </label> </span> </aura:iteration> </div> </fieldset> <fieldset class="slds-form-element slds-p-around_xxx-small"> <div class="customRadioCls"> <aura:iteration items="{!v.selectionTypes}" var="item1"> <span class="slds-radio"> <input type="radio" id="{!item1}" name="selradiogroup" onchange="{!c.handleSelTypeRG}" value="{!item1}" checked="{!(v.selTypeValue==item1)?'checked':''}"/> <label class="slds-radio__label" for="{!item1}"> <span class="slds-radio_faux"></span> <span class="slds-form-element__label">{!item1}</span> </label> </span> </aura:iteration> </div> </fieldset> **<div style="height: 400px;overflow: auto;">** <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> </div> </div> <div class="slds-col slds-size_4-of-5"> **<div style="height: 500px;overflow: auto;">** <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> </div> </div> </div>
Only Tree and Table tags code snippet from above code:
</fieldset> <div style="height: 400px;overflow: auto;"> <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> </div> </div> <div class="slds-col slds-size_4-of-5"> <div style="height: 500px;overflow: auto;"> <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> </div>
Can you please help on below issues:
If I don't mention height in div, the table is not displaying all records. I have commented div tags with height: The tree and table are displayed as below. No scrollbar and no way to see all records in tree and table
<!-- <div style="height: 400px;overflow: auto;"> --> <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> <!-- </div> --> </div> <div class="slds-col slds-size_4-of-5"> <!-- <div style="height: 500px;overflow: auto;"> --> <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> <!-- </div> -->
If I mention more height than the height of screen, I can see scrollbar but, it is not showing the records at end of the scroll as it is outside of maximum height of screen. see the image below
<div style="height: 500px;overflow: auto;"> <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> </div> </div> <div class="slds-col slds-size_4-of-5"> <div style="height: 700px;overflow: auto;"> <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> </div>
I need clarifications on below queries as well:
what is the best way to display lightning table and lightning tree in lightning components so that it works well on all screens
How can I display lightning tree/table whole height on screen. Assuming that tree/table has 1000 items/rows, and show 1000 items/rows one time. without scroll bar, but page with height equla or more than tree/table height. I guess this is one of method to make it work on all devices. In my requirement, I dont expect elements more than 1000.
One more point, I have added this lightning component to Lightning App Page.
Whole Code:
<!--Sample.cmp--> <aura:component controller="FetchObjectFieldSelectController" implements="flexipage:availableForAllPageTypes,force:appHostable"> <ltng:require styles="{!$Resource.HideAppPageHeader}"/> <!--Declare Attributes--> <!--Objects Available Table --> <aura:attribute name="objList" type="Object[]"/> <aura:attribute name="filteredObjList" type="Object[]"/> <aura:attribute name="mycolumns" type="List"/> <aura:attribute name="treeItems" type="Object[]" /> <aura:attribute name="filteredTreeItems" type="Object[]" /> <aura:attribute name="searchText" type="string" default=""/> <aura:attribute name="objectTypes" type="String[]" default="['Custom', 'Standard', 'Both']" /> <aura:attribute name="objTypeValue" type="String" default="Both"/> <aura:attribute name="selectionTypes" type="String[]" default="['Selected', 'Not Selected', 'All']" /> <aura:attribute name="selTypeValue" type="String" default="All"/> <aura:attribute name="fields" access="public" type="Object[]"/> <aura:attribute name="filteredFields" access="public" type="Object[]"/> <aura:attribute name="fieldColumns" type="List"/> <aura:attribute name="selectedFields" type="List"/> <!--Declare Handler--> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <div class="slds-grid slds-gutters_direct-xxx-small slds-scrollable--x slds-scrollable--y"> <div class="slds-col slds-size_1-of-5" style="background-color:white;"> <div class="slds-p-around_xxx-small"> <ui:inputText aura:id="textinput" keyup="{!c.searchOnKeyUp}" updateOn="keyup" value="{!v.searchText}" placeholder="Search" /> </div> <fieldset class="slds-form-element slds-p-around_xxx-small"> <div class="customRadioCls"> <aura:iteration items="{!v.objectTypes}" var="item"> <span class="slds-radio"> <input type="radio" id="{!item}" name="objradiogroup" onchange="{!c.handleObjTypeRG}" value="{!item}" checked="{!(v.objTypeValue==item)?'checked':''}"/> <label class="slds-radio__label" for="{!item}"> <span class="slds-radio_faux"></span> <span class="slds-form-element__label">{!item}</span> </label> </span> </aura:iteration> </div> </fieldset> <fieldset class="slds-form-element slds-p-around_xxx-small"> <div class="customRadioCls"> <aura:iteration items="{!v.selectionTypes}" var="item1"> <span class="slds-radio"> <input type="radio" id="{!item1}" name="selradiogroup" onchange="{!c.handleSelTypeRG}" value="{!item1}" checked="{!(v.selTypeValue==item1)?'checked':''}"/> <label class="slds-radio__label" for="{!item1}"> <span class="slds-radio_faux"></span> <span class="slds-form-element__label">{!item1}</span> </label> </span> </aura:iteration> </div> </fieldset> <!-- <div style="height: 500px;overflow: auto;"> --> <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> <!-- </div> --> </div> <div class="slds-col slds-size_4-of-5"> <!-- <div style="height: 700px;overflow: auto;"> --> <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> <!-- </div> --> </div> </div> </aura:component>Only table/tree code:
<div style="height: 400px;overflow: auto;"> <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> </div> </div> <div class="slds-col slds-size_4-of-5"> <div style="height: 500px;overflow: auto;"> <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> </div>commented divs with height:
<!-- <div style="height: 400px;overflow: auto;"> --> <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> <!-- </div> --> </div> <div class="slds-col slds-size_4-of-5"> <!-- <div style="height: 500px;overflow: auto;"> --> <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> <!-- </div> --> </div>Specified more height than device height
</fieldset> <div style="height: 600px;overflow: auto;"> <!-- <div class="slds-scrollable slds-p-around_xxx-small" style="height: 430px; background-color:white ;"> --> <lightning:tree items="{! v.filteredTreeItems }" onselect="{!c.handleObjectSelect}"/> <!-- </div> --> </div> </div> <div class="slds-col slds-size_4-of-5"> <div style="height: 700px;overflow: auto;"> <!--<div class="slds-scrollable" style="height: 500px; background-color:white ;">--> <lightning:datatable data="{!v.filteredFields}" columns="{!v.fieldColumns}" keyField="value" selectedRows="{!v.selectedFields}"/> <!-- </div> --> </div> </div>