Fixed columns for BS4

Megabit · Oct 22, 2023 · b87148f · b87148f
1 parent 3f286be
commit b87148f
Show file tree

Hide file tree

Showing 18 changed files with 147 additions and 23 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor b/Demos/Blazorise.Demo/Pages/Tests/TablesPage.razor
@@ -484,10 +484,10 @@
                 <CardText>Use <code>Responsive</code> for horizontally scrolling tables.</CardText>
             </CardBody>
             <CardBody>
-                <Table Responsive>
+                <Table Responsive Bordered FixedHeader>
                     <TableHeader>
                         <TableRow>
-                            <TableHeaderCell>#</TableHeaderCell>
+                            <TableHeaderCell Fixed>#</TableHeaderCell>
                             <TableHeaderCell>Column heading</TableHeaderCell>
                             <TableHeaderCell>Column heading</TableHeaderCell>
                             <TableHeaderCell>Column heading</TableHeaderCell>
@@ -511,7 +511,7 @@
                             var index = i.ToString();
 
                             <TableRow @key="@index">
-                                <TableRowHeader>@index</TableRowHeader>
+                                <TableRowHeader Fixed>@index</TableRowHeader>
                                 <TableRowCell>Column content</TableRowCell>
                                 <TableRowCell>Column content</TableRowCell>
                                 <TableRowCell>Column content</TableRowCell>

diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -1019,6 +1019,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableHeaderCellCursor( Cursor cursor ) => cursor != Cursor.Default ? $"ant-cursor-{ToCursor( cursor )}" : null;
 
+    public override string TableHeaderCellFixed( bool @fixed ) => null;
+
     public override string TableFooter() => null;
 
     public override string TableBody() => "ant-table-tbody";
@@ -1033,6 +1035,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowHeader() => "ant-table-cell ant-table-row-header";
 
+    public override string TableRowHeaderFixed( bool @fixed ) => null;
+
     public override string TableRowCell() => "ant-table-cell";
 
     public override string TableRowCellColor( Color color ) => $"ant-table-{ToColor( color )}";
@@ -1043,9 +1047,11 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowGroupIndentCell() => "ant-table-group-indentcell";
 
-    public override string TableResponsive() => "ant-table-responsive";
+    public override string TableResponsive( bool responsive ) => responsive ? "ant-table-responsive" : null;
+
+    public override string TableFixedHeader( bool @fixed ) => @fixed ? "ant-table-fixed-header" : null;
 
-    public override string TableFixedHeader() => "ant-table-fixed-header";
+    public override string TableFixedRowHeader( bool @fixed ) => null;
 
     #endregion
 

diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs
@@ -1027,6 +1027,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableHeaderCellCursor( Cursor cursor ) => cursor != Cursor.Default ? $"cursor-{ToCursor( cursor )}" : null;
 
+    public override string TableHeaderCellFixed( bool @fixed ) => @fixed ? "table-header-cell-fixed" : null;
+
     public override string TableFooter() => null;
 
     public override string TableBody() => null;
@@ -1041,6 +1043,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowHeader() => null;
 
+    public override string TableRowHeaderFixed( bool @fixed ) => @fixed ? "table-row-header-fixed" : null;
+
     public override string TableRowCell() => null;
 
     public override string TableRowCellColor( Color color ) => $"table-{ToColor( color )}";
@@ -1051,9 +1055,11 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowGroupIndentCell() => "table-group-indentcell";
 
-    public override string TableResponsive() => "table-responsive";
+    public override string TableResponsive( bool responsive ) => responsive ? "table-responsive" : null;
+
+    public override string TableFixedHeader( bool @fixed ) => @fixed ? "table-fixed-header" : null;
 
-    public override string TableFixedHeader() => "table-fixed-header";
+    public override string TableFixedRowHeader( bool @fixed ) => @fixed ? "table-fixed-row-header" : null;
 
     #endregion
 

