Expose Wrapper Class for Tables

Additional Request of #513
chanan · May 3, 2022 · 3e2df65 · 3e2df65
1 parent 0b27b59
commit 3e2df65
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 12 deletions.
diff --git a/src/BlazorStrap-Docs/Samples/Content/Tables/Tables1b.razor b/src/BlazorStrap-Docs/Samples/Content/Tables/Tables1b.razor
@@ -0,0 +1,30 @@
+<BSTable IsResponsive="true" IsStriped="true">
+    <BSTHead>
+        <BSTR>
+            <BSTD>#</BSTD>
+            <BSTD>First</BSTD>
+            <BSTD>Last</BSTD>
+            <BSTD>Handle</BSTD>
+        </BSTR>
+    </BSTHead>
+    <BSTBody>
+        <BSTR>
+            <BSTD>1</BSTD>
+            <BSTD>John</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JohnDoe <br/>media.com</BSTD>
+        </BSTR>
+        <BSTR>
+            <BSTD>2</BSTD>
+            <BSTD>Jane</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JaneDoe <br/>media.com</BSTD>
+        </BSTR>
+    </BSTBody>
+    <BSTFoot>
+        <BSTR>
+            <BSTD ColSpan="4">Spanned Table Footer Here</BSTD>
+        </BSTR>
+
+    </BSTFoot>
+</BSTable>
diff --git a/src/BlazorStrap-Docs/wwwroot/Samples/Content/Tables/Tables1b.md b/src/BlazorStrap-Docs/wwwroot/Samples/Content/Tables/Tables1b.md
@@ -0,0 +1,30 @@
+<BSTable IsResponsive="true" IsStriped="true">
+    <BSTHead>
+        <BSTR>
+            <BSTD>#</BSTD>
+            <BSTD>First</BSTD>
+            <BSTD>Last</BSTD>
+            <BSTD>Handle</BSTD>
+        </BSTR>
+    </BSTHead>
+    <BSTBody>
+        <BSTR>
+            <BSTD>1</BSTD>
+            <BSTD>John</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JohnDoe <br/>media.com</BSTD>
+        </BSTR>
+        <BSTR>
+            <BSTD>2</BSTD>
+            <BSTD>Jane</BSTD>
+            <BSTD>Doe</BSTD>
+            <BSTD>JaneDoe <br/>media.com</BSTD>
+        </BSTR>
+    </BSTBody>
+    <BSTFoot>
+        <BSTR>
+            <BSTD ColSpan="4">Spanned Table Footer Here</BSTD>
+        </BSTR>
+
+    </BSTFoot>
+</BSTable>
diff --git a/src/BlazorStrap-Docs/wwwroot/Static/Content/Tables.md b/src/BlazorStrap-Docs/wwwroot/Static/Content/Tables.md
@@ -3,18 +3,19 @@
 See [shared](layout/shared) for additional parameters    
 :::
 
-| Parameter		  | Type | Valid      | Remarks/Output        | 
-|-----------------|------|------------|-----------------------|
-| Color			  | Enum | BSColor    | `.table-[]`           | {.table-striped .p-2}  
-| IsBordered	  | bool | true/false | `.table-bordered`     |
-| IsBorderLess	  | bool | true/false | `.table-borderless`   |
-| IsHoverable	  | bool | true/false | `.table-hover`        |
-| IsCaptionTop	  | bool | true/false | `.caption-top`        |
-| IsDark		  | bool | true/false | `.table-dark`         |
-| IsSmall		  | bool | true/false | `.table-sm`           |
-| IsStriped		  | bool | true/false | `.table-striped`      |
-| IsResponsive    | bool | true/false | `.table-responsive`   |
-| ResponsiveSize  | bool | true/false | `.table-responsive-#` |
+| Parameter		         | Type   | Valid      | Remarks/Output        | 
+|------------------------|--------|------------|-----------------------|
+| Color			         | Enum   | BSColor    | `.table-[]`           | {.table-striped .p-2}  
+| IsBordered	         | bool   | true/false | `.table-bordered`     |
+| IsBorderLess	         | bool   | true/false | `.table-borderless`   |
+| IsHoverable	         | bool   | true/false | `.table-hover`        |
+| IsCaptionTop	         | bool   | true/false | `.caption-top`        |
+| IsDark		         | bool   | true/false | `.table-dark`         |
+| IsSmall		         | bool   | true/false | `.table-sm`           |
+| IsStriped		         | bool   | true/false | `.table-striped`      |
+| IsResponsive           | bool   | true/false | `.table-responsive`   |
+| ResponsiveSize         | bool   | true/false | `.table-responsive-#` |
+| ResponsiveWrapperClass | string |	string     | Adds string to class  |
 
 :::
 #### Component \<BSTR\>
@@ -46,6 +47,10 @@ Shared Parameters only
 
 {{sample=Content/Tables/Tables1}}
 
+### Responsive Tables Example
+
+{{sample=Content/Tables/Tables1b}}
+
 #### Component \<BSDataTable<TValue>\> (Version  >= 5.0.105-Preview2)
 See [shared](layout/shared) for additional parameters    
 :::

diff --git a/src/BlazorStrap/Components/Content/BSTable.razor.cs b/src/BlazorStrap/Components/Content/BSTable.razor.cs
@@ -9,6 +9,7 @@ public partial class BSTable : BlazorStrapBase
         [Parameter] public bool IsDark { get; set; }
         [Parameter] public bool IsHoverable { get; set; }
         [Parameter] public bool IsResponsive { get; set; }
+        [Parameter] public string? ResponsiveWrapperClass { get; set; }
         [Parameter] public Size ResponsiveSize { get; set; } = Size.None;
         [Parameter] public bool IsSmall { get; set; }
         [Parameter] public bool IsBordered { get; set; }
@@ -32,6 +33,7 @@ public partial class BSTable : BlazorStrapBase
         internal string? WrapperClassBuilder => new CssBuilder("bs-table-responsive")
             .AddClass("table-responsive", ResponsiveSize == Size.None)
             .AddClass($"table-responsive-{ResponsiveSize.ToDescriptionString()}", ResponsiveSize != Size.None)
+            .AddClass(ResponsiveWrapperClass, !string.IsNullOrEmpty(ResponsiveWrapperClass))
             .Build().ToNullString();
 
     }