[Feat] Virtualized DataGrid with autoFitColumns: false

[rocketBANG]

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

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

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]

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]

+100
We have the same requirements

[ling1726]

@rocketBANG wondering if just having a wrapping overflow container wouldn't be an easier solution? https://codesandbox.io/p/sandbox/datagrid-bodysize-bug-forked-6xqrry

[rocketBANG]

@ling1726 The issue with that approach is there's no way to see the vertical scroll bar unless the user scrolls all the way to the edge of the page. So then that's a potential usability/accessibility issue