diff --git a/Source/Blazorise.Bootstrap/Styles/components/_table.scss b/Source/Blazorise.Bootstrap/Styles/components/_table.scss
@@ -46,3 +46,30 @@ tr {
         }
     }
 }
+
+.table-fixed-row-header {
+    overflow-x: auto;
+
+    .table {
+        border-collapse: separate;
+        border-spacing: 0;
+
+        .table-header-cell-fixed {
+            position: sticky;
+            border-left: none;
+            left: 0;
+            z-index: 11;
+            background-color: white;
+            border-inline-start-width: 0;
+        }
+
+        .table-row-header-fixed {
+            position: sticky;
+            border-left: none;
+            left: 0;
+            z-index: 11;
+            background-color: white;
+            border-inline-start-width: 0;
+        }
+    }
+}
diff --git a/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.css b/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.css
@@ -1933,6 +1933,30 @@ tr.table-row-selectable:focus[tabindex="0"] {
   top: 0;
 }
 
+.table-fixed-row-header {
+  overflow-x: auto;
+}
+.table-fixed-row-header .table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.table-fixed-row-header .table .table-header-cell-fixed {
+  position: sticky;
+  border-left: none;
+  left: 0;
+  z-index: 11;
+  background-color: white;
+  border-inline-start-width: 0;
+}
+.table-fixed-row-header .table .table-row-header-fixed {
+  position: sticky;
+  border-left: none;
+  left: 0;
+  z-index: 11;
+  background-color: white;
+  border-inline-start-width: 0;
+}
+
 .snackbar-stack {
   z-index: 1009 !important;
 }

diff --git a/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.min.css b/Source/Blazorise.Bootstrap/wwwroot/blazorise.bootstrap.min.css
diff --git a/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs b/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs
@@ -1020,6 +1020,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableHeaderCellCursor( Cursor cursor ) => cursor != Cursor.Default ? $"cursor-{ToCursor( cursor )}" : null;
 
+    public override string TableHeaderCellFixed( bool @fixed ) => null;
+
     public override string TableFooter() => null;
 
     public override string TableBody() => null;
@@ -1034,6 +1036,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowHeader() => null;
 
+    public override string TableRowHeaderFixed( bool @fixed ) => @fixed ? "table-row-header-fixed" : null;
+
     public override string TableRowCell() => null;
 
     public override string TableRowCellColor( Color color ) => $"table-{ToColor( color )}";
@@ -1044,9 +1048,11 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowGroupIndentCell() => "table-group-indentcell";
 
-    public override string TableResponsive() => "table-responsive";
+    public override string TableResponsive( bool responsive ) => responsive ? "table-responsive" : null;
+
+    public override string TableFixedHeader( bool @fixed ) => @fixed ? "table-fixed-header" : null;
 
-    public override string TableFixedHeader() => "table-fixed-header";
+    public override string TableFixedRowHeader( bool @fixed ) => null;
 
     #endregion
 

diff --git a/Source/Blazorise.Bootstrap5/Styles/components/_table.scss b/Source/Blazorise.Bootstrap5/Styles/components/_table.scss
@@ -50,3 +50,9 @@ tr {
         border-width: 1px 1px;
     }
 }
+
+.table-row-header-fixed {
+    position: sticky;
+    left: 0;
+    background-color: white;
+}
diff --git a/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.css b/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.css
@@ -1595,6 +1595,12 @@ tr.table-row-selectable:focus[tabindex="0"] {
   border-width: 1px 1px;
 }
 
+.table-row-header-fixed {
+  position: sticky;
+  left: 0;
+  background-color: white;
+}
+
 .snackbar-stack {
   z-index: 1069 !important;
 }

diff --git a/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.min.css b/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.min.css
diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs
@@ -1057,6 +1057,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableHeaderCellCursor( Cursor cursor ) => cursor != Cursor.Default ? $"is-cursor-{ToCursor( cursor )}" : null;
 
+    public override string TableHeaderCellFixed( bool @fixed ) => null;
+
     public override string TableFooter() => null;
 
     public override string TableBody() => null;
