[dev-v5][Docs] Improve FluentDataGrid docs - #5034
Conversation
There was a problem hiding this comment.
Pull request overview
This PR consolidates FluentDataGrid column documentation by introducing a single “Column Types” page that explains when to use PropertyColumn, TemplateColumn, and SelectColumn, and removes older, separate demo pages in favor of the new consolidated content.
Changes:
- Reworked
DataGridColumnTypes.mdinto a “Column Types” documentation page and moved column API docs onto that page. - Updated the main
FluentDataGriddocs to link to the new consolidated page and removed links/sections for the older template-column pages. - Restructured DataGrid demo examples by removing the old “TemplateColumns2” demo and adding/adjusting examples under
Examples/ColumnTypes/.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| examples/Tools/FluentUI.Demo.SampleData/People.cs | Attempts to make Email editable in the sample Person model (currently introduces a compile-breaking duplicate member). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridTemplateColumnsPage.md | Removed (content consolidated into the new Column Types page). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridTemplateColumns2Page.md | Removed (content consolidated into the new Column Types page). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridColumnTypes.md | Converted into the new “Column Types” page with consolidated demos + API references. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/FluentDataGrid.md | Updated navigation/links and removed column API sections that moved to the new page. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/DataGridTemplateColumns2.razor | Removed (superseded by new column-type examples). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/ColumnTypes/DataGridTemplateColumn.razor | Updated template-column example; now demonstrates an email input column. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/ColumnTypes/DataGridSelectColumn.razor | New SelectColumn example showing both SelectedItems and manual selection management. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/ColumnTypes/DataGridPropertyColumn.razor | New minimal PropertyColumn example. |
Comments suppressed due to low confidence (2)
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Examples/ColumnTypes/DataGridTemplateColumn.razor:9
@bind-Valuerequires a settable value, butPeople.Person.Emailis currently an init-only property (positional record). This will not compile after removing the duplicateEmailproperty attempt inPeople.cs.
Use one-way binding here (or introduce an editable view-model) to keep the sample compiling.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/DataGrid/Pages/DataGridColumnTypes.md:21
- The Docs-style admonition syntax elsewhere in this repo uses a space after
>(e.g.,> [!NOTE]). Without the space, this may not render as an admonition depending on the Markdown pipeline.
Yes. Let's do that. Can be done in this PR I think. |
Pull Request
📖 Description
This PR improves the documentation for
FluentDataGrid.It introduces a new page,
DataGridColumnTypes, which contains examples of all available column types:PropertyColumn,TemplateColumn, andSelectColumn. The page also provides guidance on when to use each column type.Since this is fundamental knowledge for using the component effectively, I placed the page relatively high in the navigation.
Additionally, I removed the separate pages containing these demos, as they are now consolidated into a single page that also includes the relevant API documentation.
👩💻 Reviewer Notes
The folder of examples is still pretty large. Would it be a good idea to categorize the demos by Layout and Advanced as we do in the Overview page?
✅ Checklist
General
Component-specific