feat(module: table): add RowClassName (#1031)

* feat(module: table): add row styling * docs: add RowClassName to docs * docs: add custom row style subtext * feat(module: table): add ExpandedRowClassName * remove RowClassName for expand row * add chinese doc Co-authored-by: ElderJames <shunjiey@hotmail.com>
ant-design-blazor · Jan 24, 2021 · 8f15f8f · 8f15f8f
1 parent bf0edb4
commit 8f15f8f
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 2 deletions.
diff --git a/components/table/Table.razor b/components/table/Table.razor
@@ -171,7 +171,7 @@ RenderFragment<(Table<TItem> table, bool header)> colGroup = ctx =>
                 currentRowData.HasChildren = hasChildren;
 
                 <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" : "")">
+                    data-row-key="@(rowIndex-1)" class="ant-table-row ant-table-row-level-@level @(currentRowData.Selected ? "ant-table-row-selected" : "") @table.RowClassName(currentRowData)">
                     <CascadingValue Value="currentRowData" Name="RowData" IsFixed>
                         <CascadingValue Value="true" Name="IsBody" IsFixed>
                             @table.ChildContent(data)
@@ -184,7 +184,8 @@ RenderFragment<(Table<TItem> table, bool header)> colGroup = ctx =>
                 }
                 @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;")">
+                    <tr class="ant-table-expanded-row ant-table-expanded-row-level-1 @table.ExpandedRowClassName(currentRowData)"
+                        style="@(currentRowData.Expanded?"":"display: none;")">
                         <td colspan="@(table.ColumnContext.Columns.Count+1)" class="ant-table-cell">
                             @table.ExpandTemplate(currentRowData)
                         </td>

diff --git a/components/table/Table.razor.cs b/components/table/Table.razor.cs
@@ -93,6 +93,12 @@ public IEnumerable<TItem> DataSource
 
         [Parameter]
         public int ExpandIconColumnIndex { get; set; }
+
+        [Parameter]
+        public Func<RowData<TItem>, string> RowClassName { get; set; } = _ => "";
+
+        [Parameter]
+        public Func<RowData<TItem>, string> ExpandedRowClassName { get; set; } = _ => "";
 
         [Parameter]
         public SortDirection[] SortDirections { get; set; } = SortDirection.Preset.Default;

diff --git a/site/AntBlazor.Docs/Demos/Components/Table/demo/CustomRowStyle.razor b/site/AntBlazor.Docs/Demos/Components/Table/demo/CustomRowStyle.razor
@@ -0,0 +1,58 @@
+@using System.ComponentModel
+@using AntDesign.TableModels
+
+<Table TItem="Data" DataSource="@data" OnRowClick="OnRowClick" RowClassName="@(x => x.Data.RowClass)">
+    <Column @bind-Field="@context.Name">
+        <a>@context.Name</a>
+    </Column>
+    <Column @bind-Field="@context.Score"></Column>
+</Table>
+
+<style>
+    .danger {
+        background-color: #fff1f0;
+    }
+</style>
+
+@code{
+    Data[] data = new Data[]
+    {
+        new()
+        {
+            Key = "1",
+            Name = "John Brown",
+            Score = 95,
+        },
+        new()
+        {
+            Key = "2",
+            Name = "Jim Green",
+            Score = 87,
+        },
+        new()
+        {
+            Key = "3",
+            Name = "Joe Black",
+            Score = 65,
+        }
+    };
+
+    public class Data
+    {
+        [DisplayName("Key")]
+        public string Key { get; set; }
+
+        [DisplayName("Name")]
+        public string Name { get; set; }
+
+        [DisplayName("Score")]
+        public int Score { get; set; }
+
+        public string RowClass => Score < 70 ? "danger" : "";
+    }
+
+    void OnRowClick(RowData<Data> row)
+    {
+        Console.WriteLine($"row {row.Data.Key} was clicked");
+    }
+}
diff --git a/site/AntBlazor.Docs/Demos/Components/Table/demo/custom-row-style.md b/site/AntBlazor.Docs/Demos/Components/Table/demo/custom-row-style.md
@@ -0,0 +1,15 @@
+---
+order: 22
+title:
+  en-US: Custom Row Styling
+  zh-CN: 修改每行的样式
+---
+## en-US
+
+A solution for displaying custom styling on rows.
+> When you need to conditionally style rows based on the data provided.
+> The example highlights rows where score is < 70.
+
+## zh-CN
+
+可以使用 `RowClassName` 给特定的行设置 class。也可以用 `ExpandedRowClassName` 给特定的展开行设置 class。