Skip to content

表格中存在固定列时(左/右),让组件中DefaultFixedColumnWidth属性值正确生效#8073

Open
Tony-ST0754 wants to merge 2 commits into
mainfrom
fix-table-FixedColumn-DefaultWidth
Open

表格中存在固定列时(左/右),让组件中DefaultFixedColumnWidth属性值正确生效#8073
Tony-ST0754 wants to merge 2 commits into
mainfrom
fix-table-FixedColumn-DefaultWidth

Conversation

@Tony-ST0754
Copy link
Copy Markdown
Collaborator

@Tony-ST0754 Tony-ST0754 commented May 31, 2026

fix:让参数,DefaultFixedColumnWidth,生效

refactor: 修改单元测试

desc:当列固定时,默认固定列宽度没给到表格上,导致用户在改变表格列宽时,表格会整体重算全部列宽(包括固定列列宽)时,将固定列宽错误重计算,但固定列上style中left或right的值还是默认的200px,从而在横向滑动时出现错位

Link issues

fixes #8072

问题描述 / Problem Description

当列固定时,默认固定列宽度没给到表格上,导致用户在改变表格列宽时,导致表格会整体重算列宽时,将固定列宽错误重计算,但固定列上style中left或right的值还是默认的200px,从而在横向滑动时出现错位

复现代码示例

BootstrapBlazorApp11.zip

解决方案 / Solution

private TableColumnState CreateTableColumnState(ITableColumn col) => new TableColumnState()
{
    //  省略以上代码
    //  在此处将固定列且用户没有给固定列值是,将组件默认属性给到固定列 
    Width = col.Fixed && !col.Width.HasValue ? DefaultFixedColumnWidth : col.Width,
    // 省略以下代码
};

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

Ensure fixed table columns correctly apply the default fixed column width when no explicit width is provided.

Bug Fixes:

  • Apply DefaultFixedColumnWidth to fixed columns without an explicit width so their widths stay consistent with left/right positioning and avoid horizontal misalignment when resizing.

Tests:

  • Extend the fixed-column unit test to assert that the corresponding col element uses the default fixed column width.

@bb-auto
Copy link
Copy Markdown

bb-auto Bot commented May 31, 2026

Thanks for your PR, @Tony-ST0754. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

@sourcery-ai
Copy link
Copy Markdown
Contributor

sourcery-ai Bot commented May 31, 2026

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Ensures the table's DefaultFixedColumnWidth is applied to fixed columns without explicit widths and updates the corresponding unit test to verify the col element width styling.

Flow diagram for applying DefaultFixedColumnWidth to fixed columns

flowchart TD
    A[CreateTableColumnState] --> B[Check col.Fixed]
    B -->|false| C[Width = col.Width]
    B -->|true| D[Check col.Width.HasValue]
    D -->|true| C
    D -->|false| E[Width = DefaultFixedColumnWidth]

    C --> F[Return TableColumnState]
    E --> F
Loading

File-Level Changes

Change Details Files
Apply DefaultFixedColumnWidth to fixed columns lacking explicit widths in Table column state creation.
  • Updated CreateTableColumnState to set Width to DefaultFixedColumnWidth when the column is fixed and has no Width specified
  • Maintained existing behavior for non-fixed columns and fixed columns with explicit Width values
src/BootstrapBlazor/Components/Table/Table.razor.cs
Strengthen unit test to assert that fixed columns receive the correct width in the generated col elements.
  • Added assertions in ColumnFixed_Ok test to inspect rendered th and col elements
  • Verified that when the first header column is fixed, the first col element includes a width: 200px style
test/UnitTest/Components/TableTest.cs

Assessment against linked issues

Issue Objective Addressed Explanation
#8072 Apply DefaultFixedColumnWidth to fixed (left/right) table columns that do not have an explicit width so that their widths and left/right styles stay consistent during resizing and horizontal scrolling.
#8072 Add or update tests to verify that fixed columns without explicit widths receive the DefaultFixedColumnWidth value.

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

@bb-auto bb-auto Bot requested a review from ArgoZhang May 31, 2026 14:12
@bb-auto bb-auto Bot added the bug Something isn't working label May 31, 2026
@bb-auto bb-auto Bot added this to the v10.7.0 milestone May 31, 2026
Copy link
Copy Markdown
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 - I've left some high level feedback:

  • The added using System.Drawing; namespace in Table.razor.cs doesn’t appear to be used and can be removed to keep dependencies minimal.
  • In the updated unit test, var col = cut.FindAll("col"); is unused and the boolean assertion could be simplified to Assert.True(fixedWidth); to make the test clearer and more idiomatic.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The added `using System.Drawing;` namespace in `Table.razor.cs` doesn’t appear to be used and can be removed to keep dependencies minimal.
- In the updated unit test, `var col = cut.FindAll("col");` is unused and the boolean assertion could be simplified to `Assert.True(fixedWidth);` to make the test clearer and more idiomatic.

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
Copy Markdown

codecov Bot commented May 31, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (525e75b) to head (5f965f0).

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #8073   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          766       766           
  Lines        34171     34171           
  Branches      4700      4701    +1     
=========================================
  Hits         34171     34171           
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.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

fix:让参数,DefaultFixedColumnWidth,生效

refactor: 修改单元测试

desc:当列固定时,默认固定列宽度没给到表格上,导致用户在改变表格列宽时,导致表格会整体重算列宽时,将固定列宽错误重计算,但固定列上style中left或right的值还是默认的200px,从而在横向滑动时出现错位
@Tony-ST0754 Tony-ST0754 force-pushed the fix-table-FixedColumn-DefaultWidth branch from a8933c8 to e3b6907 Compare May 31, 2026 15:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(table): DefaultFixedColumnWidth 不生效

2 participants