Simplify pinned-column wording, preserve demo page metadata, and remove tracked generated props file by Copilot · Pull Request #4673 · microsoft/fluentui-blazor

Copilot · 2026-04-04T15:46:56Z

Inspect pinned-column validation, offset computation, tests, and docs
Remove the pixel-only pinned-width enforcement while keeping required-width and ordering validation
Update pinned-column comments and public documentation to describe rendered-width offset recomputation
Adjust DataGrid tests to cover non-pixel pinned widths and preserve ordering/required-width behavior
Restore/build/test the affected projects and confirm no build artifacts are committed

…x to PinOffset (string) with logical CSS properties Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/705a5b7c-1768-42a0-ba5f-faa99daf78d4 Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

…gitignore Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/705a5b7c-1768-42a0-ba5f-faa99daf78d4 Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/e324508b-d7f0-40e2-bfec-a2707d42806c Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/9d4563a7-5f41-4b62-ab85-0d78d50060b1 Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

vnbaaij · 2026-04-04T15:48:37Z

...mo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.md

---
-title: Pinned columns
-order: 0095
-route: /DataGrid/PinnedColumns
---


This needs to stay in place. Is used for the demo site nav menu

Fixed in a0f46eb by restoring the page front matter (title and route) so the demo nav/menu registration stays intact.

vnbaaij · 2026-04-04T15:50:17Z

...mo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.md

 * Column resizing interacts correctly with sticky offsets — the JavaScript in
-  `FluentDataGrid.razor.ts` recalculates `left` / `right` values after every resize step via
+  `FluentDataGrid.razor.ts` recalculates start and end offset values after every resize step via


This is too much detail. It is not necessary for the developer using the component to know this

Updated in a0f46eb to remove the implementation detail and keep the note user-focused.

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/bbc46172-3499-4123-a119-cc10c435de7f Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/4c32bc45-2c71-462f-8fad-b3b8abd4a55a Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

…pilot/update-pinoffsetpx-value

Copilot

Pull request overview

This PR updates FluentDataGrid pinned-column behavior and documentation to use logical start/end pinning (LTR/RTL-friendly) and to allow non-pixel CSS widths by recomputing sticky offsets from rendered widths via JavaScript after render.

Changes:

Renamed pinned-column concepts from Left/Right to Start/End across code, CSS, tests, and docs, and switched sticky positioning to inset-inline-start/end.
Relaxed pinned-column width validation to require an explicit Width (not pixel-only) and added/updated tests accordingly.
Updated demo documentation/examples and ignored src/Core.Scripts/obj/ in .gitignore.

Reviewed changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tests/Core/Components/DataGrid/FluentDataGridPinnedColumnTests.razor	Updates pinned-column tests for Start/End + logical inset styles; adds non-px width render test.
tests/Core/Components/DataGrid/FluentDataGridPinnedColumnTests.FluentDataGrid_PinnedColumn_Snapshot.verified.razor.html	Updates verified snapshot to new class names and logical inset styles.
src/Core/Enums/DataGridColumnPin.cs	Renames enum values to Start/End with updated XML docs.
src/Core/Components/DataGrid/FluentDataGridCell.razor.cs	Updates emitted CSS classes and inline sticky styles to logical start/end properties.
src/Core/Components/DataGrid/FluentDataGrid.razor.ts	Updates offset recomputation logic to target Start/End pinned columns and logical inset properties.
src/Core/Components/DataGrid/FluentDataGrid.razor.css	Renames pinned-column selectors to `col-pinned-start/end` and keeps separator/z-index rules aligned.
src/Core/Components/DataGrid/FluentDataGrid.razor.cs	Updates pinned-column validation wording and switches from numeric pixel offsets to string offsets.
src/Core/Components/DataGrid/Columns/ColumnBase.razor.cs	Replaces `PinOffsetPx` with `PinOffset` string and updates docs for new behavior.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.md	Updates pinned-columns docs to Start/End and to allow non-pixel widths; front matter changed.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridPinnedColumns.razor	Updates demo example to Start/End pinning.
.gitignore	Ignores `src/Core.Scripts/obj/`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-07T09:57:17Z

src/Core/Enums/DataGridColumnPin.cs

    /// <summary>
-    /// The column is pinned to the left edge of the grid.
-    /// The column will remain visible when the user scrolls right.
+    /// The column is pinned to the start edge of the grid.
+    /// The column will remain visible when the user scrolls toward the end.
    /// </summary>
-    Left,
+    Start,

    /// <summary>
-    /// The column is pinned to the right edge of the grid.
-    /// The column will remain visible when the user scrolls left.
+    /// The column is pinned to the end edge of the grid.
+    /// The column will remain visible when the user scrolls toward the start.
    /// </summary>
-    Right,
+    End,


Renaming enum members from Left/Right to Start/End is a source-breaking public API change for all consumers that reference DataGridColumnPin.Left/Right. Consider keeping Left and Right as [Obsolete] aliases (mapping to the same underlying numeric values as Start/End) to preserve backward compatibility, and add migration guidance if the rename is intentional.

Copilot · 2026-04-07T09:57:18Z

src/Core/Components/DataGrid/FluentDataGridCell.razor.cs

+        .AddClass("col-pinned-start", Column?.Pin == DataGridColumnPin.Start)
+        .AddClass("col-pinned-end", Column?.Pin == DataGridColumnPin.End)


col-pinned-left/right class names were replaced with col-pinned-start/end. This is a breaking change for consumers who target the old class names in custom CSS/tests. If backward compatibility is required, consider emitting both the old and new class names for a transition period (or clearly documenting this as a breaking change/migration step).

Suggested change

.AddClass("col-pinned-start", Column?.Pin == DataGridColumnPin.Start)

