Skip to content

fix(Table): add auto column width when overflow #8055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 5 commits into from
May 26, 2026
Merged

fix(Table): add auto column width when overflow #8055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
646d8d8
fix: 修复 Table 列显示隐藏时可能为零问题
ArgoZhang May 26, 2026
00f1a04
refactor: 移动 data-bb-field 到 th 上
ArgoZhang May 26, 2026
0cb1352
doc: 更新示例
ArgoZhang May 26, 2026
5e60d08
chore: bump version 10.6.4-beta01
ArgoZhang May 26, 2026
237dd56
chore: 移除 console 语句
ArgoZhang May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/BootstrapBlazor.Server/Components/Samples/Table/TablesColumnList.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@
<Table TItem="Foo" @ref="TableColumnVisible"
IsPagination="true" PageItemsSource="@PageItemsSource"
ShowColumnList="true" ShowColumnListControls="_showColumnListControls"
IsPopoverToolbarDropdownButton="_isPopoverToolbarDropdownButton"
IsStriped="true" IsBordered="true" IsMultipleSelect="true"
IsPopoverToolbarDropdownButton="_isPopoverToolbarDropdownButton" IsFixedHeader="true"
IsStriped="true" IsBordered="true" IsMultipleSelect="true" AllowResizing="true" AllowDragColumn="true"
ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowDeleteButton="false"
ShowExtendButtons="false" ClientTableName="test_table"
ShowExtendButtons="false" ClientTableName="table-column-list"
OnQueryAsync="@OnQueryAsync">
<TableColumns>
<TableColumn @bind-Field="@context.DateTime" Width="180" />
<TableColumn @bind-Field="@context.Name" />
<TableColumn @bind-Field="@context.Name" Visible="false" />
<TableColumn @bind-Field="@context.Address" Width="290" />
<TableColumn @bind-Field="@context.Education" />
<TableColumn @bind-Field="@context.Count" Visible="false" />
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/BootstrapBlazor.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>
<Version>10.6.3</Version>
<Version>10.6.4-beta01</Version>
</PropertyGroup>

<ItemGroup>
Expand Down
5 changes: 3 additions & 2 deletions src/BootstrapBlazor/Components/Table/Table.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,7 @@
var displayName = col.GetDisplayName();
<DynamicElement TagName="th" class="@GetHeaderClassString(col)"
style="@GetFixedCellStyleString(col, ActualScrollWidth)"
data-bb-field="@fieldName"
TriggerClick="col.GetSortable()" OnClick="@OnClickHeader(col)"
draggable="@DraggableString">
<div class="@GetHeaderWrapperClassString(col)">
Expand Down Expand Up @@ -364,7 +365,7 @@
FallbackPlacements="@(["bottom", "auto"])" CustomClass="popover-table-column-toolbox"
class="toolbox-icon" @onclick:stopPropagation>
<ChildContent>
<i class="@GetColumnToolboxIconClassString()" data-bb-field="@col.GetFieldName()"></i>
<i class="@GetColumnToolboxIconClassString()" data-bb-field="@fieldName"></i>
</ChildContent>
<Template>
@col.ToolboxTemplate(col)
Expand All @@ -374,7 +375,7 @@
</div>
@if (AllowResizing)
{
<span class="col-resizer" data-bb-field="@col.GetFieldName()"></span>
<span class="col-resizer"></span>
}
</DynamicElement>
}
Expand Down
96 changes: 65 additions & 31 deletions src/BootstrapBlazor/Components/Table/Table.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ const setResizeListener = table => {
}

