feat: responsive tables

tmlmt · Jun 7, 2024 · 92c981c · 92c981c
1 parent c3d6c78
commit 92c981c
Showing 1 changed file with 54 additions and 3 deletions.
diff --git a/milk_tracker/main.py b/milk_tracker/main.py
@@ -252,6 +252,54 @@ def toggle_newmeal_lock(e: ValueChangeEventArguments) -> None:
 
     ui.markdown("## 10 last meals")
 
+    ui.add_sass("""
+    .sticky-header-column-table
+        /* height or max-height is important */
+        height: 528px
+
+        /* specifying max-width so the example can
+            highlight the sticky column on any browser window */
+        max-width: calc(100vw - 2rem)
+
+        td:first-child
+            /* bg color is important for td; just specify one */
+            background-color: #90caf9
+            color: white
+
+        tr th
+            position: sticky
+            /* higher than z-index for td below */
+            z-index: 2
+            /* bg color is important; just specify one */
+            background: #90caf9
+            color: white
+
+        /* this will be the loading indicator */
+        thead tr:last-child th
+            /* height of all previous header rows */
+            top: 48px
+            /* highest z-index */
+            z-index: 3
+        thead tr:first-child th
+            top: 0
+            z-index: 1
+        tr:first-child th:first-child
+            /* highest z-index */
+            z-index: 3
+
+        td:first-child
+            z-index: 1
+
+        td:first-child, th:first-child
+            position: sticky
+            left: 0
+
+        /* prevent scrolling behind sticky top row on focus */
+        tbody
+            /* height of all previous header rows */
+            scroll-margin-top: 48px
+    """)
+
     def generate_latest_meals_table() -> ui.table:
         return ui.table.from_pandas(
             mt.meals.df.tail(10)[
@@ -274,8 +322,9 @@ def generate_latest_meals_table() -> ui.table:
                     "time_since_previous_end_hrmin": "Time since previous end",
                 }
             )
-            .iloc[::-1]
-        )
+            .iloc[::-1],
+            pagination=0,
+        ).props("table-class='sticky-header-column-table' virtual-scroll hide-pagination")
 
     with ui.element() as table_latest_meals_container:
         generate_latest_meals_table()
@@ -366,7 +415,9 @@ def generate_graph(field: str, title: str, yaxis_title: str) -> dict:
     ui.markdown("## Statistics")
 
     def generate_summary_table() -> ui.table:
-        return ui.table.from_pandas(mt.meals.generate_stats())
+        return ui.table.from_pandas(mt.meals.generate_stats(), pagination=0).props(
+            "table-class='sticky-header-column-table' virtual-scroll hide-pagination"
+        )
 
     # Display the summary DataFrame
     with ui.element() as table_summary_container: