Merge pull request #794 from stsrki/dev091-responsive-table

feat: Responsive table
Megabit · Apr 22, 2020 · 3ff4752 · 3ff4752
2 parents ab07588 + 5146cbe
commit 3ff4752
Show file tree

Hide file tree

Showing 30 changed files with 266 additions and 68 deletions.
diff --git a/Demos/Blazorise.Demo/Layouts/MainLayout.razor b/Demos/Blazorise.Demo/Layouts/MainLayout.razor
@@ -170,7 +170,7 @@
                 </BarMenu>
             </Bar>
         </LayoutHeader>
-        <LayoutContent Padding="Padding.Is4.OnX">
+        <LayoutContent Padding="Padding.Is4.OnX" Style="margin-top: 64px">
             @Body
         </LayoutContent>
     </Layout>

diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGridPage.razor
@@ -77,6 +77,7 @@
                           Striped="true"
                           Bordered="true"
                           Hoverable="true"
+                          Responsive="true"
                           CustomFilter="@OnCustomFilter">
                     <DataGridAggregates>
                         <DataGridAggregate TItem="Employee" Field="@nameof( Employee.EMail )" Aggregate="DataGridAggregateType.Count">

diff --git a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor
@@ -500,4 +500,96 @@
             </CardBody>
         </Card>
     </Column>
+</Row>
+<Row>
+    <Column>
+        <Card Margin="Margin.Is4.FromBottom">
+            <CardHeader>
+                <CardTitle>Responsive</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <CardText>Use <code>Responsive</code> for horizontally scrolling tables.</CardText>
+            </CardBody>
+            <CardBody>
+                <Table Responsive="true">
+                    <TableHeader>
+                        <TableRow>
+                            <TableHeaderCell>#</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                            <TableHeaderCell>Column heading</TableHeaderCell>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow>
+                            <TableRowHeader>1</TableRowHeader>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableRowHeader>2</TableRowHeader>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                        </TableRow>
+                        <TableRow>
+                            <TableRowHeader>3</TableRowHeader>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                            <TableRowCell>Column content</TableRowCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </CardBody>
+        </Card>
+    </Column>
 </Row>
diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -754,6 +754,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint,
 
         public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"ant-text-{ToTextAlignment( textAlignment )}";
 
+        public override string TableResponsive() => "ant-table-responsive";
+
         #endregion
 
         #region Badge

diff --git a/Source/Blazorise.AntDesign/Styles/_layout.scss b/Source/Blazorise.AntDesign/Styles/_layout.scss
@@ -1,7 +1,3 @@
 .b-layout-header {
     line-height: 64px;
 }
-
-.b-body-layout {
-    overflow-x: hidden;
-}
diff --git a/Source/Blazorise.AntDesign/Styles/_table.scss b/Source/Blazorise.AntDesign/Styles/_table.scss
@@ -51,3 +51,14 @@
 .ant-table-row-header {
     font-weight: bold;
 }
+
+.ant-table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.ant-table-responsive > .ant-table-bordered {
+    border: 0;
+}
diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css
@@ -168,6 +168,15 @@
 .ant-table-row-header {
     font-weight: bold; }
 
+.ant-table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; }
+
+.ant-table-responsive > .ant-table-bordered {
+    border: 0; }
+
 .ant-menu-submenu-horizontal > .ant-menu-submenu-title .ant-menu-submenu-arrow {
     position: absolute;
     top: 50%;

diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs
@@ -574,7 +574,7 @@ public override string Column( ColumnWidth columnWidth, Breakpoint breakpoint, b
 
                 return $"{baseClass}-{ToBreakpoint( breakpoint )}-{ToColumnWidth( columnWidth )}";
             }
-            
+
             return $"{baseClass}-{ToColumnWidth( columnWidth )}";
         }
 
@@ -759,6 +759,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint,
 
         public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"text-{ToTextAlignment( textAlignment )}";
 
+        public override string TableResponsive() => "table-responsive";
+
         #endregion
 
         #region Badge

diff --git a/Source/Blazorise.Bootstrap/Styles/_layout.scss b/Source/Blazorise.Bootstrap/Styles/_layout.scss
@@ -1,3 +1 @@
-.b-body-layout {
-    overflow-x: hidden;
-}
+
diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs
@@ -762,6 +762,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint,
 
         public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"has-text-{ToTextAlignment( textAlignment )}";
 
+        public override string TableResponsive() => "table-container";
+
         #endregion
 
         #region Badge

diff --git a/Source/Blazorise.Bulma/Config.cs b/Source/Blazorise.Bulma/Config.cs
@@ -50,6 +50,7 @@ private static void RegisterComponents( IComponentMapper componentMapper )
             componentMapper.Register( typeof( Blazorise.Select<> ), typeof( Bulma.Select<> ) );
             componentMapper.Register( typeof( Blazorise.Switch<> ), typeof( Bulma.Switch<> ) );
             componentMapper.Register<Blazorise.Button, Bulma.Button>();
+            componentMapper.Register<Blazorise.Table, Bulma.Table>();
             componentMapper.Register<Blazorise.Tabs, Bulma.Tabs>();
             componentMapper.Register<Blazorise.TextEdit, Bulma.TextEdit>();
             componentMapper.Register( typeof( Blazorise.TimeEdit<> ), typeof( Bulma.TimeEdit<> ) );

