diff --git a/pgml-dashboard/src/components/tables/small/table/mod.rs b/pgml-dashboard/src/components/tables/small/table/mod.rs index 8586c69c1..c3516ca39 100644 --- 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, rows: Vec, + footers: Vec, } 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) -> 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 index ab07ab9f7..af7a4ced9 100644 --- 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 index f93b626cd..c6c16f32e 100644 --- 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 %> <% } %> + <% if !footers.is_empty() {%> + + + <% for footer in footers { %> + <%+ footer %> + <% } %> + + +<% } %>