ant-design-blazor/components/table/Table.razor

@namespace AntDesign
@inherits AntDomComponentBase
@using AntDesign.TableModels
@using System.Text.Json
@typeparam TItem

<div class="ant-table-wrapper">
    <Spin Spinning="Loading">
        @if (!HidePagination && PaginationPosition.Contains("top"))
        {
            <Pagination Class="@_paginationClass"
                        Total="Total"
                        PageSize="PageSize"
                        Current="PageIndex"
                        OnPageIndexChange="HandlePageIndexChange"
                        OnPageSizeChange="HandlePageSizeChange" />
        }
        <CascadingValue Value="@this" TValue="ITable">
            <div class="@ClassMapper.Class">
                @if (TitleTemplate != null || Title != null)
                {
                    <div class="ant-table-title">
                        @if (TitleTemplate != null)@TitleTemplate else @Title
                    </div>
                }
                <div class="ant-table-container">
                    @if (ScrollY != null)
                    {
                        <div class="ant-table-header" style="overflow: hidden;">
                            <table style="table-layout: fixed;">
                                @colGroup(this)
                                @header(this)
                            </table>
                        </div>
                        <div class="ant-table-body" style="overflow-y: scroll; max-height: @ScrollY;">
                            <table style="table-layout: fixed;">
                                @colGroup(this)
                                <tbody class="ant-table-tbody">
                                    <tr aria-hidden="true" class="ant-table-measure-row" style="height: 0px;">
                                        @for (var i = 0; i < ColumnContext.Columns.Count; i++)
                                        {
                                            <td style="padding: 0px; border: 0px; height: 0px;"></td>
                                        }
                                    </tr>
                                    @body(this)
                                </tbody>
                            </table>
                        </div>
                    }
                    else
                    {
                        <div class="ant-table-content">
                            <table style="table-layout: auto;">
                                @colGroup(this)
                                @header(this)
                                <tbody class="ant-table-tbody">
                                    @body(this)
                                </tbody>
                            </table>
                        </div>
                    }
                </div>
                @if (FooterTemplate != null || Footer != null)
                {
                    <div class="ant-table-footer">
                        @if (FooterTemplate != null)@FooterTemplate else @Footer
                    </div>
                }
            </div>
        </CascadingValue>
        @if (!HidePagination && PaginationPosition.Contains("bottom"))
        {
            <Pagination Class="@_paginationClass"
                        Total="Total"
                        PageSize="PageSize"
                        Current="PageIndex"
                        OnPageIndexChange="HandlePageIndexChange"
                        OnPageSizeChange="HandlePageSizeChange" />
        }
    </Spin>
</div>

@code
{
    RenderFragment<Table<TItem>> header = table =>
    @<Template>
        <thead class="ant-table-thead">
            <tr>
                <CascadingValue Name="IsHeader" Value="true">
                    <CascadingValue Value="@table.ColumnContext">
                        @if (_fieldModel != null)
                        {
                            @table.ChildContent(_fieldModel)
                        }
                    </CascadingValue>
                </CascadingValue>
                @if (table.ScrollY != null)
                {
                    <th class="ant-table-cell ant-table-cell-scrollbar"></th>
                }
            </tr>
        </thead>
    </Template>;

RenderFragment<Table<TItem>> colGroup = table =>
@<Template>
    <CascadingValue Name="IsColGroup" Value="true">
        <colgroup>
            @if (_fieldModel != null)
            {
                @table.ChildContent(_fieldModel)
            }
            @if (table.ScrollY != null)
            {
                <col style="width: @(table.ScrollBarWidth)px; min-width: @(table.ScrollBarWidth)px;" />
            }
        </colgroup>
    </CascadingValue>
</Template>;

RenderFragment<Table<TItem>> body = table =>
@<Template>

    @if (table.Total <= 0)
    {
        <tr class="ant-table-placeholder">
            <td colspan="@table.ColumnContext.Columns.Count" class="ant-table-cell">
                <Empty Simple />
            </td>
        </tr>
    }
    else if (table._showItems != null && table.ColumnContext.Columns.Count > 0)
    {
        for (int i = 0; i < table._showItems.Count(); i++)
        {
            var rowIndex = table.PageSize * (table.PageIndex - 1) + i + 1;
            var data = table._showItems.ElementAt(i);
            var cacheKey = data.GetHashCode();
            if (!table._dataSourceCache.ContainsKey(cacheKey))
            {
                table._dataSourceCache[cacheKey] = new RowData<TItem>(rowIndex, table.PageIndex, data);
            }
            var selected = table._dataSourceCache[cacheKey].Selected;
            <CascadingValue Value="@rowIndex" Name="RowIndex">
                <CascadingValue Value="table.ColumnContext">
                    <CascadingValue Value="cacheKey" Name="CacheKey">
                        <tr data-row-id="@rowIndex" class="ant-table-row ant-table-row-level-0 @(selected ? "ant-table-row-selected" : "")">
                            @table.ChildContent(data)
                        </tr>
                    </CascadingValue>
                </CascadingValue>
            </CascadingValue>
        }
    }
</Template>;
}