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

Blogs
02 Jul, 2025

How to Show Icons in View Cells Based on Field Values in D365 CE

Introduction: In Dynamics 365, adding icons to view cells based on field values can make the interface more user-friendly and…

READ MORE
Blogs
01 Jul, 2025

Getting Started with Microsoft Access: Key Features and How to Use Them - Part 1

Getting Started with Microsoft Access: Key Features and How to Use Them Microsoft Access is a versatile and approachable database…

READ MORE
Thumbnail Image of ROI
Blogs
17 Jun, 2025

Maximizing ROI with Power Apps: The Role of Expert Consulting Services

Maximizing ROI with Power Apps: The Role of Expert Consulting Services Explore how skilled professionals can get you the best…

READ MORE