fix(Table): add auto column width when overflow

[ArgoZhang]

Link issues

fixes #8054

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

Improve table column auto-sizing and state handling for resizable, draggable columns with overflow.

New Features:

• Add automatic width calculation for columns with zero stored width, including header and cell content when overflow occurs.

Bug Fixes:

• Ensure column resize, tooltip, and auto-fit logic correctly target the header cell and use consistent column identifiers.
• Fix persistence and restoration of column widths by centralizing column name and width retrieval logic.

Enhancements:

• Refactor table column sizing utilities into reusable helpers for header lookup, column name resolution, and cell width computation.
• Update table column list sample to demonstrate fixed headers, column resizing/dragging, and column visibility toggling.
• Attach data-bb-field to header cells instead of individual controls to simplify DOM querying for column metadata.

[sourcery-ai]

Reviewer's Guide

Refactors table column width/metadata handling to centralize header and width calculations, adds automatic width computation for previously zero-width visible columns on reset, and updates the sample Table usage accordingly.

File-Level Changes

Change	Details	Files
Centralize column header, field name, and resizable width accessors in table JS and use them consistently across resize, tooltip, state, and auto-fit logic.	Introduce helper functions to get a column header element, column name, and resizable column width. Replace direct DOM queries and attribute access (closest('th'), getAttribute('data-bb-field'), getWidth(th)) with the new helper functions throughout resize and tooltip handlers. Adjust indexOfCol, autoFitColumnWidth, column state persistence, and width restoration to use the new helpers for consistency and robustness.	src/BootstrapBlazor/Components/Table/Table.razor.js
Improve auto-fit and initial sizing logic by computing column widths based on actual cell content, including header cells, and applying those widths to zero-width visible columns when resetting columns.	Extract logic to compute maximum data cell width for a column and to compute a single cell’s width including padding. Refactor autoFitColumnWidth to reuse these helpers and include header cell width via getCellWidth instead of duplicating calculations. Add setColSize, called during resetColumns, to detect visible columns with null width and zero rendered width, compute appropriate width based on header and body cells, and apply it to corresponding colgroup entries for all tables.	src/BootstrapBlazor/Components/Table/Table.razor.js
Wire up data-bb-field consistently from Razor to JS for headers and toolbox icons while decoupling the resizer span from field attributes, and update the sample table configuration to demonstrate the new behavior.	Add data-bb-field to header th elements using the computed fieldName and use that same fieldName for the column toolbox icon instead of recomputing. Remove data-bb-field from the resizer span, relying on header-level metadata and JS helpers instead. Update the TablesColumnList sample to enable fixed header, resizing, and drag-and-drop, change the client table name, and adjust column visibility to better exercise column list behavior.	src/BootstrapBlazor/Components/Table/Table.razor src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.razor

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#8054	Ensure that when multiple table columns overflow the container and column visibility is toggled, any previously hidden or affected columns do not end up with zero width but instead automatically get an appropriate width based on their content.	✅

Possibly linked issues

• bug(Table): 多列宽超出容器宽度时切换列显示时列宽可能为零 #8054: They both fix the bug where resized table columns get incorrect widths after toggling column visibility.
• bug(Table): 多列宽超出容器宽度时切换列显示时列宽可能为零 #8054: The PR rewrites column width calculation and auto-fit logic, directly fixing the incorrect rendered column widths described.
• bug(Table): 多列宽超出容器宽度时切换列显示时列宽可能为零 #8054: The PR rewrites column resize/auto-fit logic so double-click resizing works correctly even with detail rows.

---

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

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• There is a stray console.log(table, options); in resetColumns that should be removed or guarded behind a debug flag before merging.
• In setColSize, consider reusing the existing helper functions (getColumnHeader, getColumnName, getColumnMaxCellWidth) instead of directly querying attributes and DOM again, to keep the column access patterns consistent and reduce duplication.
• setColSize assumes options.columnStates is always defined and that col.width is explicitly null; defensive checks and possibly treating undefined the same as null would make this more robust to missing or partially populated state.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- There is a stray `console.log(table, options);` in `resetColumns` that should be removed or guarded behind a debug flag before merging.
- In `setColSize`, consider reusing the existing helper functions (`getColumnHeader`, `getColumnName`, `getColumnMaxCellWidth`) instead of directly querying attributes and DOM again, to keep the column access patterns consistent and reduce duplication.
- `setColSize` assumes `options.columnStates` is always defined and that `col.width` is explicitly `null`; defensive checks and possibly treating `undefined` the same as `null` would make this more robust to missing or partially populated state.

---

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

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b58289b) to head (237dd56).

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #8055   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          766       766           
  Lines        34157     34155    -2     
  Branches      4697      4697           
=========================================
- Hits         34157     34155    -2     

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.

[Copilot]

Pull request overview

This PR addresses table column width persistence and auto-sizing when toggling column visibility causes overflow scenarios that can result in zero-width columns (fixes #8054). It refactors client-side column width/name lookup to rely on header metadata and adds logic to compute a fallback width from header + cell content when needed.

Changes:

• Move data-bb-field to the header <th> and update resizing/tooltip/state code to resolve column name/width via the header.
• Refactor column auto-fit sizing to reuse helpers for max cell width and header/cell measurement.
• Add a setColSize pass during resetColumns to auto-calculate widths for visible columns that have null stored widths.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/BootstrapBlazor/Components/Table/Table.razor.js	Refactors resize/tooltip/state helpers and adds auto-sizing for null column widths during column reset.
src/BootstrapBlazor/Components/Table/Table.razor	Moves data-bb-field to <th> and removes it from the resizer element to support the new JS lookup approach.
src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.razor	Updates the sample to demonstrate fixed header + resizing/dragging and to better exercise column visibility toggling.

---

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