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
shalini sharma 24shalini sharma 24 

freezing the header in lightning:listview

Hi all.

I have a lightning component where i am using lightning:listview. Below is the code.

I want to fix the header of the listview. How can i achieve this?

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >     
    <lightning:listView aura:id="listViewAccounts"
    objectApiName="object__c"
    listName="Default"
    rows="20"
    showActionBar="true"
    enableInlineEdit="false"
    showRowLevelActions="true"
/>        
</aura:component>

Thanks
Best Answer chosen by shalini sharma 24
sachin kadian 5sachin kadian 5
you may use something like this is styles
  
.THIS table thead{
        position: fixed;
    top: 12rem;
    z-index: 1000;
}

 

All Answers

sachin kadian 5sachin kadian 5
Hi,

I dont see any standard thing to fix the header but i think using CSS you can do it.

i just tried and its working . just need to fix a little more css.
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >     
    <ltng:require 
    styles="{!$Resource.testCss}" />    
    <lightning:listView aura:id="listViewAccounts"
                            objectApiName="Account"
                            listName="Test"
                            rows="20"
                            showActionBar="true"
                            enableInlineEdit="false"
                            showRowLevelActions="true"
                            />        
    </aura:component>

testCss static resource-
  
.slds-page-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

​
shalini sharma 24shalini sharma 24
Hi Sachin,

Thanks for reply
It doesn't seem to be working for me. My header i.e. column names are still not freezed. See below screenshots.User-added imageUser-added imageUser-added imageUser-added image
 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >     
    <ltng:require
 styles="{!$Resource.testCss}" />  
    
     <lightning:listView aura:id="listViewAccounts"
    objectApiName="Account" 
    listName="Default"
    rows="20"
    showActionBar="true"
    enableInlineEdit="false"
    showRowLevelActions="true"
  />  
</aura:component>
sachin kadian 5sachin kadian 5
This is working for me . 

i removed stylesheet and put styles in component.style
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >     
    
    <div class="test">
        <lightning:listView aura:id="listViewAccounts"
                            objectApiName="Account"
                            listName="Test"
                            rows="20"
                            showActionBar="true"
                            enableInlineEdit="false"
                            showRowLevelActions="true" 
                            
                            />      
    </div>
    
</aura:component>

Styles -
  
.THIS.test .slds-page-header{
    position: fixed;
    top: 5rem;
    left: 0;
    width: 100%;
    z-index: 1000;
    margin:.75rem;
}    

.THIS.test .listDisplays{
    margin-top:6rem;
}

User-added image

User-added image
shalini sharma 24shalini sharma 24
Hi Sachin,

Thank you for folloeing up with my query.

​I have got the header fixed. But still the column Names such as Account Name, Account Site are not yet freezed. I have been changing the css but nothing works out. You have any idea?

Thanks
sachin kadian 5sachin kadian 5
you may use something like this is styles
  
.THIS table thead{
        position: fixed;
    top: 12rem;
    z-index: 1000;
}

 
This was selected as the best answer
shalini sharma 24shalini sharma 24
Thanks Sachin.. I am able to freeze the column names