.AddClass("col-pinned-end", Column?.Pin == DataGridColumnPin.End)

.AddClass("col-pinned-start", Column?.Pin == DataGridColumnPin.Start)

.AddClass("col-pinned-left", Column?.Pin == DataGridColumnPin.Start)

.AddClass("col-pinned-end", Column?.Pin == DataGridColumnPin.End)

.AddClass("col-pinned-right", Column?.Pin == DataGridColumnPin.End)

Copilot · 2026-04-07T09:57:18Z

src/Core/Components/DataGrid/FluentDataGrid.razor.ts

  /**
   * Recalculates and applies the `left` / `right` inline offsets for every cell in each
   * pinned column so that columns stack correctly against the grid edge after the initial
   * render or after a column is resized.
   *


The JSDoc for UpdatePinnedColumnOffsets still says it recalculates left / right offsets, but the implementation now uses logical properties (insetInlineStart / insetInlineEnd). Update the comment to match the new behavior to avoid confusion for maintainers.

Copilot · 2026-04-07T09:57:18Z

...mo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridPinnedColumnsPage.md

 ---
 title: Pinned columns
-order: 0095
 route: /DataGrid/PinnedColumns


The page front matter removed order: 0095, but other DataGrid documentation pages still define order: for nav/menu sorting. If the demo site relies on this for stable ordering, restore the order value (or update the doc-nav logic accordingly).

Suggested change

route: /DataGrid/PinnedColumns

route: /DataGrid/PinnedColumns

order: 0095

Copilot AI and others added 5 commits April 4, 2026 09:38

chore: remove accidentally committed build artifact and add obj/ to .…

23b3c4f

…gitignore Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/705a5b7c-1768-42a0-ba5f-faa99daf78d4 Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

chore: plan wording updates for start/end docs and comments

c76e2cb

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/e324508b-d7f0-40e2-bfec-a2707d42806c Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

docs: simplify DataGrid start/end wording

1b4c295

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/e324508b-d7f0-40e2-bfec-a2707d42806c Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

chore: remove tracked generated props file

6e4243d

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/9d4563a7-5f41-4b62-ab85-0d78d50060b1 Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

Copilot AI assigned Copilot and vnbaaij Apr 4, 2026

Copilot created this pull request from a session on behalf of vnbaaij April 4, 2026 15:46 View session

vnbaaij requested changes Apr 4, 2026

View reviewed changes

Copilot started work on behalf of vnbaaij April 4, 2026 15:50 View session

Copilot AI and others added 2 commits April 4, 2026 15:53

docs: restore pinned columns page metadata

a0f46eb

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/bbc46172-3499-4123-a119-cc10c435de7f Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

chore: remove regenerated props file

b2175fe

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/bbc46172-3499-4123-a119-cc10c435de7f Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

Copilot AI changed the title ~~Simplify pinned-column wording to start/end and remove tracked generated props file~~ Simplify pinned-column wording, preserve demo page metadata, and remove tracked generated props file Apr 4, 2026

Copilot AI requested a review from vnbaaij April 4, 2026 15:55

Copilot finished work on behalf of vnbaaij April 4, 2026 15:55

Fix formatting in DataGridPinnedColumnsPage.md

2403bfd

Copilot started work on behalf of vnbaaij April 4, 2026 15:59 View session

Copilot finished work on behalf of vnbaaij April 4, 2026 16:00

Copilot started work on behalf of vnbaaij April 4, 2026 18:22 View session

Copilot finished work on behalf of vnbaaij April 4, 2026 18:23

Copilot started work on behalf of vnbaaij April 7, 2026 08:49 View session

Copilot AI and others added 2 commits April 7, 2026 08:53

fix: allow non-pixel pinned column widths

c0b87b3

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/4c32bc45-2c71-462f-8fad-b3b8abd4a55a Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

docs: clarify pinned offset recomputation comments

41021db

Agent-Logs-Url: https://github.com/microsoft/fluentui-blazor/sessions/4c32bc45-2c71-462f-8fad-b3b8abd4a55a Co-authored-by: vnbaaij <1761079+vnbaaij@users.noreply.github.com>

Copilot finished work on behalf of vnbaaij April 7, 2026 09:02

vnbaaij approved these changes Apr 7, 2026

View reviewed changes

Merge branch 'copilot/research-fluentdatagrid-implementation' into co…

e7575ba

…pilot/update-pinoffsetpx-value

vnbaaij marked this pull request as ready for review April 7, 2026 09:53

vnbaaij requested a review from dvoituron as a code owner April 7, 2026 09:53

Copilot AI review requested due to automatic review settings April 7, 2026 09:53

vnbaaij merged commit dff971a into copilot/research-fluentdatagrid-implementation Apr 7, 2026
1 check passed

vnbaaij deleted the copilot/update-pinoffsetpx-value branch April 7, 2026 09:53

Copilot started reviewing on behalf of vnbaaij April 7, 2026 09:53 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify pinned-column wording, preserve demo page metadata, and remove tracked generated props file#4673

Simplify pinned-column wording, preserve demo page metadata, and remove tracked generated props file#4673
vnbaaij merged 11 commits intocopilot/research-fluentdatagrid-implementationfrom
copilot/update-pinoffsetpx-value

Copilot AI commented Apr 4, 2026 •

edited

Loading

Uh oh!

vnbaaij Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

vnbaaij Apr 4, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Copilot AI Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		.AddClass("col-pinned-start", Column?.Pin == DataGridColumnPin.Start)
		.AddClass("col-pinned-end", Column?.Pin == DataGridColumnPin.End)

	route: /DataGrid/PinnedColumns
	route: /DataGrid/PinnedColumns
	order: 0095

Conversation

Copilot AI commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vnbaaij Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

vnbaaij Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Apr 4, 2026 •

edited

Loading