Skip to content

Conversation

@ArgoZhang
Copy link
Member

@ArgoZhang ArgoZhang commented Nov 7, 2025

Link issues

fixes #7067

Summary By Copilot

Regression?

  • Yes
  • No

Risk

  • High
  • Medium
  • Low

Verification

  • Manual (required)
  • Automated

Packaging changes reviewed?

  • Yes
  • No
  • N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Merge the latest code from the main branch

Summary by Sourcery

Enable multiple-select checkbox column to adjust its width and position in compact table mode by introducing a new compact width parameter and updating layout logic, samples, CSS, and tests accordingly.

New Features:

  • Add CheckboxColumnCompactWidth parameter to configure checkbox column width in compact mode
  • Adapt multi-select column width and left offset based on TableSize (Normal vs. Compact)

Enhancements:

  • Add compact mode toggle to the table sample page
  • Adjust table-sm horizontal padding in CSS

Tests:

  • Extend unit tests to verify compact-mode checkbox column offset and include IsMultipleSelect in TableSize tests

Chores:

  • Update generic type naming in AddAttribute calls within tests and ErrorLogger component

Copilot AI review requested due to automatic review settings November 7, 2025 02:41
@bb-auto bb-auto bot added the enhancement New feature or request label Nov 7, 2025
@bb-auto bb-auto bot added this to the 10.0.0 milestone Nov 7, 2025
@sourcery-ai
Copy link
Contributor

sourcery-ai bot commented Nov 7, 2025

Reviewer's Guide

Introduces support for a compact-mode multiple select column in the Table component by adding a configurable compact width, updating layout calculations, and reflecting these changes in samples, settings, tests, and styles.

Entity relationship diagram for updated TableSettings data model

erDiagram
    TABLESETTINGS {
      int CheckboxColumnWidth
      int CheckboxColumnCompactWidth
      int RowHeaderWidth
    }
    TABLESETTINGS ||--o| TABLE : has
    TABLE {
      int CheckboxColumnWidth
      int CheckboxColumnCompactWidth
    }
Loading

Class diagram for updated Table component and TableSettings

classDiagram
    class TableSettings {
      +int CheckboxColumnWidth
      +int CheckboxColumnCompactWidth
      +int RowHeaderWidth
      ...
    }
    class Table {
      +int CheckboxColumnWidth
      +int CheckboxColumnCompactWidth
      +TableSize TableSize
      +int MultiColumnWidth
      +void OnInitParameters()
      ...
    }
    TableSettings <|-- Table
Loading

File-Level Changes

Change Details Files
Table component now respects a new compact checkbox column width
  • Added CheckboxColumnCompactWidth parameter with default in TableSettings
  • Initialize compact width in OnInitParameters if not explicitly set
  • Updated MultiColumnWidth and CalcMargin to use compact width when TableSize is Compact
src/BootstrapBlazor/Components/Table/Table.razor.cs
src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs
src/BootstrapBlazor/Options/TableSettings.cs
Sample page updated to toggle and display compact multiple select mode
  • Introduced _isCompact switch to control TableSize
  • Bound TableSize and enabled IsMultipleSelect in the demo table
src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor
src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor.cs
Unit tests extended for compact mode and generic attribute fixes
  • Added assertion for left offset in compact mode
  • Enabled IsMultipleSelect in TableSize_Ok test
  • Corrected generic type parameters in attribute references
test/UnitTest/Components/TableTest.cs
Adjusted compact table padding in stylesheet
  • Changed --bb-table-td-padding-x for .table-sm from .25rem to .35rem
src/BootstrapBlazor/Components/Table/Table.razor.scss
Fixed generic parameter references in ErrorLogger CascadingValue
  • Updated CascadingValue<> attribute names to use open-generic form
src/BootstrapBlazor/Components/ErrorLogger/ErrorLogger.cs

Assessment against linked issues

Issue Objective Addressed Explanation
#7067 Adapt the multiple select (checkbox) column in the Table component to compact mode, ensuring appropriate width and style adjustments.

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

sourcery-ai[bot]
sourcery-ai bot previously approved these changes Nov 7, 2025
Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey there - I've reviewed your changes - here's some feedback:

  • The new XML doc comments for CheckboxColumnCompactWidth (and in TableSettings) are in Chinese—please convert them to English to stay consistent with the rest of the codebase.
  • The SCSS tweak changing .table-sm padding may have unexpected visual side effects; double-check that this adjustment only impacts compact checkbox columns or consider isolating it under a more specific selector.
  • Using == 0 to detect whether CheckboxColumnCompactWidth was provided can conflate an explicit zero value with “unset”; consider using a nullable parameter or another flag to distinguish user input from default fallback.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The new XML doc comments for CheckboxColumnCompactWidth (and in TableSettings) are in Chinese—please convert them to English to stay consistent with the rest of the codebase.
