Skip to content

fix(Table): synchronize resized widths and fixed-column offsets #8479

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

Open
Tony-ST0754 wants to merge 11 commits into
base: main
Choose a base branch
from
Open

fix(Table): synchronize resized widths and fixed-column offsets #8479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cba7354
test:固定列拖动列宽测试，还有问题
Tony-ST0754 Sep 16, 2026
d69e436
refactor:补充拖动列宽存的题，左右固定列已测试
Tony-ST0754 Sep 17, 2026
57081a0
refactor:将所有非用户数据列的th上style里面加上width值，以保证表格显示
Tony-ST0754 Sep 17, 2026
a8e39a0
refacotr:拖动列宽时，计算的表格宽度应当以colgroup中的col的值为准，强化以免产生问题
Tony-ST0754 Sep 17, 2026
05fac3f
Merge branch 'main' into test-TableAllowResize
ArgoZhang Sep 18, 2026
8804f9a
refactor:重构表格拖动列宽逻辑
Tony-ST0754 Sep 22, 2026
1e45ca3
fix:修正与扩展列相关的bug
Tony-ST0754 Sep 23, 2026
5e8979a
test:补充单元测试完善覆盖率
Tony-ST0754 Sep 23, 2026
9329d04
refactor: 修复调整宽度后 toggle 列显示状态后宽度重置问题
ArgoZhang Sep 28, 2026
c92756e
refactor: 更改方法名提高可读性
ArgoZhang Sep 28, 2026
800d1f4
Merge branch 'main' into test-TableAllowResize
ArgoZhang Sep 28, 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
62 changes: 33 additions & 29 deletions src/BootstrapBlazor/Components/Table/Table.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,8 @@

