🆕 feat(DataTable): add support for displaying index column by ShowSer…

…ialNumber (#2200)
masastack · Oct 23, 2024 · 0941bb5 · 0941bb5
1 parent 476ed25
commit 0941bb5
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 17 deletions.
diff --git a/src/Masa.Blazor/Components/DataTable/Header/MDataTableHeaderBase.razor b/src/Masa.Blazor/Components/DataTable/Header/MDataTableHeaderBase.razor
@@ -27,4 +27,9 @@
             </MSimpleCheckbox>
         }
     };
+
+    protected RenderFragment GenNumber() => __builder =>
+    {
+        <span>#</span>
+    };
 }
diff --git a/src/Masa.Blazor/Components/DataTable/Header/MDataTableHeaderDesktop.razor b/src/Masa.Blazor/Components/DataTable/Header/MDataTableHeaderDesktop.razor
@@ -15,6 +15,10 @@
             {
                 @GenSelectAll()
             }
+            else if (header.Value == "data-table-no")
+            {
+                @GenNumber()
+            }
             else
             {
                 @if (!DisableSort && header.Sortable && header.Align == DataTableHeaderAlign.End)

diff --git a/src/Masa.Blazor/Components/DataTable/MDataTable.razor b/src/Masa.Blazor/Components/DataTable/MDataTable.razor
@@ -3,7 +3,7 @@
 @inherits MDataIterator<TItem>
 @using Masa.Blazor.Components.DataTable
 
-<CascadingValue Value="@(Headers.Any(h => h.Fixed != DataTableFixed.None))"
+<CascadingValue Value="@HasFixedColumn"
                 Name="DataTableHasFixed">
     <MSimpleTable Height="@Height"
                   Width="@Width"
@@ -49,7 +49,7 @@
 
     private RenderFragment GenColgroup() => __builder =>
     {
-        <MDataTableColgroup Headers="@ComputedHeaders.ToList()" />
+        <MDataTableColgroup Headers="@ComputedHeaders.ToList()"/>
     };
 
     private RenderFragment GenHeaders() => __builder =>
@@ -77,7 +77,7 @@
                               OnToggleSelectAll="@ToggleSelectAll"
                               OnSort="@Sort"
                               OnGroup="@Group"
-                              @attributes="@HeaderProps" />
+                              @attributes="@HeaderProps"/>
         }
 
         @if (Loading == true)
@@ -176,14 +176,14 @@
                                  Icon
                                  Small
                                  OnClick="@ToggleFn">
-                            <MIcon Icon="@(isOpen ? "$minus" : "$plus")" />
+                            <MIcon Icon="@(isOpen ? "$minus" : "$plus")"/>
                         </MButton>
                         @($"{GetText(Options.GroupBy[0])}: {group.Key}")
                         <MButton Class="ma-0"
                                  Icon
                                  Small
                                  OnClick="@RemoveGroup">
-                            <MIcon Icon="@("$close")" />
+                            <MIcon Icon="@("$close")"/>
                         </MButton>
                     </td>
                 }
@@ -253,13 +253,13 @@
         var disabled = IsSelectable(item) == false;
         var isSelected = IsSelected(item);
         var isExpanded = IsExpanded(item);
-        
+
         Dictionary<string, object?> parameters = new()
         {
             { nameof(MDataTableRow<TItem>.Headers), ComputedHeaders },
             { nameof(MDataTableRow<TItem>.IsSelected), isSelected },
             { nameof(MDataTableRow<TItem>.IsExpanded), isExpanded },
-            { nameof(MDataTableRow<TItem>.Disabled), disabled},
+            { nameof(MDataTableRow<TItem>.Disabled), disabled },
             { nameof(MDataTableRow<TItem>.Stripe), Stripe },
             { nameof(MDataTableRow<TItem>.ItemClass), ItemClass },
             { nameof(MDataTableRow<TItem>.Index), index },
@@ -287,11 +287,13 @@
 
         bool HasSelect(ItemColProps<TItem> props) => props.Header.Value == "data-table-select" && ShowSelect;
 
+        bool HasNumber(ItemColProps<TItem> props) => props.Header.Value == "data-table-no" && ShowSerialNumber;
+
         bool HasItemColContent() => ItemColContent is not null;
 
         bool HasSlot(ItemColProps<TItem> props)
         {
-            return HasExpand(props) || HasSelect(props) || HasItemColContent();
+            return HasExpand(props) || HasSelect(props) || HasNumber(props) || HasItemColContent();
         }
 
         RenderFragment<ItemColProps<TItem>> GenRowSlot() => context => __builder =>
@@ -327,9 +329,9 @@
                     </MIcon>
                 }
             }
