Merge pull request #207 from CityOfDetroit/issue.199

[RFC] Create table v2 to resolve performance issues
CityOfDetroit · May 1, 2024 · e1becdf · e1becdf
2 parents 8effe22 + b5aa2c3
commit e1becdf
Show file tree

Hide file tree

Showing 6 changed files with 284 additions and 0 deletions.
diff --git a/src/components/organisms/TableV2/TableV2.css b/src/components/organisms/TableV2/TableV2.css
diff --git a/src/components/organisms/TableV2/TableV2.css.map b/src/components/organisms/TableV2/TableV2.css.map
diff --git a/src/components/organisms/TableV2/TableV2.js b/src/components/organisms/TableV2/TableV2.js
@@ -0,0 +1,64 @@
+import styles from '!!raw-loader!./TableV2.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+class TableV2 extends HTMLElement {
+  static observedAttributes = [];
+
+  constructor() {
+    // Always call super first in constructor
+    super();
+    // Create a shadow root
+    const shadow = this.attachShadow({ mode: 'open' });
+    // Add styles
+    const bootStyles = document.createElement('style');
+    bootStyles.textContent = bootstrapStyles;
+    const variableStyles = document.createElement('style');
+    variableStyles.textContent = varStyles;
+    const itemStyles = document.createElement('style');
+    itemStyles.textContent = styles;
+    shadow.appendChild(bootStyles);
+    shadow.appendChild(variableStyles);
+    shadow.appendChild(itemStyles);
+  }
+
+  connectedCallback() {
+    // TODO: Add support for: scrollable,
+    // custom extra classes, dark, hover, and
+    // striped columns/rows.
+    this.shadowRoot.append(...this.childNodes);
+    this._addTableClasses();
+    this._slotCells();
+  }
+
+  _addTableClasses() {
+    const table = this.shadowRoot.querySelector('table');
+    table.classList.add('table');
+
+    const isStacked = this.hasAttribute('table-stacked');
+    if (isStacked) {
+      table.classList.add('table-stacked');
+    }
+  }
+
+  _slotCells() {
+    const cells = this.shadowRoot.querySelectorAll('td');
+    const cellHeaders = this.shadowRoot.querySelectorAll('th');
+    [...cells, ...cellHeaders].forEach((cellNode, idx) => {
+      const children = cellNode.childNodes;
+      const contentDiv = document.createElement('div');
+      contentDiv.classList.add('content');
+      const slotName = `slot-${idx}`;
+      contentDiv.setAttribute('slot', slotName);
+      contentDiv.append(...children);
+
+      const slot = document.createElement('slot');
+      slot.setAttribute('name', slotName);
+      cellNode.appendChild(slot);
+
+      this.appendChild(contentDiv);
+    });
+  }
+}
+
+export { TableV2 as default };
diff --git a/src/components/organisms/TableV2/TableV2.scss b/src/components/organisms/TableV2/TableV2.scss
@@ -0,0 +1,65 @@
+@use '../../../scss/mixins/table';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/breakpoints';
+
+@include media-breakpoint-down(lg) {
+  table.table-stacked {
+    & slot {
+      display: block;
+      flex: 1 1 0px;
+      padding: 0.5em 0.5em;
+    }
+
+    // Header & body styles.
+    & thead {
+      // Move table header off the screen to hide from
+      // sited viewers but remain enabled for screen readers
+      // and other AT.
+      position: absolute;
+      left: -10000px;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+    }
+
+    // Row styles.
+    & tr {
+      display: block;
+      border-top-width: 0;
+      width: 100%;
+      border-bottom: 2px solid var(--bs-black);
+
+      &:nth-child(1) {
+        border-top: 2px solid var(--bs-black);
+      }
+    }
+
+    // Cell header styles.
+    & th {
+      @include table.th-td-stacked-inline-styles;
+
+      & div.content {
+        @include table.cell-content-stacked-inline-styles;
+      }
+    }
+
+    & th[data-label] {
+      @include table.th-td-labeled-stacked-inline-styles;
+    }
+
+    // Cell styles.
+    & td {
+      @include table.th-td-stacked-inline-styles;
+
+      & div.content {
+        @include table.cell-content-stacked-inline-styles;
+      }
+    }
+
+    & td[data-label] {
+      @include table.th-td-labeled-stacked-inline-styles;
+    }
+  }
+}
diff --git a/src/components/organisms/TableV2/cod-table-v2.js b/src/components/organisms/TableV2/cod-table-v2.js
@@ -0,0 +1,2 @@
+import TableV2 from './TableV2';
+customElements.define('cod-table-v2', TableV2);
diff --git a/src/stories/table-v2.stories.js b/src/stories/table-v2.stories.js
@@ -0,0 +1,94 @@
+import { html } from 'lit-html';
+import '../components/organisms/TableV2/cod-table-v2';
+
+export default {
+  title: 'Components/Organisms/TableV2',
+};
+
+export const Basic = () => html`
+  <cod-table-v2 id="basicTable">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">First</th>
+          <th scope="col">Last</th>
+          <th scope="col">Handle</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Mark</td>
+          <td>Otto</td>
+          <td>@mdo</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Jacob</td>
+          <td>Thornton</td>
+          <td>@fat</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td colspan="2">Larry the Bird</td>
+          <td>@twitter</td>
+        </tr>
+      </tbody>
+    </table>
+  </cod-table>
+`;
+
+export const StackedInline = () => html`
+  <cod-table-v2 data-id="table-stacked" table-stacked>
+    <table>
+      <thead>
+        <tr>
+          <th scope="col">Bus Route</th>
+          <th scope="col">Route Viewer</th>
+          <th scope="col">Downloadable Schedule</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-label="Bus Route">
+            1 Vernor
+          </td>
+          <td data-label="Route Viewer">
+            <a href="https://example.com">View Route</a>
+          </td>
+          <td data-label="Downloadable Schedule">
+            <a href="https://example.com">Download Schedule</a>
+          </td>
+        </tr>
+        <tr>
+          <td data-label="Bus Route">
+            <ul>
+              <li>2.1 Michigan</li>
+              <li>2.2 Ohio</li>
+              <li>2.3 Indiana</li>
+              <li>2.4 Illinois</li>
+            </ul>
+          </td>
+          <td data-label="Route Viewer">
+            <a href="https://example.com">View Route</a>
+          </td>
+          <td data-label="Downloadable Schedule">
+            <a href="https://example.com">Download Schedule</a>
+          </td>
+        </tr>
+        <tr>
+          <td data-label="Bus Route">
+            3 Gratiot
+          </td>
+          <td data-label="Route Viewer">
+            <a href="https://example.com">View Route</a>
+          </td>
+          <td data-label="Downloadable Schedule">
+            <a href="https://example.com">Download Schedule</a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </cod-table>
+`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import TableV2 from './TableV2';
		customElements.define('cod-table-v2', TableV2);