va-table: show table header for non-stacked & stacked small screen (#…

…1364) * fix: show table header for non stacked small screen * headers for stacked tables --------- Co-authored-by: Harshil Moradia <[email protected]> Co-authored-by: Andrew Steele <[email protected]>
department-of-veterans-affairs · Oct 17, 2024 · d86b902 · d86b902
1 parent 04b609f
commit d86b902
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.scss b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.scss
@@ -34,10 +34,6 @@ caption {
 }
 
 @media screen and (max-width: 768px) {
-  thead, ::slotted([slot=headers]) {
-    display: none;
-  }
-
   ::slotted(va-table-row) {
     border-bottom: 1px solid var(--vads-color-gray-medium);
   }

diff --git a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx
@@ -64,9 +64,10 @@ export class VaTableInner {
         {Array.from({ length: this.cols }).map((_, i) => {
           const slotName = `va-table-slot-${row * this.cols + i}`;
           const slot = <slot name={slotName}></slot>
+          const header = this.el.querySelector(`[slot="va-table-slot-${i}"]`).innerHTML;
           return (i === 0 || row === 0)
-            ? <th scope="row">{slot}</th>
-            : <td>{slot}</td>
+            ? <th data-label={header} scope="row">{slot}</th>
+            : <td data-label={header}>{slot}</td>
         })}
       </tr>
     )