@code {
RenderFragment RenderFixTableHeader =>
@<div class="table-fixed-header">
@<div class="@FixedHeaderClassString">
<table class="@TableClassName" style="@GetTableStyleString(true)">
@RenderColGroup(true)
@RenderHeader(true)
</table>
</div>;
Expand All @@ -101,11 +100,14 @@

RenderFragment<bool> RenderTable => hasHeader =>
@<table class="@TableClassName" style="@GetTableStyleString(hasHeader)">
@RenderColGroup(false)
@if (hasHeader)
{
@RenderHeader(false)
}
else
{
@RenderSizingHeader(false)
}
<tbody>
@if (ScrollMode == ScrollMode.Virtual)
{
Expand Down Expand Up @@ -226,50 +228,56 @@
}
</table>;

RenderFragment<bool> RenderColGroup => hasScroll =>
@<colgroup>
RenderFragment<bool> RenderSizingHeader => hasScroll =>
@<thead class="table-sizing-header" aria-hidden="true">
@RenderSizingRow(hasScroll)
</thead>;

RenderFragment<bool> RenderSizingRow => hasScroll =>
@<tr class="table-sizing-row" data-bb-sizing-row="true" aria-hidden="true">
@if (ShowDetails())
{
<col style="@GetColWidthString(DetailColumnWidth)" />
<th style="@GetColumnWidthStyleString(DetailColumnWidth)"></th>
}
@if (IsMultipleSelect)
{
<col style="@GetColWidthString(MultiColumnWidth)" />
<th style="@GetColumnWidthStyleString(MultiColumnWidth)"></th>
}
@if (ShowLineNo)
{
<col style="@GetColWidthString(LineNoColumnWidth)" />
<th style="@GetColumnWidthStyleString(LineNoColumnWidth)"></th>
}
@if (ShowExtendButtons && IsExtendButtonsInRowHeader)
{
<col style="@GetColWidthString(ExtendButtonColumnWidth)" />
<th style="@GetColumnWidthStyleString(ExtendButtonColumnWidth)"></th>
}
@foreach (var col in _tableColumnStates)
{
if (col.Visible)
{
<col style="@GetColWidthString(col.Width)" />
<th data-bb-field="@col.Name" style="@GetColumnWidthStyleString(col.Width)"></th>
}
}
@if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
{
<col style="@GetColWidthString(ExtendButtonColumnWidth)" />
<th style="@GetColumnWidthStyleString(ExtendButtonColumnWidth)"></th>
}
@if (hasScroll)
{
<col style="@ScrollWidthString" />
<th style="@GetColumnWidthStyleString(ActualScrollWidth)"></th>
}
</colgroup>;
</tr>;

RenderFragment<bool> RenderHeader => hasScroll =>
@<thead class="@HeaderClass">
@if (MultiHeaderTemplate != null)
{
@RenderSizingRow(hasScroll)
@MultiHeaderTemplate
}
@if (GetShowHeader())
{
<tr>
<tr data-bb-header-row="true">
@if (ShowDetails())
{
<th class="@DetailColumnClassString" style="@DetailColumnStyleString">
Expand Down Expand Up @@ -380,9 +388,7 @@
}
@if (hasScroll)
{
<th class="fixed-scroll">
<div class="table-cell"><span>&nbsp;</span></div>
</th>
<th class="fixed-scroll" style="@ScrollColumnStyleString"></th>
}
</tr>
}
Expand All @@ -391,25 +397,25 @@
<tr class="filter-header">
@if (ShowDetails())
{
<th>
<th class="@DetailColumnClassString" style="@DetailColumnStyleString">
<div class="table-cell">&nbsp;</div>
</th>
}
@if (IsMultipleSelect)
{
<th>
<th class="@MultiColumnClassString" style="@MultiColumnStyleString">
<div class="table-cell">&nbsp;</div>
</th>
}
@if (ShowLineNo)
{
<th>
<th class="@LineNoColumnClassString" style="@LineNoColumnStyleString">
<div class="table-cell">&nbsp;</div>
</th>
}
@if (ShowExtendButtons && IsExtendButtonsInRowHeader)
{
<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(CalcMargin())">
<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsStyleString(CalcMargin())">
<div class="table-cell">&nbsp;</div>
</th>
}
Expand All @@ -429,15 +435,13 @@
}
@if (ShowExtendButtons && !IsExtendButtonsInRowHeader)
{
<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(ActualScrollWidth)">
<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsStyleString(ActualScrollWidth)">
<div class="table-cell">&nbsp;</div>
</th>
}
@if (hasScroll)
{
<th class="fixed-scroll">
<div class="table-cell"><span>&nbsp;</span></div>
</th>
<th class="fixed-scroll" style="@ScrollColumnStyleString"></th>
}
</tr>
}
Expand All @@ -454,7 +458,7 @@
OnDoubleClick="() => DoubleClickRow(item)">
@if (ShowDetails())
{
<td class="@DetailColumnClassString" style="@DetailColumnStyleString">
<td class="@DetailColumnClassString" style="@DetailColumnFixedStyleString">
<div class="@GetDetailBarClassString(item)">
@if (ShowDetailRow == null || ShowDetailRow(item))
{
Expand All @@ -466,7 +470,7 @@
}
@if (IsMultipleSelect)
{
<td class="@MultiColumnClassString" style="@MultiColumnStyleString">
<td class="@MultiColumnClassString" style="@MultiColumnFixedStyleString">
<div class="table-cell">
@if (GetShowRowCheckbox(item))
{
Expand All @@ -479,7 +483,7 @@
}
@if (ShowLineNo)
{
<td class="@LineNoColumnClassString" style="@LineNoColumnStyleString">
<td class="@LineNoColumnClassString" style="@LineNoColumnFixedStyleString">
<div class="@LineCellClassString">@GetLineNo(item)</div>
</td>
}
Expand Down Expand Up @@ -622,7 +626,7 @@
</Button>;

RenderFragment RenderExtendButtonsHeader =>
@<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsColumnStyleString(ActualScrollWidth)">
@<th class="@ExtendButtonsColumnClass" style="@GetFixedExtendButtonsStyleString(ActualScrollWidth)">
<div class="@ExtendButtonsCellClassString">
@ColumnButtonTemplateHeaderText
</div>
Expand Down
42 changes: 26 additions & 16 deletions src/BootstrapBlazor/Components/Table/Table.razor.Sort.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ protected Func<Task> OnClickHeader(ITableColumn col) => async () =>

private string? LineNoColumnClassString => CssBuilder.Default()
.AddClass("fixed", FixedLineNoColumn)
.AddClass("fr", IsLastLineNoColumn())
.AddClass("fr", IsLastFixedLineNoColumn())
.Build();

private int LineNoColumnLeft()
Expand Down Expand Up @@ -175,11 +175,17 @@ private int MultipleSelectColumnLeft()

private bool GetFixedLineNoColumn => FixedLineNoColumn && ShowLineNo;

private string? DetailColumnStyleString => GetFixedDetailRowHeaderColumn ? "left: 0;" : null;
private string? DetailColumnFixedStyleString => GetFixedDetailRowHeaderColumn ? "left: 0;" : null;

private string? LineNoColumnStyleString => GetFixedLineNoColumn ? $"left: {LineNoColumnLeft()}px;" : null;
private string? DetailColumnStyleString => GetNonDataColumnStyleString(DetailColumnFixedStyleString, DetailColumnWidth);

private string? MultiColumnStyleString => GetFixedMultipleSelectColumn ? $"left: {MultipleSelectColumnLeft()}px;" : null;
private string? LineNoColumnFixedStyleString => GetFixedLineNoColumn ? $"left: {LineNoColumnLeft()}px;" : null;

private string? LineNoColumnStyleString => GetNonDataColumnStyleString(LineNoColumnFixedStyleString, LineNoColumnWidth);

private string? MultiColumnFixedStyleString => GetFixedMultipleSelectColumn ? $"left: {MultipleSelectColumnLeft()}px;" : null;

private string? MultiColumnStyleString => GetNonDataColumnStyleString(MultiColumnFixedStyleString, MultiColumnWidth);

private int MultiColumnWidth => ShowCheckboxText ? ShowCheckboxTextColumnWidth :
TableSize == TableSize.Normal
Expand All @@ -205,7 +211,7 @@ private int MultipleSelectColumnLeft()
/// </summary>
protected string? FixedExtendButtonsColumnClassString => CssBuilder.Default("table-column-button")
.AddClass("fixed", FixedExtendButtonsColumn)
.AddClass("fixed-right", !IsExtendButtonsInRowHeader)
.AddClass("fixed-right", FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader)
.AddClass("fr", IsLastExtendButtonColumn())
.AddClass("fl", IsFirstExtendButtonColumn())
.Build();
Expand All @@ -216,7 +222,7 @@ private int MultipleSelectColumnLeft()
/// </summary>
protected string? ExtendButtonsColumnClass => CssBuilder.Default()
.AddClass("fixed", FixedExtendButtonsColumn)
.AddClass("fixed-right", !IsExtendButtonsInRowHeader)
.AddClass("fixed-right", FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader)
.AddClass("fr", IsLastExtendButtonColumn())
.AddClass("fl", IsFirstExtendButtonColumn())
.Build();
Expand All @@ -230,13 +236,13 @@ private int MultipleSelectColumnLeft()
.AddClass($"left: {GetExtendButtonsColumnLeftMargin()}px;", FixedExtendButtonsColumn && IsExtendButtonsInRowHeader)
.Build();

private bool IsLastDetailColumn() => !GetFixedMultipleSelectColumn && !GetFixedLineNoColumn && IsNotFixedColumn();
private bool IsLastDetailColumn() => !GetFixedMultipleSelectColumn && !GetFixedLineNoColumn && HasNoFixedColumnAfterLeadingAuxiliaryColumns();

private bool IsLastMultiColumn() => !GetFixedLineNoColumn && IsNotFixedColumn();
private bool IsLastMultiColumn() => !GetFixedLineNoColumn && HasNoFixedColumnAfterLeadingAuxiliaryColumns();

private bool IsLastLineNoColumn() => IsNotFixedColumn();
private bool IsLastFixedLineNoColumn() => GetFixedLineNoColumn && HasNoFixedColumnAfterLeadingAuxiliaryColumns();

private bool IsNotFixedColumn() => !(FixedExtendButtonsColumn && IsExtendButtonsInRowHeader) && !(GetVisibleColumns().FirstOrDefault()?.Fixed ?? false);
private bool HasNoFixedColumnAfterLeadingAuxiliaryColumns() => !(FixedExtendButtonsColumn && IsExtendButtonsInRowHeader) && !(GetVisibleColumns().FirstOrDefault()?.Fixed ?? false);

private ConcurrentDictionary<ITableColumn, bool> LastFixedColumnCache { get; } = new(ReferenceEqualityComparer.Instance);

Expand All @@ -252,7 +258,7 @@ private bool IsLastColumn(ITableColumn col) => LastFixedColumnCache.GetOrAdd(col
return ret;
});

private bool IsLastExtendButtonColumn() => IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed);
private bool IsLastExtendButtonColumn() => FixedExtendButtonsColumn && IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed && !IsFixRight(i));

