2

We have a requirement i.e Table scroll should be horizontal and vertical but when we scroll vertical, title should be Freeze

enter image description here.

I have achieved almost requirement but when i scroll vertically Table header is moving up.

Also tried with two tables, one is for Header and second is for body, but table alignments are not displaying properly.Even though two tables are having same width or measurement.

Attaching the image and Code.

Lighting component:-

<div class="panel">
        <div class="body_panel">
            <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-truncate">
                <thead class="header">
                    <tr class="slds-text-title_caps">
                        <th scope="col">
                            <div class="slds-truncate" title="{!$Label.c.Actions}">{!$Label.c.Actions}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="{!$Label.c.No_Label}">{!$Label.c.No_Label}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="{!$Label.c.Title}">{!$Label.c.Title}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="{!$Label.c.Flag}">{!$Label.c.Flag}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="{!$Label.c.Owner_label}">{!$Label.c.Owner_label}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="{!$Label.c.Last_Modified}">{!$Label.c.Last_Modified}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="{!$Label.c.Size}">{!$Label.c.Size}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="Article">Article</div>
                        </th>
                    </tr>
                </thead>
                <tbody class="body">
                    <aura:iteration items="{!v.Attachments}" var="item" indexVar="index">
                        <aura:if isTrue="{!item.display}">
                            <tr>
                                <td scope="row">
                                    <lightning:buttonmenu menualignment="right" title="{!item.ContentDocument.Title}"
                                        name="{!item.ContentDocument.LatestPublishedVersionId}"
                                        alternativetext="{!$Label.c.Settings}" onselect="{! c.handleMenuSelect }">
                                        <aura:if isTrue="{!item.isPreviewAvailable}">
                                            <lightning:menuitem aura:id="view" iconName="utility:preview"
                                                label="{!$Label.c.View}" value="view"
                                                title="{!$Label.c.View + ' ' +item.ContentDocument.Title}" />
                                        </aura:if>
                                        <lightning:menuitem aura:id="download" iconName="utility:download"
                                            label="{!$Label.c.Download}" value="download"
                                            title="{!$Label.c.Download+' ' +item.ContentDocument.Title}" />
                                        <lightning:menuitem aura:id="delete" iconName="utility:delete"
                                            label="{!$Label.c.Delete}" value="delete"
                                            title="{!$Label.c.Delete+' ' +item.ContentDocument.Title}" />
                                        <aura:if isTrue="{!and(item.ContentDocument.FileExtension=='csv',v.csvAccess)}">
                                            <!-- Start PUX-1803,1909 -->
                                            <aura:if
                                                isTrue="{!or(or(item.ContentDocument.Owner.Id == v.loggedUser, v.userProfile), v.Case.OwnerId == v.loggedUser)}">
                                                <!-- END PUX-1803,1909 -->
                                                <lightning:menuitem aura:id="Edit" iconName="utility:edit"
                                                    label="{!$Label.c.LABS_SF_Edit}" value="Edit"
                                                    title="{!$Label.c.LABS_SF_Edit+' ' +item.ContentDocument.Title}" />
                                            </aura:if>
                                        </aura:if>
                                    </lightning:buttonmenu>
                                </td>
                                <td scope="row">
                                    {!item.counter}
                                </td>
                                <td scope="row" id="{!item.ContentDocument.LatestPublishedVersionId}"
                                    data-value="{!item.ContentDocument.Title}" data-visible="{!item.isPreviewAvailable}"
                                    data-id="{!item.ContentDocument.Id}" class="hover-pointer"
                                    onclick="{!c.openAttachViewer}">
                                    <div class="slds-media">
                                        <div class="slds-media__figure">
                                            <span class="slds-icon_container" title="">
                                                <lightning:icon iconName="{!item.icon}" size="medium" />
                                            </span>
                                        </div>
                                        <div class="slds-media__body">
                                            <h1 class="slds-text-heading_small slds-truncate slds-align-middle">
                                                {!item.ContentDocument.Title}</h1>
                                        </div>
                                    </div>
                                </td>
                                <td scope="row">
                                    <div onclick="{!c.changeFlag}"
                                        data-value="{!item.ContentDocument.LatestPublishedVersionId}"
                                        data-flag="{!v.namespace==''?item.ContentDocument.LatestPublishedVersion.Flag__c : item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c}">
                                        <aura:if
                                            isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.Flag__c=='Flag',item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c=='Flag')}">
                                            <img class="icon-header" src="{!$Resource.Icon_img + '/icons/green.png'}"
                                                width="30" height="30" title="{!$Label.c.Flag}" />
                                        </aura:if>
                                        <aura:if
                                            isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.Flag__c=='Non Flag',item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c=='Non Flag')}">
                                            <img class="icon-header" src="{!$Resource.Icon_img + '/icons/orange.png'}"
                                                width="30" height="30" title="{!$Label.c.Non_Flag}" />
                                        </aura:if>
                                        <aura:if
                                            isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.Flag__c=='Archive',item.ContentDocument.LatestPublishedVersion.CoraPLM__Flag__c=='Archive')}">
                                            <img class="icon-header" src="{!$Resource.Icon_img + '/icons/red.png'}"
                                                width="30" height="30" title="{!$Label.c.Archive}" />
                                        </aura:if>
                                    </div>
                                </td>
                                <td scope="row">
                                    <ui:outputText value="{!item.ContentDocument.Owner.Name}" />
                                </td>
                                <td scope="row">
                                    <lightning:formattedDateTime value="{!item.ContentDocument.LastModifiedDate}"
                                        year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit"
                                        timeZone="{!$Locale.timezone}" />
                                </td>
                                <td scope="row">
                                    {!item.Size}
                                </td>
                                <td scope="row">
                                    <aura:if
                                        isTrue="{!if(v.namespace=='',item.ContentDocument.LatestPublishedVersion.KB_Article__c==true,item.ContentDocument.LatestPublishedVersion.CoraPLM__KB_Article__c==true)}">
                                        <div class="slds-form-element">
                                            <div class="slds-form-element__control">
                                                <div class="slds-checkbox">
                                                    <input type="checkbox" name="options" id="checkbox-44"
                                                        value="checkbox-44" checked="true" disabled="true" />
                                                    <label class="slds-checkbox__label" for="checkbox-44">
                                                        <span class="slds-checkbox_faux"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <aura:set attribute="else">
                                            <lightning:input type="checkbox" name="KBArticle" Checked="false"
                                                disabled="true" />
                                        </aura:set>
                                    </aura:if>
                                </td>
                            </tr>
                        </aura:if>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </div>

CSS File:-

 .THIS .slds-table_bordered {
   table-layout: unset;
   width: 100%;
   border-collapse: collapse;
 }

 .THIS .header th {
   border-left: 1px solid #d0d0d0;
   /*width: 200px;*/
   padding: 8px;
   border-bottom: 1px solid #d0d0d0;
   text-align: -webkit-center;
 }
 .THIS .body tr {
   border-bottom: 1px;
 }
 .THIS .panel {
   width: 100%;
   overflow-y: hidden;
 }
 .THIS .body_panel {
   display: inline-block;    
   height: 61vh;
   overflow-x: hidden;
 }

 .THIS .body td {
   border-left: 1px solid #d0d0d0;
   padding: 8px;
   /*width: 200px;*/
   text-align: -webkit-center;
 }
 .THIS ::-webkit-scrollbar {
     width: 6px;
     height:6px;
 }
2

Give this property to table body rather then panel class

style="overflow-y:scroll; height:100px;"

For more info follow this link Table scroll bar

1
  • Hi Shail, I have tried with your code still getting same issue. – Ragavendra Dec 5 '19 at 6:35

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.