const eff = (col, toggle) => {
const th = col.closest('th')
const th = getColumnHeader(col)
if (th.parentNode === null) {
EventHandler.off(col, 'click')
EventHandler.off(col, 'mousedown')
Expand Down Expand Up @@ -458,7 +458,7 @@ const setResizeListener = table => {
colWidth = parseInt(width)
}
else {
colWidth = getWidth(col.closest('th'));
colWidth = getResizableColumnWidth(col);
}
tableWidth = getWidth(col.closest('table'));
originalX = e.clientX ?? e.touches[0].clientX
Expand All @@ -484,7 +484,7 @@ const setResizeListener = table => {

resetColumnWidthTips(table, col);

const header = col.parentElement;
const header = getColumnHeader(col);
if (header.classList.contains('fixed')) {
resizeNextFixedColumnWidth(header, calcColWidth);
}
Expand All @@ -508,7 +508,7 @@ const setResizeListener = table => {
const state = getColumnStateObject(table);
saveColumnStateToLocalstorage(table, state);

const field = col.getAttribute('data-bb-field');
const field = getColumnName(col);
table.invoke.invokeMethodAsync(table.options.resizeColumnCallback, field, state);
}
)
Expand Down Expand Up @@ -539,7 +539,7 @@ const resetColumnWidthTips = (table, col) => {
const tip = bootstrap.Tooltip.getInstance(col);
if (tip && tip._isShown()) {
const inner = tip.tip.querySelector('.tooltip-inner');
const tipText = getColumnTooltipTitle(table.options, col.closest('th'));
const tipText = getColumnTooltipTitle(table.options, getColumnHeader(col));
inner.innerHTML = tipText;
tip._config.title = tipText;
tip.update();
Expand All @@ -551,7 +551,7 @@ const setColumnResizingListen = (table, col) => {
if (table.options.showColumnWidthTooltip) {
EventHandler.on(col, 'mouseenter', e => {
closeAllTips(table.columns, e.target);
const th = col.closest('th');
const th = getColumnHeader(col);
const tip = bootstrap.Tooltip.getOrCreateInstance(e.target, {
title: getColumnTooltipTitle(table.options, th),
trigger: 'manual',
Expand All @@ -569,35 +569,27 @@ const getColumnTooltipTitle = (options, th) => {
return `${options.columnWidthTooltipPrefix}${getWidth(th) | 0}px`;
}

const getColumnHeader = col => col.closest('th');

const getColumnName = col => getColumnHeader(col).getAttribute('data-bb-field');

const getResizableColumnWidth = col => getWidth(getColumnHeader(col)) | 0;

const indexOfCol = col => {
const th = col.closest('th');
const th = getColumnHeader(col);
const row = th.parentElement;
return [...row.children].indexOf(th);
}

const autoFitColumnWidth = async (table, col) => {
const field = col.getAttribute('data-bb-field');
const field = getColumnName(col);
const index = indexOfCol(col);
let rows = null;
if (table.thead) {
rows = [...table.tables[1].tBodies[0].rows].filter(x => !x.classList.contains('is-detail'));
}
else {
rows = [...table.tables[0].tBodies[0].rows].filter(x => !x.classList.contains('is-detail'));
}

let maxWidth = 0;
rows.forEach(row => {
const cell = row.cells[index];
maxWidth = Math.max(maxWidth, calcCellWidth(cell));
});

let maxWidth = getColumnMaxCellWidth(table, index);

if (table.options.fitColumnWidthIncludeHeader) {
const th = col.closest('th');
const span = th.querySelector('.table-cell');
const thStyle = getComputedStyle(th);
const margin = parseFloat(thStyle.getPropertyValue('padding-left')) + parseFloat(thStyle.getPropertyValue('padding-right'))
maxWidth = Math.max(maxWidth, calcCellWidth(span) + margin);
const th = getColumnHeader(col);
maxWidth = Math.max(maxWidth, getCellWidth(th));
}

if (maxWidth > 0) {
Expand Down Expand Up @@ -626,6 +618,31 @@ const autoFitColumnWidth = async (table, col) => {
}
}

const getColumnMaxCellWidth = (table, index) => {
let rows = null;
let maxWidth = 0;
if (table.thead) {
rows = [...table.tables[1].tBodies[0].rows].filter(x => !x.classList.contains('is-detail'));
}
else {
rows = [...table.tables[0].tBodies[0].rows].filter(x => !x.classList.contains('is-detail'));
}

rows.forEach(row => {
const cell = row.cells[index];
maxWidth = Math.max(maxWidth, calcCellWidth(cell));
});

return maxWidth;
}

const getCellWidth = cell => {
const span = cell.querySelector('.table-cell');
const cellStyle = getComputedStyle(cell);
const margin = parseFloat(cellStyle.getPropertyValue('padding-left')) + parseFloat(cellStyle.getPropertyValue('padding-right'))
return calcCellWidth(span) + margin;
}

const formControlSelector = 'input.form-control:not([type="hidden"]), textarea.form-control';

const getHorizontalWidth = style => {
Expand Down Expand Up @@ -969,8 +986,8 @@ const getColumnStateObject = table => {
return {
cols: table.columns.map(col => {
return {
name: col.getAttribute('data-bb-field'),
width: getWidth(col.closest('th')) | 0,
name: getColumnName(col),
width: getResizableColumnWidth(col),
visible: true
}
}),
Expand All @@ -979,9 +996,9 @@ const getColumnStateObject = table => {
}

const getColumnWidth = (col, columns) => {
const column = columns.find(i => i.getAttribute('data-bb-field') === col.name);
const column = columns.find(i => getColumnName(i) === col.name);
if (column) {
const width = getWidth(column.closest('th')) | 0;
const width = getResizableColumnWidth(column);
return width > 0 ? width : null;
}
else if (col.width) {
Expand Down Expand Up @@ -1013,7 +1030,7 @@ const getColumnWidthStateObject = table => {
const tableWidth = getWidth(table.tables[0]);
return {
cols: cols.map(col => {
return { "width": getWidth(col.closest('th')) | 0, "name": col.getAttribute('data-bb-field') }
return { "width": getResizableColumnWidth(col), "name": getColumnName(col) }
}),
table: tableWidth | 0
}
Expand Down Expand Up @@ -1089,6 +1106,7 @@ const resetColumnListPopover = table => {

const resetColumns = (table, options) => {
setResizeListener(table);
setColSize(table, options);

Comment thread
ArgoZhang marked this conversation as resolved.
const { columnStates, allowDragColumn } = options;
const { options: { tableName } } = table;
Expand All @@ -1102,6 +1120,22 @@ const resetColumns = (table, options) => {
}
}

const setColSize = (table, options) => {
var zeroWidthColumns = options.columnStates.filter(i => i.width === null && i.visible === true);
zeroWidthColumns.forEach(col => {
const headerCollection = [...table.tables[0].querySelectorAll('thead > tr > th')];
const th = headerCollection.find(i => i.getAttribute('data-bb-field') === col.name);
if (th.offsetWidth === 0) {
const width = getCellWidth(th);
const colIndex = headerCollection.indexOf(th);
col.width = Math.max(width, getColumnMaxCellWidth(table, colIndex));
table.tables.forEach(table => {
table.querySelectorAll('colgroup col')[colIndex].style.width = `${col.width}px`;
});
}
});
}
Comment thread
ArgoZhang marked this conversation as resolved.

const updateSortTooltip = table => {
const el = table.el
const span = el.querySelector('.sortable .table-text[aria-describedby]')
Expand Down
Loading