knowledgecenter-breadcrum

Knowledge Center

22 Jun, 2020

How to make header of DetailsList sticky?

Posted on 22 Jun, 2020 by Admin, Posted in Power Platform

How to make header of DetailsList sticky? Blogs

How to make header of DetailsList sticky?

Introduction

Like out of the box view, we also want custom header of DetailsList’s sticky so when we scroll down, we should able to see header throughout the list. In this blog, I have explained how to make header of DetailsList sticky by avoid problem during doing it.

Solution

To make detailed list’s header sticky so that it will be visible when we scroll down, we are going to use ScrollablePane tag. Add ScrollablePane tag over DetailsList tag. We also need onRenderDetailsHeader event.

Step by Step

  1. Add your DetailsList between ScrollablePane
  2. Add scrollbarVisibility property and set its value to ScrollbarVisibility.
    <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
  3. Add layoutMode property and set its value to fixedColumns.
  4. Now in DetailsList tag add onRenderDetailsHeader property and set its value to an event function named onRenderDetailsHeader.
  5. Now add onRenderDetailsHeader function definition. Add definition as following.
    1. Inherit IRenderFunction interface to the function where IDetailsHeaderProps define properties link headerProps, defaultRender where headerProps are header element provide by DetailsList and defaultRender is a function which renders the headerProps.
    2. The function should return tag element.
    3. Add stickyPosition property to tag add set its value to Header
    4. Now, add
      element and add defaultRender function by passing headerProps to it.
    5. Close
      tag and tag.
    6. The function will look as follows:
    7.  

    8. const onRenderDetailsHeader: IRenderFunction = (headerProps, defaultRender) =>
      {
      return
      (
      {defaultRender!(headerProps)}


      );
      };

 

  1. To support these functions, we need to import declaration in react component as following :
  2.  
  3. import * as React from ‘react’;
    import
    {
    DetailsList,DetailsListLayoutMode,
    IColumn,
    ConstrainMode,
    IDetailsHeaderProps
    } from ‘office-ui-fabric-react/lib/DetailsList’;
    import { Fabric } from ‘office-ui-fabric-react/lib/Fabric’;
    import {ScrollablePane, ScrollbarVisibility, StickyPositionType, Sticky, IRenderFunction} from ‘office-ui-fabric-react’;
  4.  
  5.  
  1. All above steps will do our work done. But while doing it we may face following problems:
      1. The Header will hide other stuff which will show over it like as follows:
      2.  
      3.  
      4.  
      1. The Header will hide other stuff which will show over it like as follows:
      2.  
      3.  
      4.  
  1. To Solve these problems, we just need to add a tag over ScrollablePane tag and apply style to solve problem a : “zIndex: 0” and problem b: “position: ‘relative’”.
  2. Finally, the DetailsList component will look as follows:
  3.  



  4. items={items}columns={columns}layoutMode={DetailsListLayoutMode.fixedColumns}
    onRenderDetailsHeader={onRenderDetailsHeader}
    isHeaderVisible={true}
    />

     

Comment

This is a Required Field

Loading

Recent Updates

Thumbnail_top 10 benefits of
Blogs
02 Dec, 2024

Top 10 Benefits of Microsoft Dynamics 365

This blog lists the advantages of Microsoft Dynamics 365, focusing on how it can improve your business operations.    …

READ MORE
Thumbnail_Microsoft365 Vs D365
Blogs
12 Nov, 2024

Microsoft 365 vs Dynamics 365

This blog will help you understand the key difference between Microsoft 365 and Dynamics 365, so you can make an…

READ MORE
Thumbnail_What is Microsoft Dynamics 365
Blogs
05 Nov, 2024

What is Microsoft Dynamics 365?

This blog explores Microsoft Dynamics 365, a cloud solution for handling different business activities smoothly. The rising trends of competition…

READ MORE