Is there any good way with FluentUI to have sticky column headers on Detail List?

Question

My goal is to display my details list with Sticky Headers on scroll, and I've run into issues with every solution I've found.

The recommended solution of a ScrollablePane wrapping the list, and onRenderDetailsHeader with Sticky components (https://github.com/microsoft/fluentui/issues/1146) places the list on an absolute position on the UI.

The recommended solution of styling on FluentUI's site (https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane) requires a specified height to be provided.

Both of these solutions require set positioning for the list whether in height or margin in order to work as expected. But, I also need to account for error message bars that may appear above the table and ensure they are not covered, or a double scroll bar appears. Anyone have a seamless example they've used?

Please provide enough code so others can better understand or reproduce the problem. — Community, Aug 31 '22 at 01:24

score 0 · Answer 1 · answered Aug 30 '22 at 18:44

There is no good way to do this with FluentUI. The recommended solution of a ScrollablePane wrapping the list, and onRenderDetailsHeader with Sticky components (https://github.com/microsoft/fluentui/issues/1146) places the list on an absolute position on the UI. The recommended solution of styling on FluentUI's site (https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane) requires a specified height to be provided. Both of these solutions require set positioning for the list whether in height or margin in order to work as expected. But, I also need to account for error message bars that may appear above the table and ensure they are not covered, or a double scroll bar appears. Anyone have a seamless example they've used?

score 0 · Answer 2 · answered Feb 23 '23 at 22:17

Here you go...

For sticky first column (horizontal):

.ms-DetailsHeader-cell:first-child {
  position: sticky;
  inset: 0;
  background-color: white;
  z-index: 2;
}

.ms-DetailsRow-cell:first-child {
  position: sticky;
  inset: 0;
  background-color: white;
  z-index: 1;
}

For sticky column header (vertical):

const scrollClass = mergeStyleSets({
    detailsListWrapper: {
        height: '320px',
        width: '100%',
        position: 'relative'
    },
});



<Stack horizontal className={scrollClass.detailsListWrapper}>
    <Stack.Item>
        <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto} >
            <Shimmer customElementsGroup={getShimmerData(4)} width="300" height="400" isDataLoaded={!dataLoading}>
                <DetailsList
                    items={entities}
                    compact={isCompactMode}
                    columns={columns}
                    selectionMode={SelectionMode.single}
                    getKey={this._getKey}
                    setKey="single"
                    layoutMode={DetailsListLayoutMode.justified}
                    constrainMode={ConstrainMode.unconstrained}
                    isHeaderVisible={true}
                    selection={this._selection}
                    selectionPreservedOnEmptyClick={true}
                    onItemInvoked={this._onItemInvoked}
                    enterModalSelectionOnTouch={true}
                    ariaLabelForSelectionColumn="Toggle selection"
                    ariaLabelForSelectAllCheckbox="Toggle selection for all items"
                    checkButtonAriaLabel="select row"
                    onRenderDetailsHeader={this._renderFixedDetailsHeader}
                    styles={{ contentWrapper: { cursor: "pointer", width: '100%' } }}
                />
            </Shimmer>
        </ScrollablePane>
    </Stack.Item>
</Stack >



private _renderFixedDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
    if (!props) {
        return null;
    }
    const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> =
        tooltipHostProps => (
            <TooltipHost {...tooltipHostProps} />
        );
    return (
        <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
            {defaultRender!({
                ...props,
                onRenderColumnHeaderTooltip,
            })}
        </Sticky>
    );
}

Is there any good way with FluentUI to have sticky column headers on Detail List?

2 Answers2