@@ -1071,6 +1073,8 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowHeader() => null;
 
+    public override string TableRowHeaderFixed( bool @fixed ) => null;
+
     public override string TableRowCell() => null;
 
     public override string TableRowCellColor( Color color ) => $"has-background-{ToColor( color )}";
@@ -1081,9 +1085,11 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     public override string TableRowGroupIndentCell() => "table-group-indentcell";
 
-    public override string TableResponsive() => "table-container";
+    public override string TableResponsive( bool responsive ) => responsive ? "table-container" : null;
+
+    public override string TableFixedHeader( bool @fixed ) => @fixed ? "table-container-fixed-header" : null;
 
-    public override string TableFixedHeader() => "table-container-fixed-header";
+    public override string TableFixedRowHeader( bool @fixed ) => null;
 
     #endregion
 

diff --git a/Source/Blazorise.Tailwind/TailwindClassProvider.cs b/Source/Blazorise.Tailwind/TailwindClassProvider.cs
@@ -1516,6 +1516,8 @@ public override string TableHeaderThemeContrast( ThemeContrast themeContrast )
 
     public override string TableHeaderCellCursor( Cursor cursor ) => cursor != Cursor.Default ? $"cursor-{ToCursor( cursor )}" : null;
 
+    public override string TableHeaderCellFixed( bool @fixed ) => null;
+
     public override string TableFooter() => "b-table-footer";
 
     public override string TableBody() => "b-table-body";
@@ -1559,6 +1561,8 @@ public override string TableRowColor( Color color )
 
     public override string TableRowHeader() => "group-[.b-table-sm]:py-2 group-[:not(.b-table-sm)]:py-4 px-4 font-medium text-gray-900 whitespace-nowrap dark:text-white";
 
+    public override string TableRowHeaderFixed( bool @fixed ) => null;
+
     public override string TableRowCell() => "group-[.b-table-sm]:py-2 group-[:not(.b-table-sm)]:py-4 px-4";
 
     public override string TableRowCellColor( Color color ) => $"table-{ToColor( color )}";
@@ -1569,9 +1573,11 @@ public override string TableRowColor( Color color )
 
     public override string TableRowGroupIndentCell() => "b-table-group-indentcell";
 
-    public override string TableResponsive() => "b-table-responsive overflow-x-auto relative shadow-md sm:rounded-lg";
+    public override string TableResponsive( bool responsive ) => responsive ? "b-table-responsive overflow-x-auto relative shadow-md sm:rounded-lg" : null;
+
+    public override string TableFixedHeader( bool @fixed ) => @fixed ? "b-table-fixed-header" : null;
 
-    public override string TableFixedHeader() => "b-table-fixed-header";
+    public override string TableFixedRowHeader( bool @fixed ) => null;
 
     #endregion
 

diff --git a/Source/Blazorise/Components/Table/Table.razor.cs b/Source/Blazorise/Components/Table/Table.razor.cs
@@ -84,8 +84,9 @@ protected override void BuildClasses( ClassBuilder builder )
     /// <param name="builder">Class builder used to append the classnames.</param>
     protected virtual void BuildContainerClasses( ClassBuilder builder )
     {
-        builder.Append( ClassProvider.TableResponsive(), Responsive );
-        builder.Append( ClassProvider.TableFixedHeader(), FixedHeader );
+        builder.Append( ClassProvider.TableResponsive( Responsive ) );
+        builder.Append( ClassProvider.TableFixedHeader( FixedHeader ) );
+        builder.Append( ClassProvider.TableFixedRowHeader( FixedHeader ) );
     }
 
     /// <summary>

diff --git a/Source/Blazorise/Components/Table/TableHeaderCell.razor.cs b/Source/Blazorise/Components/Table/TableHeaderCell.razor.cs
@@ -26,6 +26,7 @@ protected override void BuildClasses( ClassBuilder builder )
     {
         builder.Append( ClassProvider.TableHeaderCell() );
         builder.Append( ClassProvider.TableHeaderCellCursor( Cursor ) );
+        builder.Append( ClassProvider.TableHeaderCellFixed( Fixed ) );
 
         base.BuildClasses( builder );
     }
