ant-design-blazor/components/table/Column.razor
James Yeung 715149e21f feat(module: table): sortable (#319)
* feat(module: table): add sorter

* feat: add sorter tooltip

* feat: add table change event
2020-07-08 16:12:49 +08:00

87 lines
2.1 KiB
C#

@namespace AntDesign
@inherits ColumnBase
@using AntDesign.Helpers
@using AntDesign.TableModels
@typeparam TData
@if (IsPlaceholder)
{
<td style="padding: 0px; border: 0px; height: 0px;"></td>
}
else if (IsColGroup)
{
if (Width > 0)
{
<col style="width: @(Width)px; min-width: @(Width)px;">
}
}
else if (IsHeader)
{
<th class="@ClassMapper.Class" style="@FixedStyle @Style" @onclick="HandelHeaderClick">
@if (Sortable)
{
if (ShowSorterTooltip)
{
@ToolTipSorter(this)
}
else
{
@SortHeader(this)
}
}
else
{
@HeaderTitle
}
</th>
}
else
{
<td class="@ClassMapper.Class" style="@FixedStyle @Style">
@if (CellRender != null)
{
@CellRender(Field)
}
else if (ChildContent != null)
{
@ChildContent
}
else
{
if (!string.IsNullOrWhiteSpace(Format))
{
@(Formatter<TData>.Format(Field,Format))
}
else
{
@Field
}
}
</td>
}
@code
{
string HeaderTitle => Title ?? DisplayName ?? FieldName;
readonly RenderFragment<Column<TData>> SortHeader = col =>
@<div class="ant-table-column-sorters">
<span>@col.HeaderTitle</span>
<span class="ant-table-column-sorter ant-table-column-sorter-full">
<span class="ant-table-column-sorter-inner">
<Icon Type="caret-up" Class=@($"ant-table-column-sorter-up {(col.SortModel.SortType==SortType.Ascending? "active":"")}") />
<Icon Type="caret-down" Class=@($"ant-table-column-sorter-down {(col.SortModel.SortType==SortType.Descending? "active":"")}") />
</span>
</span>
</div>;
readonly RenderFragment<Column<TData>> ToolTipSorter = col =>
@<Tooltip Class="ant-table-column-sorters-with-tooltip" Title="@col.SorterTooltip">
@col.SortHeader(col)
</Tooltip>;
}