feat(module: table): specific the position of the expand button (#1002)

* Table增加属性ExpandIconColumnIndex

* Table增加属性ExpandIconColumnIndex

* 调整Table的ExpandIconColumnIndex属性默认值为0

* 处理Table的Expand展开按钮和Tree展开按钮冲突的问题

* fix icon column index for expand row

* fix style

Co-authored-by: ElderJames <shunjiey@hotmail.com>

components/table/Column.razor

@@ -18,6 +18,11 @@ else if (IsMeasure)
 }
 else if (IsColGroup)
 {
+    @if (AppendExpandColumn)
+    {
+        <col class="ant-table-expand-icon-col">
+    }
+
     if (Width != null)
     {
         <col style="width: @((CssSizeLength)Width); min-width: @((CssSizeLength)Width);">
@@ -29,6 +34,12 @@ else if (IsColGroup)
 }
 else if (IsHeader && HeaderColSpan != 0)
 {
+
+    @if (AppendExpandColumn)
+    {
+        <th class="ant-table-cell ant-table-row-expand-icon-cell"></th>
+    }
+
     <th class="@ClassMapper.Class" style="@FixedStyle @HeaderStyle" @onclick="HandelHeaderClick" colspan="@HeaderColSpan" title="@(Ellipsis?HeaderTitle:"")">
         @if (Sortable)
         {
@@ -56,8 +67,20 @@ else if (!IsHeader && RowSpan != 0 && ColSpan != 0)
 
     var fieldText = !string.IsNullOrWhiteSpace(Format) ? Formatter<TData>.Format(Field, Format) : Field?.ToString();
 
+    @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="()=> RowData.Expanded = !RowData.Expanded"
+                        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" title="@(Ellipsis? fieldText:"")">
-        @if (ColIndex == 1 && Table.TreeMode)
+        @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)

components/table/ColumnBase.cs

@@ -65,6 +65,8 @@ namespace AntDesign
 
         public int ColIndex { get; set; }
 
+        protected bool AppendExpandColumn => Table.HasExpandTemplate && ColIndex == (Table.TreeMode ? Table.TreeExpandIconColumnIndex : Table.ExpandIconColumnIndex);
+
         protected string FixedStyle
         {
             get
@@ -107,7 +109,7 @@ namespace AntDesign
                 .GetIf(() => $"ant-table-cell-fix-{Fixed}", () => Fixed.IsIn("right", "left"))
                 .If($"ant-table-cell-fix-right-first", () => Fixed == "right" && Context?.Columns.FirstOrDefault(x => x.Fixed == "right")?.ColIndex == this.ColIndex)
                 .If($"ant-table-cell-fix-left-last", () => Fixed == "left" && Context?.Columns.LastOrDefault(x => x.Fixed == "left")?.ColIndex == this.ColIndex)
-                .If($"ant-table-cell-with-append", () => ColIndex == 1 && Table.TreeMode)
+                .If($"ant-table-cell-with-append", () => ColIndex == Table.TreeExpandIconColumnIndex && Table.TreeMode)
                 .If($"ant-table-cell-ellipsis", () => Ellipsis)
                 ;
         }

components/table/ITable.cs

@@ -1,4 +1,6 @@
-namespace AntDesign
+using AntDesign.TableModels;
+
+namespace AntDesign
 {
     public interface ITable
     {
@@ -14,6 +16,12 @@
 
         internal int ScrollBarWidth { get; }
 
+        internal int ExpandIconColumnIndex { get; }
+
+        internal int TreeExpandIconColumnIndex { get; }
+
+        internal bool HasExpandTemplate { get; }
+
         public TableLocale Locale { get; set; }
 
         internal void SelectionChanged();
@@ -33,5 +41,7 @@
         internal void HasFixRight();
 
         internal void TableLayoutIsFixed();
+
+        internal bool RowExpandable(RowData rowData);
     }
 }

components/table/Table.razor

@@ -108,10 +108,6 @@
     @<Template>
         <thead class="ant-table-thead">
             <tr>
-                @if (table.ExpandTemplate != null)
-                {
-                    <th class="ant-table-cell ant-table-row-expand-icon-cell"></th>
-                }
                 <CascadingValue Name="IsHeader" Value="true" IsFixed>
                     @table.ChildContent(_fieldModel)
                 </CascadingValue>
@@ -129,12 +125,7 @@ RenderFragment<(Table<TItem> table, bool header)> colGroup = ctx =>
         var table = ctx.table;
         var header = ctx.header;
     }
-
      <colgroup>
-         @if (table.ExpandTemplate != null)
-         {
-             <col class="ant-table-expand-icon-col">
-         }
          <CascadingValue Name="IsColGroup" Value="true" IsFixed>
              @table.ChildContent(_fieldModel)
          </CascadingValue>
@@ -180,17 +171,6 @@ RenderFragment<(Table<TItem> table, bool header)> colGroup = ctx =>
 
                 <tr @attributes="@(new Dictionary<string,object> { {"onclick", _callbackFactory.Create(table, () => table.RowClick(currentRowData)) } })"
                     data-row-key="@(rowIndex-1)" class="ant-table-row ant-table-row-level-@level @(currentRowData.Selected ? "ant-table-row-selected" : "")">
-                    @if (table.ExpandTemplate != null)
-                    {
-                        <td class="ant-table-cell ant-table-row-expand-icon-cell">
-                            @if (table.RowExpandable(currentRowData))
-                            {
-                                <button type="button" @attributes="@(new Dictionary<string,object>() { {"onclick",_callbackFactory.Create(table,() => ToggleExpandRow(currentRowData)) } })"
-                                        class="ant-table-row-expand-icon @(currentRowData.Expanded?"ant-table-row-expand-icon-expanded":"ant-table-row-expand-icon-collapsed")"
-                                        aria-label="@(currentRowData.Expanded?table.Locale.Collapse:table.Locale.Expand)"></button>
-                            }
-                        </td>
-                    }
                     <CascadingValue Value="currentRowData" Name="RowData" IsFixed>
                         <CascadingValue Value="true" Name="IsBody" IsFixed>
                             @table.ChildContent(data)
@@ -201,7 +181,7 @@ RenderFragment<(Table<TItem> table, bool header)> colGroup = ctx =>
                 {
                     @table.body((table, table.TreeChildren(data), level + 1));
                 }
-                @if (table.ExpandTemplate != null && table.RowExpandable(currentRowData))
+                @if (!hasChildren && table.ExpandTemplate != null && table.RowExpandable(currentRowData))
                 {
                     <tr class="ant-table-expanded-row ant-table-expanded-row-level-1" style="@(currentRowData.Expanded?"":"display: none;")">
                         <td colspan="@(table.ColumnContext.Columns.Count+1)" class="ant-table-cell">

components/table/Table.razor.cs

@@ -91,6 +91,9 @@ namespace AntDesign
         [Parameter]
         public int IndentSize { get; set; } = 15;
 
+        [Parameter]
+        public int ExpandIconColumnIndex { get; set; }
+
         [Inject]
         public DomEventService DomEventService { get; set; }
 
@@ -109,6 +112,7 @@ namespace AntDesign
         private bool _pingRight;
         private bool _pingLeft;
         private bool _tableLayoutIsFixed;
+        private int _treeExpandIconColumnIndex;
 
         private ElementReference _tableHeaderRef;
         private ElementReference _tableBodyRef;
@@ -116,12 +120,13 @@ namespace AntDesign
         private bool ServerSide => _total > _dataSourceCount;
 
         bool ITable.TreeMode => _treeMode;
-
         int ITable.IndentSize => IndentSize;
-
         string ITable.ScrollX => ScrollX;
         string ITable.ScrollY => ScrollY;
         int ITable.ScrollBarWidth => ScrollBarWidth;
+        int ITable.ExpandIconColumnIndex => ExpandIconColumnIndex;
+        int ITable.TreeExpandIconColumnIndex => _treeExpandIconColumnIndex;
+        bool ITable.HasExpandTemplate => ExpandTemplate != null;
 
         public void ReloadData()
         {
@@ -186,6 +191,10 @@ namespace AntDesign
             }
 
             _treeMode = TreeChildren != null && (_showItems?.Any(x => TreeChildren(x).Any()) == true);
+            if (_treeMode)
+            {
+                _treeExpandIconColumnIndex = ExpandIconColumnIndex + (_selection != null ? 1 : 0);
+            }
 
             StateHasChanged();
 
@@ -290,11 +299,6 @@ namespace AntDesign
 
         protected override bool ShouldRender() => this._shouldRender;
 
-        private static void ToggleExpandRow(RowData<TItem> rowData)
-        {
-            rowData.Expanded = !rowData.Expanded;
-        }
-
         private void RowClick(RowData<TItem> item)
         {
             if (OnRowClick.HasDelegate)
@@ -367,5 +371,10 @@ namespace AntDesign
                 await JsInvokeAsync(JSInteropConstants.UnbindTableHeaderAndBodyScroll, _tableBodyRef);
             }
         }
+
+        bool ITable.RowExpandable(RowData rowData)
+        {
+            return RowExpandable(rowData as RowData<TItem>);
+        }
     }
 }