-            else if (HasSelect((context)))
+            else if (HasSelect(context))
             {
-            if (ItemDataTableSelectContent != null)
+                if (ItemDataTableSelectContent != null)
                 {
                     @ItemDataTableSelectContent(CreateExpandOrSelectContext())
                 }
@@ -343,6 +345,10 @@
                     </MSimpleCheckbox>
                 }
             }
+            else if (HasNumber(context))
+            {
+                <span>@(index + 1 + (Pagination.Page - 1) * Pagination.ItemsPerPage)</span>
+            }
             else if (HasItemColContent())
             {
                 @ItemColContent!(context)
@@ -385,4 +391,4 @@
         </MProgressLinear>
     };
 
-}
+}
diff --git a/src/Masa.Blazor/Components/DataTable/MDataTable.razor.cs b/src/Masa.Blazor/Components/DataTable/MDataTable.razor.cs
@@ -85,6 +85,10 @@ public partial class MDataTable<TItem> : MDataIterator<TItem>
     [Parameter]
     public bool ShowExpand { get; set; }
 
+    [Parameter]
+    [MasaApiParameter(ReleasedOn = "v1.8.0")]
+    public bool ShowSerialNumber { get; set; }
+
     [Parameter] public RenderFragment<DataTableHeaderSelectContext>? HeaderDataTableSelectContent { get; set; }
 
     [Parameter]
@@ -131,6 +135,10 @@ public DataTableResizeMode ResizeMode
     }
 
     private bool _prevIsMobile;
+
+    private bool HasFixedColumn => Headers.Any(h => h.Fixed != DataTableFixed.None);
+
+    private bool HasLeftFixedColumn => Headers.Any(h => h.Fixed == DataTableFixed.Left);
 
     public IEnumerable<DataTableHeader<TItem>> ComputedHeaders
     {
@@ -145,15 +153,40 @@ public IEnumerable<DataTableHeader<TItem>> ComputedHeaders
                           .Where(header => header.Value == null || InternalOptions.GroupBy.FirstOrDefault(by => by == header.Value) == null)
                           .ToList();
 
+            if (ShowSerialNumber)
+            {
+                var index = headers.FindIndex(r => r.Value == "data-table-no");
+                if (index == -1)
+                {
+                    headers.Insert(0, new DataTableHeader<TItem>()
+                    {
+                        Width = "56px",
+                        Value = "data-table-no",
+                        Fixed = HasLeftFixedColumn ? DataTableFixed.Left : DataTableFixed.None,
+                        Sortable = false
+                    });
+                }
+                else
+                {
+                    var header = headers[index];
+                    header.Sortable = false;
+                    if (header.Width == null)
+                    {
+                        header.Width = "56px";
+                    }
+                }
+            }
+
             if (ShowSelect)
             {
+                var fixedSelect = FixedSelect || HasLeftFixedColumn;
                 var index = headers.FindIndex(r => r.Value == "data-table-select");
                 if (index < 0)
                 {
                     headers.Insert(0, new DataTableHeader<TItem>
                     {
-                        Fixed = FixedSelect ? DataTableFixed.Left : DataTableFixed.None,
-                        Width = "56px",
+                        Fixed = fixedSelect ? DataTableFixed.Left : DataTableFixed.None,
+                        Width = "64px",
                         Value = "data-table-select",
                         Sortable = false
                     });
@@ -164,7 +197,7 @@ public IEnumerable<DataTableHeader<TItem>> ComputedHeaders
                     header.Sortable = false;
                     if (header.Width == null)
                     {
-                        header.Width = "1px";
+                        header.Width = "64px";
                     }
                 }
             }

diff --git a/src/Masa.Blazor/Components/DataTable/MobileRow/MDataTableMobileRow.razor b/src/Masa.Blazor/Components/DataTable/MobileRow/MDataTableMobileRow.razor
@@ -5,6 +5,11 @@
 <tr class="@GetClass()" @attributes="@Attributes">
     @foreach (var header in Headers)
     {
+        if (header.Value == "data-table-no")
+        {
+            continue;
+        }
+
         <td class="@_block.Element("mobile-row").Name">
             @{
                 if (header.Value != "data-table-select" && !HideDefaultHeader)
@@ -43,8 +48,7 @@
                     {
                         @props.Value
                     }
-                </div>
-            }
+                </div>}
         </td>
     }
-</tr>
+</tr>