private ConcurrentDictionary<ITableColumn, bool> FirstFixedColumnCache { get; } = new(ReferenceEqualityComparer.Instance);

Expand All @@ -271,20 +277,20 @@ private bool IsFirstColumn(ITableColumn col) => FirstFixedColumnCache.GetOrAdd(c
return ret;
});

private bool IsFirstExtendButtonColumn() => !IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed);
private bool IsFirstExtendButtonColumn() => FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader && !GetVisibleColumns().Any(i => i.Fixed && IsFixRight(i));

private int GetExtendButtonsColumnLeftMargin()
{
var width = 0;
if (ShowDetails())
if (GetFixedDetailRowHeaderColumn)
{
width += DetailColumnWidth;
}
if (ShowLineNo)
if (GetFixedLineNoColumn)
{
width += LineNoColumnWidth;
}
if (FixedMultipleColumn)
if (GetFixedMultipleSelectColumn)
{
width += MultiColumnWidth;
}
Expand Down Expand Up @@ -373,6 +379,10 @@ string GetFixedHeaderStyleString() => IsFixedHeader
{
width += LineNoColumnWidth;
}
if (ShowExtendButtons && FixedExtendButtonsColumn && IsExtendButtonsInRowHeader)
{
width += ExtendButtonColumnWidth;
}
while (index > start)
{
var column = columns[start++];
Expand All @@ -393,7 +403,7 @@ string GetFixedHeaderStyleString() => IsFixedHeader
var column = columns[i];
width += GetFixedColumnWidth(column);
}
if (ShowExtendButtons && FixedExtendButtonsColumn)
if (ShowExtendButtons && FixedExtendButtonsColumn && !IsExtendButtonsInRowHeader)
{
width += ExtendButtonColumnWidth;
}
Expand Down
Loading
Loading