Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feat] Virtualized DataGrid with autoFitColumns: false #176

Open
rocketBANG opened this issue May 17, 2024 · 2 comments · May be fixed by #260
Open

[Feat] Virtualized DataGrid with autoFitColumns: false #176

rocketBANG opened this issue May 17, 2024 · 2 comments · May be fixed by #260

Comments

@rocketBANG
Copy link

rocketBANG commented May 17, 2024 •
edited
Loading

For the virtualized dataGrid (@fluentui-contrib/react-data-grid-react-window), the scrollbar is on the body

This is fine if the columns all fit without a horizontal overflow, however if there is some horizontal scrollbar there's no way to scroll both the body and the headers at the same time. So when autoFitColumns is set to false, this causes issues

overflow-x: auto can be applied to the parent container, but that means the vertical scrollbar won't be visible unless the user scrolls all the way to the right
image
https://codesandbox.io/p/sandbox/datagrid-body-overflow-forked-ygzvhs?workspaceId=2e8388ff-7617-4f14-8fb7-fe6621520941

overflow-x: auto can be applied to the DataGridBody, but that means the DataGridHeaders won't scroll with the body and the column data and headers will be misaligned
image
https://codesandbox.io/p/sandbox/datagrid-bodysize-bug-forked-6xqrry?file=%2Fsrc%2Fexample.tsx

(for the sandboxes, try resizing some columns to be larger and then observe the scrollbar positions/behaviours)
@it950
Copy link

it950 commented Sep 22, 2024

I have the same issue: microsoft/fluentui#32837
fluentui v9's progress was slow, and it still wasn't a complete replacement for fluentui v8

@nanivijay
Copy link

+100
We have the same requirements

rocketBANG added a commit to rocketBANG/fluentui-contrib that referenced this issue Nov 21, 2024
@rocketBANG
Keep header and body in sync when the DataGrid columns are overflowing …
b3af165 
…microsoft#176

Previously, when using resizableColumns and resizableColumnsOptions.autoFitColumns = false, only the body or the header could be scrolled and they would be out of sync

This changes synchronies the scrolling between the two so scrolling horizontally on either affects the other as if you were scrolling on a shared parent
@rocketBANG rocketBANG linked a pull request Nov 21, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(react-data-grid): support autoFitColumns: false rocketBANG/fluentui-contrib
3 participants
@rocketBANG @nanivijay @it950