feat(Table): add SetRowStyleFormatter parameter#7758
Merged
Conversation
Contributor
Reviewer's GuideAdds a new SetRowStyleFormatter parameter to Table to allow per-row inline style customization and wires it through the rendering pipeline, with a corresponding unit test to verify the style output. Sequence diagram for applying SetRowStyleFormatter during row renderingsequenceDiagram
participant Table_TItem_ as Table_TItem_
participant RenderRow as RenderRow_lambda
participant DynamicElement as DynamicElement_tr
participant CssBuilder as CssBuilder
participant Formatter as SetRowStyleFormatter
Table_TItem_->>RenderRow: Invoke for item
RenderRow->>Table_TItem_: GetRowClassString(item)
RenderRow->>Table_TItem_: GetRowStyleString(item)
activate Table_TItem_
Table_TItem_->>CssBuilder: Default()
activate CssBuilder
CssBuilder-->>Table_TItem_: CssBuilder
Table_TItem_->>Formatter: Invoke(item)
activate Formatter
Formatter-->>Table_TItem_: string? inlineStyle
deactivate Formatter
Table_TItem_->>CssBuilder: AddClass(inlineStyle)
CssBuilder-->>Table_TItem_: CssBuilder
Table_TItem_->>CssBuilder: Build()
CssBuilder-->>Table_TItem_: string? styleString
deactivate CssBuilder
Table_TItem_-->>RenderRow: styleString
deactivate Table_TItem_
RenderRow->>DynamicElement: new tr with class and style=styleString
DynamicElement-->>RenderRow: rendered row fragment
RenderRow-->>Table_TItem_: row fragment for item
Class diagram for new SetRowStyleFormatter support in TableclassDiagram
class Table_TItem_ {
+Func~TItem, string?~? SetRowClassFormatter
+Func~TItem, string?~? SetRowStyleFormatter
+string? GetRowClassString(TItem item, string additionalClass)
+string? GetRowClassString(TItem item)
+string? GetRowStyleString(TItem item)
RenderFragment~TItem~ RenderRow
}
class CssBuilder {
+static CssBuilder Default()
+CssBuilder AddClass(string? value)
+string Build()
}
class DynamicElement {
+string? TagName
+string? class
+string? style
+bool TriggerContextMenu
+EventCallback OnContextMenu
+EventCallback OnClick
}
Table_TItem_ --> CssBuilder : uses
Table_TItem_ --> DynamicElement : renders rows with
Table_TItem_ o--> SetRowStyleFormatter : row_style_delegate
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7758 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 750 750
Lines 33270 33274 +4
Branches 4612 4613 +1
=========================================
+ Hits 33270 33274 +4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements the SetRowStyleFormatter feature requested in issue #7757. The existing SetRowClassFormatter parameter only allows returning a CSS class name (which must be pre-defined in a stylesheet), but users wanted a way to set inline styles directly (e.g., "color:red;font-size:15px;") without needing to pre-define styles in a CSS file.
Changes:
- Adds a
SetRowStyleFormatterparameter (Func<TItem, string?>) to the Table component alongside the existingSetRowClassFormatter - Adds a
GetRowStyleStringhelper method that invokesSetRowStyleFormatterand applies the result to both Table and CardView row elements via a newstyleattribute - Bumps the package version from
10.4.1-beta01to10.4.1-beta02and adds a unit test for the new parameter
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs |
Adds the new SetRowStyleFormatter parameter definition with bilingual XML docs |
src/BootstrapBlazor/Components/Table/Table.razor.cs |
Adds GetRowStyleString() helper method that builds the inline style string |
src/BootstrapBlazor/Components/Table/Table.razor |
Applies style="@GetRowStyleString(item)" to row elements in both Table mode and CardView mode |
src/BootstrapBlazor/BootstrapBlazor.csproj |
Version bump to 10.4.1-beta02 |
test/UnitTest/Components/TableTest.cs |
Extends SetRowClassFormatter_Ok test to also cover SetRowStyleFormatter |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| public Func<TItem, string?>? SetRowClassFormatter { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// <para lang="zh">获得/设置 行样式格式回调委托</para> |
There was a problem hiding this comment.
The Chinese documentation (lang="zh") for SetRowStyleFormatter is identical to the one for SetRowClassFormatter above it: both use "获得/设置 行样式格式回调委托". This is misleading — SetRowClassFormatter deals with CSS class names while SetRowStyleFormatter deals with inline CSS style strings. The zh-CN doc for SetRowStyleFormatter should be updated to distinguish it, such as "获得/设置 行内联样式格式回调委托" (inline style formatter callback).
| RenderFragment<TItem> RenderRow => item => | ||
| @<DynamicElement TagName="tr" class="@GetRowClassString(item)" @key="GetKeyByITem(item)" | ||
| @<DynamicElement @key="GetKeyByITem(item)" TagName="tr" | ||
| class="@GetRowClassString(item)" style="@GetRowStyleString(item)" |
There was a problem hiding this comment.
There is a trailing whitespace at the end of the style="@GetRowStyleString(item)" attribute line. While this is not functionally harmful, it's a minor style issue and the codebase should ideally be free of unnecessary trailing whitespace.
Comment on lines
+136
to
+142
| /// <summary> | ||
| /// <para lang="zh">获得 Body 内行内联样式</para> | ||
| /// <para lang="en">Get Body Row Inline Style</para> | ||
| /// </summary> | ||
| protected string? GetRowStyleString(TItem item) => CssBuilder.Default() | ||
| .AddClass(SetRowStyleFormatter?.Invoke(item)) | ||
| .Build(); |
There was a problem hiding this comment.
The GetRowStyleString method is missing a <param name="item"> XML documentation tag, while similar methods in the same file (GetRowClassString, GetDetailBarClassString, GetDetailRowClassString, GetDetailCaretClassString) all document their item parameter.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #7757
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Add support for per-row inline style customization in the Table component.
New Features:
Tests: