ScrollablePane with DetailsList cannot scroll fixed header issue

Question

I am using fluent UI details list. I tried to scroll my headers with scrollbar. But My headers are not scrolling when I scrolls horizontally. This is my code. I found this from an example. But nothing change from this. If anyone have idea about this issue please help.

     <div style={{position: "relative",Height:400>
      onScroll = {handleScroll}
        <ScrollablePane
          scrollbarVisibility={ScrollbarVisibility.auto}
        >
          <DetailsList
            items={tableItems}
            compact={false}
            columns={tableColumns}
            selectionMode={SelectionMode.multiple}
            getKey={getKey}
            layoutMode={DetailsListLayoutMode.justified}
            isHeaderVisible={true}
            selection={selection}
            selectionPreservedOnEmptyClick={true}
            enterModalSelectionOnTouch={true}
            visibility="false"
            onRenderDetailsHeader={(headerProps, defaultRender) => {
              return (
                <Sticky
                  stickyPosition={StickyPositionType.Header}
                  isScrollSynced={true}
                  stickyBackgroundColor="transparent"
                >
                  {defaultRender({
                    ...headerProps,
                    styles: {
                      root: {
                        selectors: {
                          ".ms-DetailsHeader-cellName": {
                            fontWeight: "bold",
                            fontSize: 13,
                          },
                        },
                        background: "#f5f5f5",
                        borderBottom: "1px solid #ddd",
                        paddingTop: 1,
                      },
                    },
                  })}
                </Sticky>
              );
            }}
          />
        </ScrollablePane>
      </div>     


    function handleScroll(event) {
    let element = document.querySelector("[class*='stickyAbove-']");
    if(element != null)
        element.scrollLeft = event.target.scrollLeft;
    }

score 0 · Answer 1 · answered Nov 06 '22 at 21:37

import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IColumn, IDetailsHeaderProps, IDetailsColumnRenderTooltipProps, ConstrainMode } from '@fluentui/react/lib/DetailsList'; ... constrainMode={ConstrainMode.unconstrained}

Refer here: https://github.com/microsoft/fluentui/issues/7731

Sample Code:

                    <Stack horizontal className={scrollClass.detailsListWrapper}>
                        <Stack.Item>
                            <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
                                <DetailsList
                                    items={entities}
                                    compact={isCompactMode}
                                    columns={columns}
                                    selectionMode={SelectionMode.single}
                                    getKey={this._getKey}
                                    setKey="multiple"
                                    layoutMode={DetailsListLayoutMode.fixedColumns}
                                    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" } }}
                                />
                                {/* {columnDropdownLists && <ContextualMenu {...columnDropdownLists} />} */}
                            </ScrollablePane>
                        </Stack.Item>
                    </Stack >

ScrollablePane with DetailsList cannot scroll fixed header issue

1 Answers1