Skip to content

refactor(Table): update calc cell width logic#8013

Merged
ArgoZhang merged 3 commits into
mainfrom
refactor-table
May 17, 2026
Merged

refactor(Table): update calc cell width logic#8013
ArgoZhang merged 3 commits into
mainfrom
refactor-table

Conversation

@ArgoZhang
Copy link
Copy Markdown
Member

@ArgoZhang ArgoZhang commented May 17, 2026

Link issues

fixes #8012

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

Refine table cell width calculation to better account for form controls and horizontal padding/borders, improving column auto-fit behavior.

Bug Fixes:

  • Correct table column auto-fit sizing when cells contain form controls by basing widths on rendered text and control styles.

Enhancements:

  • Refactor cell width computation logic to reuse a shared horizontal padding/border helper and clean up temporary element handling.

Documentation:

  • Adjust the documented version tag for the ScrollIntoViewBehavior parameter to reflect the correct version.

Copilot AI review requested due to automatic review settings May 17, 2026 08:58
@bb-auto bb-auto Bot added the enhancement New feature or request label May 17, 2026
@bb-auto bb-auto Bot added this to the v10.6.0 milestone May 17, 2026
@sourcery-ai
Copy link
Copy Markdown
Contributor

sourcery-ai Bot commented May 17, 2026

Reviewer's Guide

Refactors the table cell width calculation to more accurately measure form controls inside cells by cloning them with adjusted widths, while also extracting reusable helpers for horizontal style widths and updating a version tag comment in the C# component.

File-Level Changes

Change Details Files
Refine table cell width measurement to account for form controls and padding/borders using shared helpers.
  • Introduce a reusable CSS selector constant for form controls within table cells.
  • Add helper to compute horizontal padding and border width from a computed style object and reuse it in calculations.
  • Implement a function that measures the rendered text width of form controls (value or placeholder) using a hidden span with matching typography.
  • Implement a function that, when cloning a cell for measurement, resets widths of any form controls in the clone to match the measured text width and disables flex shrinking.
  • Update calcCellWidth to call the new resetFormControlWidth helper on the cloned cell, use the new horizontal width helper, and ensure the temporary div is removed after measurement.
src/BootstrapBlazor/Components/Table/Table.razor.js
Adjust version documentation for the ScrollIntoViewBehavior parameter.
  • Update XML doc comment to indicate version 10.6.1 instead of 10.6.2 for the ScrollIntoViewBehavior parameter documentation.
src/BootstrapBlazor/Components/Table/Table.razor.cs

Assessment against linked issues

Issue Objective Addressed Explanation
#8012 Refactor the Table component's cell width calculation logic to use updated calculation behavior.

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

@ArgoZhang ArgoZhang merged commit ef8f70f into main May 17, 2026
6 checks passed
@ArgoZhang ArgoZhang deleted the refactor-table branch May 17, 2026 08:58
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:

  • In getFormControlTextWidth, repeatedly creating and appending a new span for every control can be expensive in large tables; consider reusing a single hidden measurement element or a small pool of them to reduce DOM churn.
  • The resetFormControlWidth logic assumes that the querySelectorAll order in the source and cloned cells will always match; if the clone's structure ever diverges (e.g., due to conditional content), this could misalign widths—consider a more robust mapping, such as matching by a data attribute or index checks with early return.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- In `getFormControlTextWidth`, repeatedly creating and appending a new span for every control can be expensive in large tables; consider reusing a single hidden measurement element or a small pool of them to reduce DOM churn.
- The `resetFormControlWidth` logic assumes that the querySelectorAll order in the source and cloned cells will always match; if the clone's structure ever diverges (e.g., due to conditional content), this could misalign widths—consider a more robust mapping, such as matching by a data attribute or index checks with early return.

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 17, 2026

Codecov Report

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

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #8013   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          766       766           
  Lines        34123     34123           
  Branches      4692      4692           
=========================================
  Hits         34123     34123           
Flag Coverage Δ
BB 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.

Copy link
Copy Markdown
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 refactors Table column auto-fit width calculation, focusing on more accurate sizing for form controls inside table cells while updating package/API version metadata.

Changes:

  • Adds helper logic to measure form-control text width during table cell width calculation.
  • Removes the temporary cloned measurement element after use.
  • Bumps the BootstrapBlazor package beta version and adjusts a Table API version tag.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
src/BootstrapBlazor/Components/Table/Table.razor.js Updates auto-fit cell width calculation for form controls and cleans up measurement DOM.
src/BootstrapBlazor/Components/Table/Table.razor.cs Adjusts the documented version for ScrollIntoViewBehavior.
src/BootstrapBlazor/BootstrapBlazor.csproj Bumps package version from 10.6.1-beta22 to 10.6.1-beta23.

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

Comment on lines +639 to +642
const getFormControlTextWidth = control => {
const style = getComputedStyle(control);
const span = document.createElement('span');
span.textContent = control.value || control.getAttribute('placeholder') || ' ';
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.

refactor(Table): update calc cell width logic

2 participants