Tables: Add table themes and use data-grid

assets/css/v2/style.css

@@ -207,6 +207,8 @@ textarea:not([rows]) {
   --table-min-column-spacing-wide: 0.75rem;
   --table-header-bottom-spacing: 1rem;
   --table-line-height: 1px;
+  --table-inner-padding: 6px 10px;
+  --table-color-divider: 0.7 0 0;
 
   /* Details */
   --details-margin: 0.5rem 0rem;
@@ -1662,73 +1664,72 @@ a:hover {
 /* MARK: Tables
 */
 table {
+  border-collapse: collapse;
   position: relative;
   z-index: 0;
+  font-size: var(--font-step-0);
 
   td {
-    padding: var(--table-row-space-between) 0;
+    vertical-align: middle;
+    padding: var(--table-inner-padding);
+    background: transparent;
+    border: var(--table-line-height) solid oklch(var(--table-color-divider));
   }
 
   th {
-    font-weight: bold;
+    font-weight: 500;
     text-align: start;
-    vertical-align: top;
-    padding-block-end: var(--table-header-bottom-spacing);
+    vertical-align: bottom;
+    padding: var(--table-inner-padding);
   }
 
   tr {
     position: relative;
   }
-
-  tr::after {
-    content: "";
-    position: absolute;
-    border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
-    bottom: 0;
-    left: calc(-1 * var(--overflow-gutter-extension));
-    width: calc(100% + (2 * var(--overflow-gutter-extension)));
-  }
 }
 
 .table {
   margin: var(--margin-table);
-}
-
-.md-table-scroll-x {
-  overflow-x: auto;
-  width: 100%;
-}
-
-.narrow table {
-  min-width: 100%;
-  margin: var(--table-top-bottom-spacing) 0;
-  border-collapse: collapse;
-}
+  &.borderless {
+    th {
+      background: none;
+      border: none;
+    }
 
-.wide table {
-  margin: var(--table-top-bottom-spacing) 0;
-  border-collapse: collapse;
-}
+    tr:nth-child(even) td {
+      background: none;
+    }
+  }
 
-.narrow table th,
-.narrow table td {
-  padding-inline-start: var(--table-min-column-spacing-narrow);
-}
+  &.bordered {
+    th {
+      border: var(--table-line-height) solid oklch(var(--table-color-divider));
+      border-top: var(--table-line-height) dashed
+        oklch(var(--table-color-divider));
+      border-bottom: var(--table-line-height) solid
+        oklch(var(--color-foreground));
+    }
 
-.wide table th,
-.wide table td {
-  padding-inline-start: var(--table-min-column-spacing-wide);
+    tr:nth-child(even) td {
+      background: oklch(var(--table-color-divider) / 0.075);
+    }
+  }
 }
 
-table th:first-child,
-table td:first-child {
-  padding-inline-start: 0;
+.md-table-scroll-x {
+  overflow-x: auto;
+  width: 100%;
 }
 
 table hr {
   color: oklch(var(--color-divider));
   border: none;
-  border-bottom: var(--table-line-height) solid oklch(var(--color-divider));
+  border-bottom: var(--table-line-height) solid
+    oklch(var(--table-color-divider));
+  /*stops HR overflow outside of collapse style tables*/
+  margin-right: -10px;
+  margin-left: -10px;
+  width: auto;
 }
 
 /* MARK: Callouts

exampleSite/content/test-product/tables/variations.md

@@ -0,0 +1,70 @@
+---
+description: Table Variations
+title: Table Variations
+toc: true
+---
+### Plain markdown
+A pure markdown table, will have the default attributes of `narrow` and `borderless`.
+
+| Parameter                | Description                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------|
+| `NODES`                  | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary.                        |
+| `CONFPATHS`              | List of files and directories to distribute from the primary to the peers.           |
+| `EXCLUDE`                | (Optional) List of configuration files on the primary not to distribute to the peers.|
+
+### Table with `table` shortcode
+
+Wrapping a table with the `table` shortcode allows for the use of variant and theme.
+
+The `variant` parameter can be set to `narrow` or `wide`, while the `theme` parameter can be set to `bordered` or `borderless`.
+
+The default behaviour for `table` is `wide` and `bordered`.
+
+``` go-html-template
+{{</*table*/>}}
+
+| Parameter                | Description                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------|
+| `NODES`                  | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary.                        |
+| `CONFPATHS`              | List of files and directories to distribute from the primary to the peers.           |
+| `EXCLUDE`                | (Optional) List of configuration files on the primary not to distribute to the peers.|
+
+{{</*/table*/>}}
+```
+
+Results in the following table:
+
+{{<table variant="wide" theme="bordered">}}
+
+| Parameter                | Description                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------|
+| `NODES`                  | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary.                        |
+| `CONFPATHS`              | List of files and directories to distribute from the primary to the peers.           |
+| `EXCLUDE`                | (Optional) List of configuration files on the primary not to distribute to the peers.|
+
+{{</table>}}
+
+Or set to `{{</*table variant="wide" theme="borderless"*/>}}`:
+
+{{<table variant="wide" theme="borderless">}}
+
+| Parameter                | Description                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------|
+| `NODES`                  | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary.                       |
+| `CONFPATHS`              | List of files and directories to distribute from the primary to the peers.           |
+| `EXCLUDE`                | (Optional) List of configuration files on the primary not to distribute to the peers.|
+
+{{</table>}}
+
+
+Or set to `{{</*table variant="narrow" theme="bordered"*/>}}`:
+
+{{<table variant="narrow" theme="bordered">}}
+
+| Parameter                | Description                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------|
+| `NODES`                  | List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary. List of peers that receive the configuration from the primary.                       |
+| `CONFPATHS`              | List of files and directories to distribute from the primary to the peers.           |
+| `EXCLUDE`                | (Optional) List of configuration files on the primary not to distribute to the peers.|
+
+{{</table>}}

layouts/partials/table.html

@@ -1,7 +1,7 @@
-{{ if and (not (eq .variant "narrow")) (not (eq .variant "wide")) }}
-    {{ errorf "Invalid variant supplied to <table> shortcode: Received %s. Wanted: 'narrow', 'wide'" .variant }}
-{{ end }}
+{{$variant := .variant | default "narrow"}}
+{{$theme := .theme | default "bordered"}}
+{{$dataGrid := cond (eq $variant "narrow") "first-two-thirds" (cond (eq $variant "wide") "wide" "") }}
 
-<div class="table md-table-scroll-x {{ .variant }}">
-    {{ .content | markdownify}}
+<div class="table md-table-scroll-x {{ $theme }}" data-grid="{{$dataGrid}}">
+    {{ .content | markdownify }}
 </div>

layouts/shortcodes/table.html

@@ -1,9 +1,27 @@
 <!-- Use this shortcode to allow tables to be scrollable across the x-axis -->
-<!-- Params: variant=['narrow' | 'wide'] (defaults to "narrow") -->
+<!-- Params: variant=['narrow' | 'wide'] (defaults to "wide") -->
+<!-- Params: theme=['bordered' | 'borderless'] (defaults to "bordered") -->
 
-{{ $variant := default "narrow" (.Get "variant") }}
+{{ $variantRaw := .Get "variant" }}
+{{ $themeRaw := or (.Get "theme") "" }}
+
+{{ $variant := "wide" }}
+{{ $theme := "bordered" }}
+
+{{ if in (slice "narrow" "wide") $variantRaw }}
+  {{ $variant = $variantRaw }}
+{{ else if $variantRaw }}
+  {{ errorf "Invalid variant supplied to <table> shortcode: Received %s. Wanted: 'narrow', 'wide'" $variantRaw }}
+{{ end }}
+
+{{ if in (slice "bordered" "borderless") $themeRaw }}
+  {{ $theme = $themeRaw }}
+{{ else if $themeRaw }}
+  {{ errorf "Invalid theme supplied to <table> shortcode</table>: Received %s. Wanted: 'bordered', 'borderless'" $themeRaw }}
+{{ end }}
 
 {{ partial "table.html" (dict
     "variant" $variant
+    "theme" $theme
     "content" .Inner
-)}}
+)}}