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<IDetailsHeaderProps> 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 <Sticky> tag element.
   3. Add stickyPosition property to <Sticky> tag add set its value to Header
   4. Now, add <div> element and add defaultRender function by passing headerProps to it.
   5. Close <div> tag and <Sticky> tag.
   6. The function will look as follows:
   8. 
      const onRenderDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (headerProps, defaultRender) =>
      {
      return
      (
      <Sticky stickyPosition={StickyPositionType.Header}   stickyBackgroundColor=”transparent”> <div>{defaultRender!(headerProps)}</div>
      </Sticky>
      );
      };

 

6. To support these functions, we need to import declaration in react component as following :
8. 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’;

7. All above steps will do our work done. But while doing it we may face following problems:
   1. 1. The Header will hide other stuff which will show over it like as follows:
      2. The Header will hide other stuff which will show over it like as follows:

8. 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’”.
9. Finally, the DetailsList component will look as follows:
11. <div style={{ position: ‘relative’, zIndex: 0 }}>
    <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
    <DetailsList
    items={items}columns={columns}layoutMode={DetailsListLayoutMode.fixedColumns}
    onRenderDetailsHeader={onRenderDetailsHeader}
    isHeaderVisible={true}
    />
    </ScrollablePane>
    </div>