add footer option to small table

postgresml · chillenberger · Sep 26, 2024 · Aug 9, 2024 · Aug 9, 2024 · Sep 4, 2024
commit c17f124588c62cae2c5232acf4181a25e95269d1
diff --git a/pgml-dashboard/src/components/tables/small/table/mod.rs b/pgml-dashboard/src/components/tables/small/table/mod.rs
@@ -7,6 +7,7 @@ pub struct Table {
     classes: String,
     headers: Vec<String>,
     rows: Vec<Component>,
+    footers: Vec<Component>,
 }
 
 impl Table {
@@ -15,8 +16,14 @@ impl Table {
             headers: headers.iter().map(|h| h.to_string()).collect(),
             classes: "table table-sm".into(),
             rows: rows.to_vec(),
+            footers: vec![],
         }
     }
+
+    pub fn footers(mut self, footer: Vec<Component>) -> Self {
+        self.footers = footer;
+        self
+    }
 }
 
 component!(Table);
diff --git a/pgml-dashboard/src/components/tables/small/table/table.scss b/pgml-dashboard/src/components/tables/small/table/table.scss
@@ -11,7 +11,7 @@ table.table.table-sm {
       background: transparent;
       text-transform: uppercase;
       font-size: 12px;
-      padding: 12px 12px 12px 0;
+      padding: 12px 12px 12px 0.25rem;
       border-bottom: 1px solid #{$gray-600};
       font-weight: #{$font-weight-semibold};
     }
@@ -28,6 +28,18 @@ table.table.table-sm {
     }
   }
 
+  tfoot {
+    td {
+      color: #{$gray-300};
+      background: transparent;
+      text-transform: uppercase;
+      font-size: 12px;
+      padding: 12px 12px 0px .25rem;
+      border-top: 1px solid #{$gray-600};
+      font-weight: #{$font-weight-semibold};
+    }
+  }
+
   border-collapse: separate;
   border-spacing: 0 12px;
 }
diff --git a/pgml-dashboard/src/components/tables/small/table/template.html b/pgml-dashboard/src/components/tables/small/table/template.html
@@ -11,4 +11,13 @@
       <%+ row %>
     <% } %>
   </tbody>
+  <% if !footers.is_empty() {%>
+  <tfoot>
+    <tr>
+      <% for footer in footers { %>
+        <td><%+ footer %></td>
+      <% } %>
+    </tr>
+  </tfoot>
+<% } %>
 </table>