diff --git a/Source/Blazorise.Bulma/Table.razor b/Source/Blazorise.Bulma/Table.razor
@@ -0,0 +1,17 @@
+@inherits Blazorise.Table
+@if ( Responsive )
+{
+    <div style="display: grid;">
+        <div class="@ResponsiveClassNames">
+            <table class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+                @ChildContent
+            </table>
+        </div>
+    </div>
+}
+else
+{
+    <table class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+        @ChildContent
+    </table>
+}
diff --git a/Source/Blazorise.Frolic/FrolicClassProvider.cs b/Source/Blazorise.Frolic/FrolicClassProvider.cs
@@ -747,6 +747,8 @@ public override string Display( DisplayType displayType, Breakpoint breakpoint,
 
         public override string TableRowCellTextAlignment( TextAlignment textAlignment ) => $"text-{ToTextAlignment( textAlignment )}";
 
+        public override string TableResponsive() => "e-table-responsive";
+
         #endregion
 
         #region Badge

diff --git a/Source/Blazorise.Frolic/Styles/_layout.scss b/Source/Blazorise.Frolic/Styles/_layout.scss
@@ -1,3 +1 @@
-.b-body-layout {
-    overflow-x: hidden;
-}
+
diff --git a/Source/Blazorise.Frolic/Styles/_table.scss b/Source/Blazorise.Frolic/Styles/_table.scss
@@ -21,4 +21,15 @@ table.e-table tbody tr.selected {
 
 tr.table-row-selectable:hover {
     cursor: pointer;
-}
+}
+
+.e-table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.e-table-responsive > .bordered {
+    border: 0;
+}
diff --git a/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css b/Source/Blazorise.Frolic/wwwroot/blazorise.frolic.css
@@ -219,6 +219,15 @@ table.e-table tbody tr.selected {
 tr.table-row-selectable:hover {
     cursor: pointer; }
 
+.e-table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch; }
+
+.e-table-responsive > .bordered {
+    border: 0; }
+
 .e-tabs.vertical ul {
     -webkit-flex-direction: column;
     flex-direction: column; }

diff --git a/Source/Blazorise.Material/Styles/_layout.scss b/Source/Blazorise.Material/Styles/_layout.scss
@@ -1,3 +1 @@
-.b-body-layout {
-    overflow-x: hidden;
-}
+
diff --git a/Source/Blazorise/ClassProvider.cs b/Source/Blazorise/ClassProvider.cs
@@ -2,6 +2,7 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Threading;
 using System.Threading.Tasks;
 #endregion
 
@@ -393,8 +394,6 @@ public abstract class ClassProvider : IClassProvider
 
         public virtual string LayoutHasSider() => "b-layout-has-sider";
 
-        public virtual string LayoutBody() => "b-body-layout";
-
         public virtual string LayoutContent() => "b-layout-content";
 
         public virtual string LayoutHeader() => "b-layout-header";
@@ -687,6 +686,8 @@ public virtual string Display( DisplayType displayType, IEnumerable<(Breakpoint
 
         public abstract string TableRowCellTextAlignment( TextAlignment textAlignment );
 
+        public abstract string TableResponsive();
+
         #endregion
 
         #region Badge

diff --git a/Source/Blazorise/IClassProvider.cs b/Source/Blazorise/IClassProvider.cs
@@ -393,8 +393,6 @@ public interface IClassProvider
 
         string LayoutHasSider();
 
-        string LayoutBody();
-
         string LayoutContent();
 
         string LayoutHeader();
@@ -681,6 +679,8 @@ public interface IClassProvider
 
         string TableRowCellTextAlignment( TextAlignment textAlignment );
 
+        string TableResponsive();
+
         #endregion
 
         #region Badge

diff --git a/Source/Blazorise/Layout.razor.cs b/Source/Blazorise/Layout.razor.cs
@@ -28,36 +28,6 @@ protected override void BuildClasses( ClassBuilder builder )
             base.BuildClasses( builder );
         }
 
-        protected override async Task OnAfterRenderAsync( bool firstRender )
-        {
-            if ( firstRender )
-            {
-                if ( ParentLayout == null )
-                {
-                    await JSRunner.AddClassToBody( ClassProvider.LayoutBody() );
-
-                    bodyClassApplied = true;
-                }
-            }
-
-            await base.OnAfterRenderAsync( firstRender );
-        }
-
-        protected override void Dispose( bool disposing )
-        {
-            if ( disposing )
-            {
-                if ( bodyClassApplied )
-                {
-                    _ = JSRunner.RemoveClassFromBody( ClassProvider.LayoutBody() );
-
-                    bodyClassApplied = false;
-                }
-            }
-
-            base.Dispose( disposing );
-        }
-
         #endregion
 
         #region Properties

diff --git a/Source/Blazorise/Providers/EmptyClassProvider.cs b/Source/Blazorise/Providers/EmptyClassProvider.cs
@@ -689,6 +689,8 @@ class EmptyClassProvider : IClassProvider
 
         public string TableRowCellTextAlignment( TextAlignment textAlignment ) => null;
 
+        public string TableResponsive() => null;
+
         #endregion
 
         #region Badge

diff --git a/Source/Blazorise/Styles/_layout.scss b/Source/Blazorise/Styles/_layout.scss
@@ -13,6 +13,10 @@
 .b-layout {
     &.b-layout-has-sider {
         flex-direction: row;
+
+        .b-layout {
+            overflow-x: hidden;
+        }
     }
 }
 
@@ -28,9 +32,14 @@
     /*background: #001529;*/
     /*line-height: 64px;*/
     &-fixed {
-        position: sticky;
+        position: fixed;
         z-index: 1;
         top: 0;
+        width: calc(100% - var(--b-sidebar-width, 0px));
+
+        @media (min-width:1px) and (max-width:767.98px) {
+            width: 100%;
+        }
     }
 }