Table GridLines and AllowAlternatingRows added

radzenhq · Jan 21, 2025 · 097f37b · 097f37b
1 parent 524e429
commit 097f37b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 12 deletions.
diff --git a/Radzen.Blazor/RadzenTable.razor.cs b/Radzen.Blazor/RadzenTable.razor.cs
@@ -24,6 +24,20 @@ namespace Radzen.Blazor
     /// </example>
     public partial class RadzenTable : RadzenComponentWithChildren
     {
+        /// <summary>
+        /// Gets or sets the grid lines.
+        /// </summary>
+        /// <value>The grid lines.</value>
+        [Parameter]
+        public DataGridGridLines GridLines { get; set; } = DataGridGridLines.Default;
+
+        /// <summary>
+        /// Gets or sets a value indicating whether RadzenTable should use alternating row styles.
+        /// </summary>
+        /// <value><c>true</c> if RadzenTable is using alternating row styles; otherwise, <c>false</c>.</value>
+        [Parameter]
+        public bool AllowAlternatingRows { get; set; } = true;
+
         List<RadzenTableRow> rows = new List<RadzenTableRow>();
 
         /// <summary>
@@ -55,7 +69,19 @@ public void RemoveRow(RadzenTableRow row)
         /// <inheritdoc />
         protected override string GetComponentCssClass()
         {
-            return "rz-grid-table";
+            var styles = new List<string>(new string[] { "rz-grid-table" });
+
+            if (AllowAlternatingRows)
+            {
+                styles.Add("rz-grid-table-striped");
+            }
+
+            if (GridLines != DataGridGridLines.Default)
+            { 
+                styles.Add($"rz-grid-gridlines-{Enum.GetName(typeof(DataGridGridLines), GridLines).ToLower()}");
+            }
+
+            return string.Join(" ", styles);
         }
     }
 }
diff --git a/RadzenBlazorDemos/Pages/TableConfig.razor b/RadzenBlazorDemos/Pages/TableConfig.razor
@@ -1,14 +1,28 @@
-
-<RadzenTable>
-    <RadzenTableRow>
-        @for (var i = 0; i < cols; i++)
-        {
-            var col = i;
-            <RadzenTableHeaderCell>
-                @($"Column {col}")
-            </RadzenTableHeaderCell>
-        }
-    </RadzenTableRow>
+<RadzenCard Variant="Variant.Outlined" class="rz-my-4">
+    <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center">
+        <RadzenCheckBox @bind-Value=@allowAlternatingRows Name="CheckBox1" TValue="bool" />
+        <RadzenLabel Text="Allow alternating rows" Component="CheckBox1" />
+    </RadzenStack>
+    <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" AlignItems="AlignItems.Center" Style="margin-top:20px">
+        <div>GridLines:</div>
+        <RadzenSelectBar @bind-Value="@gridLines" TextProperty="Text" ValueProperty="Value"
+        Data="@(Enum.GetValues(typeof(Radzen.DataGridGridLines)).Cast<Radzen.DataGridGridLines>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
+    </RadzenStack>
+</RadzenCard>
+
+<RadzenTable GridLines="@gridLines" AllowAlternatingRows="@allowAlternatingRows">
+    <thead>
+        <RadzenTableRow>
+            @for (var i = 0; i < cols; i++)
+            {
+                var col = i;
+                <RadzenTableHeaderCell>
+                    @($"Column {col}")
+                </RadzenTableHeaderCell>
+            }
+        </RadzenTableRow>
+    </thead>
+    <tbody>
     @for (var i = 0; i < rows; i++)
     {
         var row = i;
@@ -22,8 +36,12 @@
             }
         </RadzenTableRow>
     }
+    </tbody>
 </RadzenTable>
 @code{
+    Radzen.DataGridGridLines gridLines = Radzen.DataGridGridLines.Default;
+    bool allowAlternatingRows = true;
+
     int rows = 10;
     int cols = 10;
 }