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

Email Storage Made Easy: Dynamics 365 Space Saving Tips
Blogs
29 Feb, 2024

Email Storage Made Easy: Dynamics 365 Storage Saving Tips

Email Storage Made Easy: Dynamics 365 Storage Saving Tips Introduction Microsoft's latest feature allows you to migrate email descriptions from CRM…

READ MORE
Blogs
28 Feb, 2024

How to enable the enhanced email template editor in Dynamics 365?

How to enable the enhanced email template editor in Dynamics 365? To activate the Enhanced Email Template editor for your…

READ MORE
RCA for ARC Migration Issue
Blogs
28 Feb, 2024

Troubleshooting Convert Rules Import Issue: Entity 'workflow' with ID Does Not Exist error in D365

Troubleshooting Convert Rules Import Issue: Entity 'workflow' with ID Does Not Exist error in D365 Problem Statement We implemented D365 Customer…

READ MORE