Add sticky headers for big tables (krzysztofslusarski#30)

Co-authored-by: Artur Owczarek <[email protected]>
mwwojcik · Feb 15, 2022 · e2526c6 · e2526c6
1 parent 79cb9ab
commit e2526c6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/web-commons/src/main/resources/public/css/welcome.css b/web-commons/src/main/resources/public/css/welcome.css
@@ -117,6 +117,12 @@ td:nth-of-type(n+2) {
     font-weight: bold;
 }
 
+table.sticky-header thead {
+    position: sticky;
+    top: 0;
+    background-color: white; /* otherwise sticky header labels would have transparent background */
+}
+
 .search-input {
     width: 100%; /* Full-width */
     font-size: 16px; /* Increase font-size */

diff --git a/web-commons/src/main/resources/templates/welcome.html b/web-commons/src/main/resources/templates/welcome.html
@@ -218,7 +218,7 @@ <h3 th:if="${content.title != null}">[[${content.title}]]</h3>
 
                         </div>
                         <div th:if="${content.type.name() == 'TABLE'}">
-                            <table class="table table-striped table-bordered table-sm big-font" th:style="'width: ' + ${content.screenWidth} + ';'">
+                            <table th:class="'table table-striped table-bordered table-sm big-font' + ${content.table.size() >= 18 ? ' sticky-header' : ''}" th:style="'width: ' + ${content.screenWidth} + ';'">
                                 <thead th:if="${content.header != null}">
                                 <tr>
                                     <th th:each="column, columnStatus: ${content.header}" th:inline="text">