@@ -54,6 +55,11 @@ protected Task OnClickHandler( MouseEventArgs eventArgs )
     /// </summary>
     [Parameter] public int? ColumnSpan { get; set; }
 
+    /// <summary>
+    /// Fixes the header cell to the start of the table.
+    /// </summary>
+    [Parameter] public bool Fixed { get; set; }
+
     /// <summary>
     /// Defines the mouse cursor based on the behaviour by the current css framework.
     /// </summary>

diff --git a/Source/Blazorise/Components/Table/TableRowHeader.razor.cs b/Source/Blazorise/Components/Table/TableRowHeader.razor.cs
@@ -22,6 +22,7 @@ public partial class TableRowHeader : BaseDraggableComponent
     protected override void BuildClasses( ClassBuilder builder )
     {
         builder.Append( ClassProvider.TableRowHeader() );
+        builder.Append( ClassProvider.TableRowHeaderFixed( Fixed ) );
 
         base.BuildClasses( builder );
     }
@@ -49,6 +50,11 @@ protected Task ClickHandler( MouseEventArgs eventArgs )
     /// </summary>
     [Parameter] public int? ColumnSpan { get; set; }
 
+    /// <summary>
+    /// Fixes the row header to the start of the table.
+    /// </summary>
+    [Parameter] public bool Fixed { get; set; }
+
     /// <summary>
     /// Occurs when the row header is clicked.
     /// </summary>

diff --git a/Source/Blazorise/Interfaces/IClassProvider.cs b/Source/Blazorise/Interfaces/IClassProvider.cs
@@ -940,6 +940,8 @@ public interface IClassProvider
 
     string TableHeaderCellCursor( Cursor cursor );
 
+    string TableHeaderCellFixed( bool @fixed );
+
     string TableFooter();
 
     string TableBody();
@@ -954,6 +956,8 @@ public interface IClassProvider
 
     string TableRowHeader();
 
+    string TableRowHeaderFixed( bool @fixed );
+
     string TableRowCell();
 
     string TableRowCellColor( Color color );
@@ -964,9 +968,11 @@ public interface IClassProvider
 
     string TableRowGroupIndentCell();
 
-    string TableResponsive();
+    string TableResponsive( bool responsive );
+
+    string TableFixedHeader( bool @fixed );
 
-    string TableFixedHeader();
+    string TableFixedRowHeader( bool @fixed );
 
     #endregion
 

diff --git a/Source/Blazorise/Providers/ClassProvider.cs b/Source/Blazorise/Providers/ClassProvider.cs
@@ -944,6 +944,8 @@ public virtual string Display( DisplayType displayType, IEnumerable<DisplayDefin
 
     public abstract string TableHeaderCellCursor( Cursor cursor );
 
+    public abstract string TableHeaderCellFixed( bool @fixed );
+
     public abstract string TableFooter();
 
     public abstract string TableBody();
@@ -958,6 +960,8 @@ public virtual string Display( DisplayType displayType, IEnumerable<DisplayDefin
 
     public abstract string TableRowHeader();
 
+    public abstract string TableRowHeaderFixed( bool @fixed );
+
     public abstract string TableRowCell();
 
     public abstract string TableRowCellColor( Color color );
@@ -968,9 +972,11 @@ public virtual string Display( DisplayType displayType, IEnumerable<DisplayDefin
 
     public abstract string TableRowGroupIndentCell();
 
-    public abstract string TableResponsive();
+    public abstract string TableResponsive( bool responsive );
+
+    public abstract string TableFixedHeader( bool @fixed );
 
-    public abstract string TableFixedHeader();
+    public abstract string TableFixedRowHeader( bool @fixed );
 
     #endregion