feat(table): convert to use a grid layout

ithaka · Jan 2, 2025 · a80b3cf · a80b3cf
1 parent f964672
commit a80b3cf
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 75 deletions.
diff --git a/packages/pharos/src/components/table/pharos-table.scss b/packages/pharos/src/components/table/pharos-table.scss
@@ -1,67 +1,113 @@
 @use '../../utils/scss/mixins';
 
-:host {
-  display: inline-flex;
-  flex-direction: column;
-}
+// :host {
+//   display: inline-flex;
+//   flex-direction: column;
+// }
+
+.grid {
+  display: grid;
 
-.table {
+  // grid-template-columns: auto auto auto auto auto; /* Define three equal columns */
+  grid-template-columns: repeat(5, max-content);
   border-collapse: collapse;
+  gap: 1px;
 }
 
-.table-header {
-  background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
+.grid-caption {
+  grid-column: 1 / -1;
+  text-align: center;
 }
 
-.table-header__cell {
-  border: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
-  padding: var(--pharos-spacing-1-x);
+.grid-header {
+  display: contents; /* Allow the header to align with the grid structure */
+  font-weight: bold;
+  background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
 }
 
-.table-body__cell {
-  border: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
+.grid-header__cell {
+  outline: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
+  background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
   padding: var(--pharos-spacing-1-x);
+  text-align: center;
 }
 
-.table-sticky-header {
-  position: sticky;
-  top: 0;
+.grid-body {
+  display: contents;
 }
 
-.table-sticky-header--is-active {
-  box-shadow: var(--pharos-elevation-level-2);
+.grid-body__cell {
+  outline: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
+  padding: var(--pharos-spacing-1-x);
+  border-collapse: collapse;
 }
 
-.table-sticky-header__cell--is-active {
-  border: none;
-  border-right: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
+.grid-row {
+  display: contents;
 
-  &:last-child {
-    border-right: none;
-  }
-}
+  /*   grid-template-columns: subgrid; /* Use subgrid to inherit column structure */
 
-.table-controls {
-  display: flex;
-  justify-content: space-between;
+  gap: 10px;
   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);
+// .table {
+//   border-collapse: collapse;
+// }
 
-    .item-per-page-selector {
-      width: 75px;
-    }
-  }
+// .table-header {
+//   background-color: var(--pharos-table-header-color-background, var(--pharos-color-ui-20));
+// }
 
-  .pagination {
-    height: var(--pharos-spacing-one-and-a-half-x);
-  }
-}
+// .table-header__cell {
+//   border: 1px solid var(--pharos-table-header-color-border, var(--pharos-color-ui-30));
+//   padding: var(--pharos-spacing-1-x);
+// }
 
-.visually-hidden:not(:focus, :active) {
-  @include mixins.hidden;
-}
+// .table-body__cell {
+//   border: 1px solid var(--pharos-table-body-color-border, var(--pharos-color-ui-30));
+//   padding: var(--pharos-spacing-1-x);
+// }
+
+// .table-sticky-header {
+//   position: sticky;
+//   top: 0;
+// }
+
+// .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));
+
+//   &: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);
+//   }
+// }
+
+// .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
@@ -1,7 +1,7 @@
 import { PharosElement } from '../base/pharos-element';
 import ScopedRegistryMixin from '../../utils/mixins/scoped-registry';
 import { html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
+// import { classMap } from 'lit/directives/class-map.js';
 import { state } from 'lit/decorators.js';
 import type { TemplateResult, CSSResultArray } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -192,11 +192,7 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
 
   private _renderTableHeader(): (TemplateResult | undefined)[] {
     return this.columns.map((column: ColumnSpecification) => {
-      if (column.name) {
-        return html`<th scope="col" class="table-header__cell">${column.name}</th>`;
-      } else {
-        return html`<td class="table-header__cell"></td>`;
-      }
+      return html`<div class="grid-header__cell" role="columnheader">${column.name}</div>`;
     });
   }
 
@@ -208,11 +204,9 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
     return currentDisplayingData.map((row: RowData) => {
       const arr: TemplateResult[] = [];
       this.columns.forEach((column: ColumnSpecification) => {
-        arr.push(html`<td class="table-body__cell">${row[column.field]}</td>`);
+        arr.push(html`<div class="grid-body__cell" role="gridcell">${row[column.field]}</div>`);
       });
-      return html`<tr>
-        ${arr}
-      </tr>`;
+      return html`<div class="grid-row" role="row">${arr}</div>`;
     });
   }
 
@@ -254,29 +248,15 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   }
 
   protected override render(): TemplateResult {
+    //TODO: Add caption and hideCaption
     return html`
-      <table class="table">
-        <caption
-          class=${classMap({
-            ['visually-hidden']: this.hideCaption,
-          })}
-        >
-          ${this.caption}
-        </caption>
-        <thead
-          class=${classMap({
-            'table-header': true,
-            ['table-sticky-header']: this.hasStickyHeader,
-          })}
-        >
-          <tr>
-            ${this._renderTableHeader()}
-          </tr>
-        </thead>
-        <tbody>
-          ${this._renderTableRows()}
-        </tbody>
-      </table>
+      <div class="grid" role="grid">
+        <div class="grid-caption">An example table</div>
+        <div class="grid-header" role="rowgroup">
+          <div class="grid-row" role="row">${this._renderTableHeader()}</div>
+        </div>
+        <div class="grid-body">${this._renderTableRows()}</div>
+      </div>
       ${this._renderPagination()}
     `;
   }