From 2ed164793996e21abca10e7884f360a07d1e2121 Mon Sep 17 00:00:00 2001
From: Brent Swisher <brent.swisher@ithaka.org>
Date: Fri, 10 Jan 2025 11:44:53 -0500
Subject: [PATCH] feat(table): base column count on content

---
 .../src/components/table/pharos-table.scss    | 75 +++++++++----------
 .../src/components/table/pharos-table.ts      |  5 ++
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
index 2c759aa4..0394e6c8 100644
--- a/packages/pharos/src/components/table/pharos-table.scss
+++ b/packages/pharos/src/components/table/pharos-table.scss
@@ -9,7 +9,6 @@
   display: grid;
 
   // grid-template-columns: auto auto auto auto auto; /* Define three equal columns */
-  grid-template-columns: repeat(5, max-content);
   border-collapse: collapse;
   gap: 1px;
 }
@@ -69,45 +68,45 @@
 //   padding: var(--pharos-spacing-1-x);
 // }
 
-// .table-sticky-header {
-//   position: sticky;
-//   top: 0;
-// }
+.table-sticky-header {
+  position: sticky;
+  top: 0;
+}
 
-// .table-sticky-header--is-active {
-//   box-shadow: var(--pharos-elevation-level-2);
-// }
+.table-sticky-header--is-active {
+  box-shadow: var(--pharos-elevation-level-2);
+}
 
-// .table-sticky-header__cell--is-active {
-//   border: none;
-//   border-right: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
+.table-sticky-header__cell--is-active {
+  border: none;
+  border-right: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
 
-//   &:last-child {
-//     border-right: none;
-//   }
-// }
+  &:last-child {
+    border-right: none;
+  }
+}
 
-// .table-controls {
-//   display: flex;
-//   justify-content: space-between;
-//   align-items: center;
-//   margin-top: var(--pharos-spacing-one-half-x);
-
-//   .item-per-page-wrapper {
-//     display: flex;
-//     align-items: center;
-//     column-gap: var(--pharos-spacing-one-half-x);
-
-//     .item-per-page-selector {
-//       width: 75px;
-//     }
-//   }
-
-//   .pagination {
-//     height: var(--pharos-spacing-one-and-a-half-x);
-//   }
-// }
+.table-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: var(--pharos-spacing-one-half-x);
 
-// .visually-hidden:not(:focus, :active) {
-//   @include mixins.hidden;
-// }
+  .item-per-page-wrapper {
+    display: flex;
+    align-items: center;
+    column-gap: var(--pharos-spacing-one-half-x);
+
+    .item-per-page-selector {
+      width: 75px;
+    }
+  }
+
+  .pagination {
+    height: var(--pharos-spacing-one-and-a-half-x);
+  }
+}
+
+.visually-hidden:not(:focus, :active) {
+  @include mixins.hidden;
+}
diff --git a/packages/pharos/src/components/table/pharos-table.ts b/packages/pharos/src/components/table/pharos-table.ts
index e56e3411..05d2c3e6 100644
--- a/packages/pharos/src/components/table/pharos-table.ts
+++ b/packages/pharos/src/components/table/pharos-table.ts
@@ -250,6 +250,11 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   protected override render(): TemplateResult {
     //TODO: Add caption and hideCaption
     return html`
+      <style>
+        .grid {
+          grid-template-columns: repeat(${this.columns.length}, max-content);
+        }
+      </style>
       <div class="grid" role="grid">
         <div class="grid-caption">An example table</div>
         <div class="grid-header" role="rowgroup">