Added Table Component

Enciphered.Blazor.UIComponents.Demo/Components/Pages/Weather.razor

@@ -1,4 +1,5 @@
 @page "/weather"
+@using Enciphered.Blazor.UIComponents
 @attribute [StreamRendering]
 
 <PageTitle>Weather</PageTitle>
@@ -13,27 +14,20 @@
 }
 else
 {
-    <table class="table">
+    <Table Items="forecasts">
-        <thead>
+        <Columns>
-            <tr>
             <th>Date</th>
             <th aria-label="Temperature in Celsius">Temp. (C)</th>
             <th aria-label="Temperature in Farenheit">Temp. (F)</th>
             <th>Summary</th>
-            </tr>
+        </Columns>
-        </thead>
+        <RowTemplate Context="forecast">
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
             <td>@forecast.Date.ToShortDateString()</td>
             <td>@forecast.TemperatureC</td>
             <td>@forecast.TemperatureF</td>
             <td>@forecast.Summary</td>
-                </tr>
+        </RowTemplate>
-            }
+    </Table>
-        </tbody>
-    </table>
 }
 
 @code {

Enciphered.Blazor.UIComponents/Tables/Table.razor

@@ -0,0 +1,26 @@
+@namespace Enciphered.Blazor.UIComponents
+@typeparam TItem
+
+<div class="w-full overflow-auto rounded-md border border-zinc-800">
+    <table class="w-full caption-bottom text-sm">
+        <thead class="bg-zinc-900/50">
+            <tr class="border-b border-zinc-800 transition-colors">
+                @Columns
+            </tr>
+        </thead>
+        <tbody class="[&_tr:last-child]:border-0">
+            @foreach (TItem item in Items)
+            {
+                <tr class="border-b border-zinc-800 transition-colors hover:bg-zinc-900/50 text-center">
+                    @RowTemplate(item)
+                </tr>
+            }
+        </tbody>
+    </table>
+</div>
+
+@code {
+    [Parameter] public required IReadOnlyList<TItem> Items { get; set; }
+    [Parameter] public required RenderFragment Columns { get; set; }
+    [Parameter] public required RenderFragment<TItem> RowTemplate { get; set; }
+}