Skip to content

fix(Table): add fitAllColumnWidth javascript export method - #8645

Merged
ArgoZhang merged 6 commits into
mainfrom
Table:FitAllColumnWidth
Oct 30, 2026

Hidden character warning

The head ref may contain hidden characters: "Table\uff1aFitAllColumnWidth"
Merged

ArgoZhang merged 6 commits into
mainfrom
Table:FitAllColumnWidth

Conversation

@AApuci

@AApuci AApuci commented Oct 29, 2026 •

Copy link
Copy Markdown
Collaborator

auto-fit every .col-resizer in the table. It calls autoFitColumnWidth with notify=false for each column to avoid multiple callbacks, then persists the column state and invokes the resizeColumnCallback once using the first column name.

Link issues

fixes #8644

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 reliable batch auto-fitting for visible table columns with consolidated state updates and notifications.

New Features:

  • Add support for fitting all visible, resizable table columns to their rendered content in one operation.

Bug Fixes:

  • Exclude empty and detail rows, spanning cells, and nested table elements from column auto-fit calculations.

Enhancements:

  • Persist the resulting column state and issue a single batch resize callback after fitting multiple columns.
  • Clarify table auto-fit and resize callback behavior in public API documentation.

Tests:

  • Extend table tests to cover batch resize callbacks and empty-row rendering.

auto-fit every .col-resizer in the table. It calls autoFitColumnWidth with notify=false for each column to avoid multiple callbacks, then persists the column state and invokes the resizeColumnCallback once using the first column name.
@bb-auto
bb-auto Bot requested a review from ArgoZhang October 29, 2026 14:43
@sourcery-ai

sourcery-ai Bot commented Oct 29, 2026 •

Copy link
Copy Markdown
Contributor

Reviewer's Guide

Implements fitAllColumnWidth by sequentially auto-fitting all table columns without intermediate callbacks, then persisting the combined column state and issuing one resize notification; existing single-column auto-fit behavior remains the default.

Sequence diagram for fitting all table columns

sequenceDiagram
    participant Caller
    participant Table
    participant Column as col-resizer
    participant Storage
    participant Callback

    Caller->>Table: fitAllColumnWidth(id)
    Table->>Table: querySelectorAll('.col-resizer')
    loop each column
        Table->>Column: autoFitColumnWidth(table, col, false)
        Column-->>Table: updated width
    end
    Table->>Table: getColumnStateObject(table)
    Table->>Storage: saveColumnStateToLocalstorage(table, state)
    Table->>Callback: invokeMethodAsync(resizeColumnCallback, firstColumnName, state)
Loading

File-Level Changes

Change Details Files
Add a table-level operation to auto-fit every resizable column while consolidating persistence and callback notification.
  • Query all column resizers from the first table element and auto-fit them sequentially.
  • Suppress per-column notifications during fitting, then save the final aggregate column state.
  • Invoke the resize callback once using the first column name and the resulting state.
src/BootstrapBlazor/Components/Table/Table.razor.js
Extend single-column auto-fit to optionally defer state notification.
  • Add a notification flag that defaults to enabled for existing behavior.
  • Return after resizing and UI cleanup when notification is disabled; retain persistence and callback handling otherwise.
src/BootstrapBlazor/Components/Table/Table.razor.js

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

@codecov

codecov Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (fa3eb7d) to head (7ba8225).

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #8645   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          776       776           
  Lines        35234     35234           
=========================================
  Hits         35234     35234           
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 Harness.
📢 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.

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="src/BootstrapBlazor/Components/Table/Table.razor.js" line_range="133" />
<code_context>
+
+    if (columns.length > 0) {
+        for (const col of columns) {
+            await autoFitColumnWidth(table, col, false);
+        }
+
</code_context>
<issue_to_address>
**Fixed columns overlap after fitting**

When the table has resizable fixed columns whose fitted widths differ from their previous widths, `autoFitColumnWidth` changes each column’s width but does not recalculate the `left`/`right` offsets of neighboring fixed columns. Unlike the drag-resize path, which calls `resizeNextFixedColumnWidth`, this loop leaves those offsets stale, so fitting fixed columns causes them to overlap or leave gaps.

Recalculate fixed-column offsets after fitting the columns, using the resulting widths.
</issue_to_address>

### Comment 2
<location path="src/BootstrapBlazor/Components/Table/Table.razor.js" line_range="143" />
<code_context>
+        await table.invoke.invokeMethodAsync(
+            table.options.resizeColumnCallback,
+            getColumnName(columns[0]),
+            state
+        );
+    }
</code_context>
<issue_to_address>
**Bulk resize reports one column**

When a consumer uses the callback’s name argument to identify the changed column, `fitAllColumnWidth` passes only the first column name to `ResizeColumnCallback`, so `OnTableColumnClientStatusChanged` consumers that use the name to identify which field changed are told that only that column changed, despite the state containing widths for all columns.

Provide a batch callback contract that identifies all changed columns, or document that this operation reports the first column as a batch marker and ensure consumers persist the full state rather than updating only the named field.
</issue_to_address>

Sourcery assessment

Needs a human reviewer. 2 findings to address first, and if the auto-fit calculation is wrong, incorrect column widths can be saved in local storage and reported through the resize callback. Reverting removes the new action but not saved client-side widths; they are bounded and can be cleared or recalculated.

Blocking findings: src/BootstrapBlazor/Components/Table/Table.razor.js:133, src/BootstrapBlazor/Components/Table/Table.razor.js:143


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

@ArgoZhang ArgoZhang self-assigned this Oct 30, 2026
@bb-auto bb-auto Bot added the chore This are tasks or bot action label Oct 30, 2026
@bb-auto bb-auto Bot added this to the v11.0.0 milestone Oct 30, 2026
@ArgoZhang

ArgoZhang commented Oct 30, 2026 •

Copy link
Copy Markdown
Member

@AApuci 感谢大佬提供 PR 看到关联了 #8644 Issue 但是被您自己关闭了,我先打开,我们来复现一下

@ArgoZhang ArgoZhang changed the title fix(Table): Add fitAllColumnWidth to auto-fit all columns(#8644) fix(Table): add fitAllColumnWidth to auto-fit all columns Oct 30, 2026
Change Table.fitAllColumnWidth to pass "*" to the resizeColumnCallback instead of the first column's name. This signals that all columns were adjusted (rather than a specific column) and avoids relying on the first column identifier in the notification.
@bb-auto bb-auto Bot added bug Something isn't working and removed chore This are tasks or bot action labels Oct 30, 2026
AApuci and others added 4 commits October 30, 2026 09:07
Update comment in src/BootstrapBlazor/Components/Table/Table.razor.js to indicate the resize callback is invoked with a wildcard ('*') to notify that all columns have been resized, rather than using the first column name. This is a comment-only clarification; no functional code changes were made.
@ArgoZhang ArgoZhang changed the title fix(Table): add fitAllColumnWidth to auto-fit all columns fix(Table): add fitAllColumnWidth javascript export method Oct 30, 2026
@ArgoZhang ArgoZhang changed the title fix(Table): add fitAllColumnWidth javascript export method add fitAllColumnWidth javascript export method Oct 30, 2026
@ArgoZhang ArgoZhang changed the title add fitAllColumnWidth javascript export method fix(Table): add fitAllColumnWidth javascript export method Oct 30, 2026
@ArgoZhang
ArgoZhang merged commit 4e8efea into main Oct 30, 2026
7 checks passed
@ArgoZhang
ArgoZhang deleted the Table:FitAllColumnWidth branch October 30, 2026 03:46
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): missing fitAllColumnWidth js method

2 participants