Dataset PCF using FluentUI: Full Height (100%)

This is a part of my blog “My Checklist for a Dataset PCF using FluentUI“. We saw in the other blog, how to handle the height of a subgrid. But there are a few cases when the height of the grid is defined or we need to fill the whole place available (css 100%). That is the case for:

• SiteMap (Home Grid)
• Subgrid in Zoom mode (full size)
• Grid on the Dashboard
• Canvas Apps

Since in that case the height of the PCF is defined by the platform runtime, we can work with CSS. I also use the “Stack” which is an abstraction of the flexbox in FluentUI, but basically DIVs would do too. That’s my main structure:

And these are the classes

.ORBIS\.ColorfulOptionsetGrid  .container{
    width: 100%;
    position: relative;
    min-height: 200px ;  
}
.ORBIS\.ColorfulOptionsetGrid  .gridContainer{
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
}

In CSS I work with 100% height, and also set “min-height:200px” which stops my grid getting too small; the header, footer and at least 1-2 rows should be visible.

The problem left is to teach the FluentUI DetailsList to have the header always on the top and the footer always on the bottom. The default DetailsList doesn’t work that way:

Scrollable content

In the documentation there is an example of such a DetailsList, but it’s a little hidden. The answer is “ScrollablePane“:

 ScrollablePane is a helper component that’s used with the Sticky component.

It will “stick” to the top or bottom of the scrollable region and remain visible.

In the documentation is stated that the parent should have an “position:relative” that’s why I’ve added that to my “gridContainer” CSS class.

Sticky header

In the ScrolablePane documentation, can also be found an example of DetailsList with Sticky-Header. For that we need to define the DetailsList renderer for the header:

   <DetailsList                                            
        onRenderDetailsHeader={_onRenderDetailsHeader}
         ....
   </DetailsList>

Interesting is how to use the “defaultRenderer“, since I don’t want to create my own content of the header. Magic!

The “onColumnHeaderClick” looks like this:

while the “onColumnClick” is a part of my custom Hook “useColumns”

On click on the header we need to sort the data; this customHook I have already shown in my blog blog about sorting.

Keep the footer to the bottom

The DetailsList has the possibility to define also the renderer for the footer, similar to the renderer for the header. But then I’ve realized that the footer is not staying to the bottom:

That’s why I didn’t used this. I’ve just added another div (Stack) below my DetailsList, and there I call my component for the footer: GridFooter.

The GridFooter component is taking care of paging. I’ll write about that in the next blog post.