fix(module: table): column title align incorrectly when filterable (#3023)

This commit is contained in:
James Yeung 2023-01-18 11:02:19 +08:00 committed by GitHub
parent 95a4628c6d
commit c35cd30f37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 82 deletions

View File

@ -12,82 +12,84 @@ else if (Hidden)
}
else if (IsPlaceholder)
{
<td style="padding: 0px; border: 0px; height: 0px;"></td>
<td style="padding: 0px; border: 0px; height: 0px;"></td>
}
else if (IsMeasure)
{
<td style="padding: 0px; border: 0px; height: 0px;"><div style="height: 0px; overflow: hidden;">&nbsp;</div></td>
<td style="padding: 0px; border: 0px; height: 0px;"><div style="height: 0px; overflow: hidden;">&nbsp;</div></td>
}
else if (IsColGroup)
{
@if (AppendExpandColumn)
{
<col class="ant-table-expand-icon-col">
}
@if (AppendExpandColumn)
{
<col class="ant-table-expand-icon-col">
}
if (Width != null)
{
<col style="width: @((CssSizeLength)Width); min-width: @((CssSizeLength)Width);">
}
else
{
<col />
}
if (Width != null)
{
<col style="width: @((CssSizeLength)Width); min-width: @((CssSizeLength)Width);">
}
else
{
<col />
}
}
else if (IsHeader && HeaderColSpan != 0)
{
@if (AppendExpandColumn)
{
<th class="ant-table-cell ant-table-row-expand-icon-cell"></th>
}
@if (AppendExpandColumn)
{
<th class="ant-table-cell ant-table-row-expand-icon-cell"></th>
}
<th class="@ClassMapper.Class" style="@FixedStyle @HeaderStyle" colspan="@HeaderColSpan">
@if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
}
</th>
<th class="@ClassMapper.Class" style="@FixedStyle @HeaderStyle" colspan="@HeaderColSpan">
<span class="ant-table-column-title">
@if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
}
</span>
</th>
}
else if (!IsHeader && RowSpan != 0 && ColSpan != 0)
{
@if (AppendExpandColumn)
{
<td class="ant-table-cell ant-table-row-expand-icon-cell">
@if (Table.RowExpandable(RowData) && (!Table.TreeMode || !RowData.HasChildren))
{
<button type="button" @onclick="ToggleTreeNode"
class="ant-table-row-expand-icon @(RowData.Expanded?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")"
aria-label="@(RowData.Expanded?Table.Locale.Collapse:Table.Locale.Expand)"></button>
}
</td>
}
@if (AppendExpandColumn)
{
<td class="ant-table-cell ant-table-row-expand-icon-cell">
@if (Table.RowExpandable(RowData) && (!Table.TreeMode || !RowData.HasChildren))
{
<button type="button" @onclick="ToggleTreeNode"
class="ant-table-row-expand-icon @(RowData.Expanded?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")"
aria-label="@(RowData.Expanded?Table.Locale.Collapse:Table.Locale.Expand)"></button>
}
</td>
}
<td class="@ClassMapper.Class" style="@FixedStyle @Style" rowspan="@RowSpan" colspan="@ColSpan" data-label="@Context.HeaderColumns[ColIndex].Title">
@if (ColIndex == Table.TreeExpandIconColumnIndex && Table.TreeMode)
{
<span class="ant-table-row-indent indent-level-@RowData.Level" style="padding-left: @((CssSizeLength)(RowData.Level * Table.IndentSize));"></span>
@if (RowData.HasChildren)
{
<button type="button" @onclick="ToggleTreeNode" class="ant-table-row-expand-icon @(RowData?.Expanded==true?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")" aria-label="@(RowData?.Expanded==true?Table.Locale.Collapse:Table.Locale.Expand)"></button>
}
else
{
<button type="button" class="ant-table-row-expand-icon ant-table-row-expand-icon-spaced" aria-label="@Table.Locale.Expand"></button>
}
}
<td class="@ClassMapper.Class" style="@FixedStyle @Style" rowspan="@RowSpan" colspan="@ColSpan" data-label="@Context.HeaderColumns[ColIndex].Title">
@if (ColIndex == Table.TreeExpandIconColumnIndex && Table.TreeMode)
{
<span class="ant-table-row-indent indent-level-@RowData.Level" style="padding-left: @((CssSizeLength)(RowData.Level * Table.IndentSize));"></span>
@if (RowData.HasChildren)
{
<button type="button" @onclick="ToggleTreeNode" class="ant-table-row-expand-icon @(RowData?.Expanded==true?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")" aria-label="@(RowData?.Expanded==true?Table.Locale.Collapse:Table.Locale.Expand)"></button>
}
else
{
<button type="button" class="ant-table-row-expand-icon ant-table-row-expand-icon-spaced" aria-label="@Table.Locale.Expand"></button>
}
}
@if (CellRender != null)
{
var cellData = new CellData(RowData);
@CellRender(cellData)
}
else
{
@ChildContent
}
</td>
@if (CellRender != null)
{
var cellData = new CellData(RowData);
@CellRender(cellData)
}
else
{
@ChildContent
}
</td>
}

View File

@ -51,13 +51,9 @@ else if (IsHeader && HeaderColSpan != 0)
{
@FilterToolTipSorter
}
else if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
@ColumnTitle()
}
</th>
</CascadingValue>
@ -114,18 +110,23 @@ else if (IsBody && RowSpan != 0 && ColSpan != 0)
@code
{
RenderFragment ColumnTitle()
{
return @<span class="ant-table-column-title">
@if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
}
</span>;
}
RenderFragment SortHeader =>
@<Template>
<span class="ant-table-column-title">
@if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
}
</span>
@ColumnTitle()
@{
bool hasDescendingSorter = SortDirection.Descending.IsIn(SortDirections);
bool hasAscendingSorter = SortDirection.Ascending.IsIn(SortDirections);
@ -175,13 +176,9 @@ else if (IsBody && RowSpan != 0 && ColSpan != 0)
{
@ToolTipSorter
}
else if (TitleTemplate != null)
{
@TitleTemplate
}
else
{
@Title
@ColumnTitle()
}
<Dropdown Trigger="new[] { Trigger.Click }" Visible="_filterOpened" Placement="Placement.BottomRight" OnMaskClick="() => { if (_filterOpened) FilterConfirm(); }">