Virtualized datagrid columns overflowing

[george-cz]

Previous Behavior

Previously the width of the scrollbar wasn't subtracted from the available space for column resizing, resulting in columns in total being wider than its container and scrollbar showing up.

New Behavior

The width of the scrollbar is now subtracted, fixing the issue with vertical scrollbar always being present

Related Issue(s)

• Fixes #27737

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-table DataGrid	150.868 kB 41.518 kB	150.905 kB 41.528 kB	37 B 10 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	64.899 kB 17.91 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	206.425 kB 57.914 kB
react-components react-components: FluentProvider & webLightTheme	36.132 kB 11.954 kB
react-portal-compat PortalCompatProvider	6.473 kB 2.196 kB
react-table Table (Primitives only)	45.111 kB 12.567 kB
react-table Table as DataGrid	133.356 kB 34.002 kB
react-table Table (Selection only)	79.125 kB 19.379 kB
react-table Table (Sort only)	78.455 kB 19.187 kB

_{🤖 This report was generated against fc3a1848681c0b4142abe791dc32c88ccb056545}

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	575	582	5000
Button	mount	301	281	5000
Field	mount	1028	1024	5000
FluentProvider	mount	653	667	5000
FluentProviderWithTheme	mount	76	82	10
FluentProviderWithTheme	virtual-rerender	68	66	10
FluentProviderWithTheme	virtual-rerender-with-unmount	71	77	10
InfoButton	mount	14	21	5000
MakeStyles	mount	843	857	50000
Persona	mount	1612	1559	5000
SpinButton	mount	1254	1282	5000

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: fc3a1848681c0b4142abe791dc32c88ccb056545 (build)

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 24974697505c90362d4ea0bd01c57488387cd58d:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
elated-water-4j5opj	Issue #27737

[msft-fluent-ui-bot]

:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

:tada:@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release