- The SCSS tweak changing `.table-sm` padding may have unexpected visual side effects; double-check that this adjustment only impacts compact checkbox columns or consider isolating it under a more specific selector.
- Using `== 0` to detect whether CheckboxColumnCompactWidth was provided can conflate an explicit zero value with “unset”; consider using a nullable parameter or another flag to distinguish user input from default fallback.

## Individual Comments

### Comment 1
<location> `src/BootstrapBlazor/Components/Table/Table.razor.cs:889-890` </location>
<code_context>
             CheckboxColumnWidth = op.TableSettings.CheckboxColumnWidth;
         }

+        if (CheckboxColumnCompactWidth == 0)
+        {
+            CheckboxColumnCompactWidth = op.TableSettings.CheckboxColumnCompactWidth;
+        }
</code_context>

<issue_to_address>
**suggestion (bug_risk):** Default value assignment for CheckboxColumnCompactWidth may mask intentional zero values.

Using '== 0' here conflates unset and intentional zero values. Consider a nullable type or a distinct sentinel value to differentiate these cases.

Suggested implementation:

```csharp
    [Parameter]
    public int? CheckboxColumnCompactWidth { get; set; }

```

```csharp
        if (CheckboxColumnCompactWidth == null)
        {
            CheckboxColumnCompactWidth = op.TableSettings.CheckboxColumnCompactWidth;
        }

```
</issue_to_address>

### Comment 2
<location> `src/BootstrapBlazor/Components/ErrorLogger/ErrorLogger.cs:105` </location>
<code_context>
     protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenComponent<CascadingValue<IErrorLogger>>(0);
-        builder.AddAttribute(1, nameof(CascadingValue<IErrorLogger>.Value), this);
-        builder.AddAttribute(2, nameof(CascadingValue<IErrorLogger>.IsFixed), true);
-        builder.AddAttribute(3, nameof(CascadingValue<IErrorLogger>.ChildContent), RenderContent);
+        builder.AddAttribute(1, nameof(CascadingValue<>.Value), this);
+        builder.AddAttribute(2, nameof(CascadingValue<>.IsFixed), true);
+        builder.AddAttribute(3, nameof(CascadingValue<>.ChildContent), RenderContent);
</code_context>

<issue_to_address>
**issue (bug_risk):** Using open generic type for attribute name may cause runtime issues.

Referencing an open generic type in attribute names may not behave correctly at runtime. Please confirm this change is compatible with the framework and will not affect component behavior.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@codecov
Copy link

codecov bot commented Nov 7, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (e212123) to head (08fea11).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #7068   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          745       745           
  Lines        32550     32562   +12     
  Branches      4512      4513    +1     
=========================================
+ Hits         32550     32562   +12     
Flag Coverage Δ
BB 100.00% <100.00%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds support for different checkbox column widths based on table size (Normal vs Compact mode). When a table is in Compact mode, the checkbox column width is reduced from 36px to 28px to better fit the reduced padding.

Key changes:

  • Added CheckboxColumnCompactWidth property to control checkbox column width in compact mode (default 28px)
  • Updated CSS horizontal padding for compact tables from .25rem to .35rem
  • Refactored generic type references to use cleaner <> syntax instead of fully specified types

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/BootstrapBlazor/Options/TableSettings.cs Added CheckboxColumnCompactWidth configuration property with default value of 28
src/BootstrapBlazor/Components/Table/Table.razor.cs Added CheckboxColumnCompactWidth parameter and initialization logic
src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs Updated width calculation logic to use compact width when table size is not Normal
src/BootstrapBlazor/Components/Table/Table.razor.scss Increased compact table horizontal padding from .25rem to .35rem
test/UnitTest/Components/TableTest.cs Added test coverage for compact mode checkbox width and refactored generic type references
src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor Enhanced sample page with interactive switch to demonstrate size differences
src/BootstrapBlazor.Server/Components/Samples/Table/Tables.razor.cs Added state variable for compact mode toggle
src/BootstrapBlazor/Components/ErrorLogger/ErrorLogger.cs Refactored to use cleaner generic type syntax
src/BootstrapBlazor/BootstrapBlazor.csproj Version bumps for both Visual Studio 17.0 and 18.0 branches

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

@ArgoZhang ArgoZhang merged commit 986f8d5 into main Nov 7, 2025
6 checks passed
@ArgoZhang ArgoZhang deleted the fix-table branch November 7, 2025 03:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(Table): 多选列适配紧凑模式

2 participants