From d86b9021ba52338813cf3eb77392b2d205a0d39a Mon Sep 17 00:00:00 2001
From: Harshil <harshil.moradia@adhoc.team>
Date: Thu, 17 Oct 2024 14:47:01 -0500
Subject: [PATCH] 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 <harshil.moradia@harshilmoradia-pywy4dk942.lan>
Co-authored-by: Andrew Steele <andrew.steele@adhocteam.us>
---
 .../components/va-table/va-table-inner/va-table-inner.scss   | 4 ----
 .../components/va-table/va-table-inner/va-table-inner.tsx    | 5 +++--
 2 files changed, 3 insertions(+), 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
index 2310e7234..fd88591ff 100644
--- 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
index 38d8f849c..833d9281b 100644
--- 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>
     )