Table demos reworked

radzenhq · Jan 23, 2025 · 13e0bba · 13e0bba
1 parent ed7c5bc
commit 13e0bba
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 22 deletions.
diff --git a/Radzen.Blazor/RadzenTable.razor.cs b/Radzen.Blazor/RadzenTable.razor.cs
@@ -31,7 +31,7 @@ public partial class RadzenTable : RadzenComponentWithChildren
         /// <inheritdoc />
         protected override string GetComponentCssClass()
         {
-            return "rz-data-grid rz-datatable rz-datatable-scrollable";
+            return $"rz-data-grid rz-datatable rz-datatable-scrollable {(CurrentStyle.ContainsKey("height") ? "rz-has-height" : "")}".Trim();
         }
 
         /// <summary>

diff --git a/RadzenBlazorDemos/Pages/TableConfig.razor b/RadzenBlazorDemos/Pages/TableConfig.razor
@@ -13,35 +13,54 @@
 <RadzenTable GridLines="@gridLines" AllowAlternatingRows="@allowAlternatingRows">
     <RadzenTableHeader>
         <RadzenTableHeaderRow>
-            @for (var i = 0; i < cols; i++)
-            {
-                var col = i;
-                <RadzenTableHeaderCell>
-                    @($"Column {col}")
-                </RadzenTableHeaderCell>
-            }
+            <RadzenTableHeaderCell>
+                Column 1
+            </RadzenTableHeaderCell>
+            <RadzenTableHeaderCell>
+                Column 2
+            </RadzenTableHeaderCell>
+            <RadzenTableHeaderCell>
+                Column 3
+            </RadzenTableHeaderCell>
         </RadzenTableHeaderRow>
     </RadzenTableHeader>
     <RadzenTableBody>
-    @for (var i = 0; i < rows; i++)
-    {
-        var row = i;
         <RadzenTableRow>
-            @for (var j = 0; j < cols; j++)
-            {
-                var cell = j;
-                <RadzenTableCell>
-                    @($"Cell {row}{cell}")
-                </RadzenTableCell>
-            }
+            <RadzenTableCell>
+                Cell 0 1
+            </RadzenTableCell>
+            <RadzenTableCell>
+                Cell 0 2
+            </RadzenTableCell>
+            <RadzenTableCell>
+                Cell 0 3
+            </RadzenTableCell>
+        </RadzenTableRow>
+        <RadzenTableRow>
+            <RadzenTableCell>
+                Cell 1 1
+            </RadzenTableCell>
+            <RadzenTableCell>
+                Cell 1 2
+            </RadzenTableCell>
+            <RadzenTableCell>
+                Cell 1 3
+            </RadzenTableCell>
+        </RadzenTableRow>
+        <RadzenTableRow>
+            <RadzenTableCell>
+                Cell 2 1
+            </RadzenTableCell>
+            <RadzenTableCell>
+                Cell 2 2
+            </RadzenTableCell>
+            <RadzenTableCell>
+                Cell 2 3
+            </RadzenTableCell>
         </RadzenTableRow>
-    }
     </RadzenTableBody>
 </RadzenTable>
 @code{
     Radzen.DataGridGridLines gridLines = Radzen.DataGridGridLines.Default;
     bool allowAlternatingRows = true;
-
-    int rows = 10;
-    int cols = 10;
 }
diff --git a/RadzenBlazorDemos/Pages/TableDynamic.razor b/RadzenBlazorDemos/Pages/TableDynamic.razor
@@ -0,0 +1,32 @@
+<RadzenTable>
+    <RadzenTableHeader>
+        <RadzenTableHeaderRow>
+            @for (var i = 0; i < cols; i++)
+            {
+                var col = i;
+                <RadzenTableHeaderCell>
+                    @($"Column {col}")
+                </RadzenTableHeaderCell>
+            }
+        </RadzenTableHeaderRow>
+    </RadzenTableHeader>
+    <RadzenTableBody>
+    @for (var i = 0; i < rows; i++)
+    {
+        var row = i;
+        <RadzenTableRow>
+            @for (var j = 0; j < cols; j++)
+            {
+                var cell = j;
+                <RadzenTableCell>
+                    @($"Cell {row} {cell}")
+                </RadzenTableCell>
+            }
+        </RadzenTableRow>
+    }
+    </RadzenTableBody>
+</RadzenTable>
+@code{
+    int rows = 10;
+    int cols = 10;
+}
diff --git a/RadzenBlazorDemos/Pages/TablePage.razor b/RadzenBlazorDemos/Pages/TablePage.razor
@@ -10,3 +10,17 @@
 <RadzenExample ComponentName="Table" Example="TableConfig">
     <TableConfig />
 </RadzenExample>
+
+<RadzenText Anchor="table#dynamic" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
+    Table with dynamic data
+</RadzenText>
+<RadzenExample ComponentName="Table" Example="TableDynamic">
+    <TableDynamic />
+</RadzenExample>
+
+<RadzenText Anchor="table#scrollable" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
+    Scrollable Table
+</RadzenText>
+<RadzenExample ComponentName="Table" Example="TableScrollable">
+    <TableScrollable />
+</RadzenExample>
diff --git a/RadzenBlazorDemos/Pages/TableScrollable.razor b/RadzenBlazorDemos/Pages/TableScrollable.razor
@@ -0,0 +1,32 @@
+<RadzenTable style="height:335px">
+    <RadzenTableHeader>
+        <RadzenTableHeaderRow>
+            @for (var i = 0; i < cols; i++)
+            {
+                var col = i;
+                <RadzenTableHeaderCell Style="width:150px">
+                    @($"Column {col}")
+                </RadzenTableHeaderCell>
+            }
+        </RadzenTableHeaderRow>
+    </RadzenTableHeader>
+    <RadzenTableBody>
+    @for (var i = 0; i < rows; i++)
+    {
+        var row = i;
+        <RadzenTableRow>
+            @for (var j = 0; j < cols; j++)
+            {
+                var cell = j;
+                <RadzenTableCell>
+                    @($"Cell {row} {cell}")
+                </RadzenTableCell>
+            }
+        </RadzenTableRow>
+    }
+    </RadzenTableBody>
+</RadzenTable>
+@code{
+    int rows = 50;
+    int cols = 50;
+}