[Bug]: DataGrid, virtualized with resizable columns, does not scroll header horizontally

logicaloud commented 1 year ago

Library

React Components / v9 (@fluentui/react-components)

System Info

Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.64)

"@fluentui/react-components": "^9.18.9"

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/young-cherry-bpfrx7

Bug Description

Actual Behavior

When scrolling the data grid horizontally, the header cells remain fixed.

fluent-headerscroll

Expected Behavior

The header cells should scroll horizontally with the data grid body.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

FengQiMS commented 1 year ago

Any ETA when this sticky header will be fixed?

FengQiMS commented 1 year ago

Got this fixed with the solution answered in this issue The fix is to add a wrapper div at header, and make it overflow: hidden, bundle scroll bar horizontal event of the child List component of DataGridBody(target element is the one with the overflow:auto): to make both header and body scroll horizontally using scrollTo() API

    const headerContainer: React.Ref<HTMLDivElement> = React.useRef(null);
    const bodyContainer: React.Ref<HTMLDivElement> = React.useRef(null);

    const scrollToLeft = (scrollLeft: number) => {
        headerContainer && (headerContainer?.current as HTMLElement).scrollTo({ left: scrollLeft});
        const bodyChildren = bodyContainer && bodyContainer?.current?.children;
        if( bodyChildren) {
            (Array.from(bodyChildren)[0] as HTMLElement).scrollTo({ left: scrollLeft });
        }
    }

    // bundle scroll bar horizontal of the child List component of DataGridBody: to make both header and body scroll horizontally
    React.useEffect(() => {
        const bodyChildren = bodyContainer && bodyContainer?.current?.children;
        if( bodyChildren) {
            const handleScroll = (event) => {
                scrollToLeft((Array.from(bodyChildren)[0] as HTMLElement).scrollLeft);
            }

            (Array.from(bodyChildren)[0] as HTMLElement).addEventListener('scroll', handleScroll);
        }
    }, []);

 <DataGrid
            {...props}
            items={items}
  >
            <div role='grid' className={styles.tableHeader} ref={headerContainer}>
                <DataGridHeader style={{ paddingRight: scrollbarWidth }}>
                    <DataGridRow>
                        {({ columnId, renderHeaderCell }, tableFeaturesState) => {
                            return (
                                <RichDataGridHeaderCell>
                                    {renderHeaderCell()}
                                </RichDataGridHeaderCell>
                            );
                        }}
                    </DataGridRow>
                </DataGridHeader>
            </div>
            <DataGridBody<Item> itemSize={getRowHeight(richSize)} height={height} ref={bodyContainer}>
                {renderRow}
            </DataGridBody>
        </DataGrid>

After fix: fixHeaderStickyscrollHorizontal