diff --git a/src/components/ListTable.js b/src/components/ListTable.js
index 8bebf6df3..5f4dd93f4 100644
--- a/src/components/ListTable.js
+++ b/src/components/ListTable.js
@@ -297,7 +297,7 @@ const ListTable = ({ nodeData: { children, options }, ...rest }) => {
         <TableHead className={cx(theadStyle)}>
           {headerRowCount > 0 &&
             table.getHeaderGroups().map((headerGroup) => (
-              <HeaderRow key={headerGroup.id}>
+              <HeaderRow key={headerGroup.id} data-testid="leafygreen-ui-header-row">
                 {headerGroup.headers.map((header) => {
                   return (
                     <HeaderCell className={cx(baseCellStyle, headerCellStyle)} key={header.id} header={header}>
diff --git a/tests/unit/__snapshots__/ListTable.test.js.snap b/tests/unit/__snapshots__/ListTable.test.js.snap
index b4a02eee6..87c3f6566 100644
--- a/tests/unit/__snapshots__/ListTable.test.js.snap
+++ b/tests/unit/__snapshots__/ListTable.test.js.snap
@@ -7,6 +7,7 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   width: 100%;
   position: relative;
   margin: 24px 0;
+  table-layout: fixed;
 }
 
 .emotion-1 {
@@ -35,11 +36,15 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
 .emotion-3 {
   padding: 0 8px;
   overflow: hidden;
+  padding-left: 32px;
   padding: 10px 8px!important;
   vertical-align: top;
   color: var(--font-color-primary);
   overflow-wrap: anywhere;
   word-break: break-word;
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: flex-start;
+  align-content: flex-start;
 }
 
 .emotion-3:focus-visible {
@@ -50,10 +55,6 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   padding-right: 24px;
 }
 
-.emotion-3:first-child {
-  padding-left: 32px;
-}
-
 .emotion-3 * {
   font-size: 13px!important;
   line-height: inherit;
@@ -64,18 +65,31 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   min-height: unset;
 }
 
+.emotion-3>div {
+  min-height: unset;
+  max-height: unset;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
 .emotion-3 *,
 .emotion-3 p,
 .emotion-3 a {
   line-height: 20px;
 }
 
-.emotion-3>div>div>*,
+.emotion-3>div>*,
 .emotion-3>div>div p {
   margin: 0 0 12px;
 }
 
-.emotion-3>div>div>*:last-child {
+.emotion-3>div>div *:last-child,
+.emotion-3>div>*:last-child {
   margin-bottom: 0;
 }
 
@@ -92,6 +106,9 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   transition-property: min-height,max-height,opacity,padding,transform;
   transition-duration: 150ms;
   transition-timing-function: ease;
+  opacity: 1;
+  min-height: 40px;
+  max-height: 40px;
   -webkit-box-pack: left;
   -ms-flex-pack: left;
   -webkit-justify-content: left;
@@ -99,6 +116,82 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
   text-align: left;
 }
 
+.emotion-5 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  margin-bottom: 16px;
+  color: var(--font-color-primary);
+}
+
+.emotion-5 strong,
+.emotion-5 b {
+  font-weight: 700;
+}
+
+.emotion-6 {
+  padding: 0 8px;
+  overflow: hidden;
+  padding: 10px 8px!important;
+  vertical-align: top;
+  color: var(--font-color-primary);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: flex-start;
+  align-content: flex-start;
+}
+
+.emotion-6:focus-visible {
+  box-shadow: inset;
+}
+
+.emotion-6:last-child {
+  padding-right: 24px;
+}
+
+.emotion-6 * {
+  font-size: 13px!important;
+  line-height: inherit;
+}
+
+.emotion-6>div {
+  height: unset;
+  min-height: unset;
+}
+
+.emotion-6>div {
+  min-height: unset;
+  max-height: unset;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.emotion-6 *,
+.emotion-6 p,
+.emotion-6 a {
+  line-height: 20px;
+}
+
+.emotion-6>div>*,
+.emotion-6>div>div p {
+  margin: 0 0 12px;
+}
+
+.emotion-6>div>div *:last-child,
+.emotion-6>div>*:last-child {
+  margin-bottom: 0;
+}
+
 <div
     class="emotion-0"
     tabindex="0"
@@ -131,72 +224,93 @@ exports[`when rendering a list table with fixed widths renders correctly 1`] = `
       />
       <tbody>
         <tr
+          aria-hidden="false"
           class=""
+          data-selected="false"
+          id="lg-table-row-0"
         >
           <td
-            class="emotion-3"
+            class="body-cell emotion-3"
           >
             <div
               class="emotion-4"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-5"
+              >
                 notebook
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-3"
+            class="body-cell emotion-6"
           >
             <div
               class="emotion-4"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-5"
+              >
                 50
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-3"
+            class="body-cell emotion-6"
           >
             <div
               class="emotion-4"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-5"
+              >
                 8.5x11,in
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-3"
+            class="body-cell emotion-6"
           >
             <div
               class="emotion-4"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-5"
+              >
                 A
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-3"
+            class="body-cell emotion-6"
           >
             <div
               class="emotion-4"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-5"
+              >
                 college-ruled,perforated
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-3"
+            class="body-cell emotion-6"
           >
             <div
               class="emotion-4"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-5"
+              >
                 8
-              </div>
+              </p>
             </div>
           </td>
         </tr>
@@ -213,6 +327,7 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   width: 100%;
   position: relative;
   margin: 24px 0;
+  table-layout: fixed;
 }
 
 .emotion-1 {
@@ -242,12 +357,14 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   padding: 0 8px;
   overflow: hidden;
   padding-left: 32px;
+  width: 150px;
   padding: 10px 8px!important;
   vertical-align: top;
   color: var(--font-color-primary);
   line-height: 24px;
   font-weight: 600;
   font-size: 13px;
+  width: auto;
 }
 
 .emotion-3:focus-visible {
@@ -292,12 +409,14 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 .emotion-5 {
   padding: 0 8px;
   overflow: hidden;
+  width: 150px;
   padding: 10px 8px!important;
   vertical-align: top;
   color: var(--font-color-primary);
   line-height: 24px;
   font-weight: 600;
   font-size: 13px;
+  width: auto;
 }
 
 .emotion-5:focus-visible {
@@ -333,11 +452,15 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 .emotion-16 {
   padding: 0 8px;
   overflow: hidden;
+  padding-left: 32px;
   padding: 10px 8px!important;
   vertical-align: top;
   color: var(--font-color-primary);
   overflow-wrap: anywhere;
   word-break: break-word;
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: flex-start;
+  align-content: flex-start;
   background-color: #F9FBFA;
   border-right: 3px solid #E8EDEB;
   font-weight: 600;
@@ -351,10 +474,6 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   padding-right: 24px;
 }
 
-.emotion-16:first-child {
-  padding-left: 32px;
-}
-
 .emotion-16 * {
   font-size: 13px!important;
   line-height: inherit;
@@ -365,18 +484,31 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   min-height: unset;
 }
 
+.emotion-16>div {
+  min-height: unset;
+  max-height: unset;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
 .emotion-16 *,
 .emotion-16 p,
 .emotion-16 a {
   line-height: 20px;
 }
 
-.emotion-16>div>div>*,
+.emotion-16>div>*,
 .emotion-16>div>div p {
   margin: 0 0 12px;
 }
 
-.emotion-16>div>div>*:last-child {
+.emotion-16>div>div *:last-child,
+.emotion-16>div>*:last-child {
   margin-bottom: 0;
 }
 
@@ -398,6 +530,9 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   transition-property: min-height,max-height,opacity,padding,transform;
   transition-duration: 150ms;
   transition-timing-function: ease;
+  opacity: 1;
+  min-height: 40px;
+  max-height: 40px;
   -webkit-box-pack: left;
   -ms-flex-pack: left;
   -webkit-justify-content: left;
@@ -406,6 +541,23 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
 }
 
 .emotion-18 {
+  margin: unset;
+  font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
+  color: #001E2B;
+  font-size: 13px;
+  line-height: 20px;
+  color: #001E2B;
+  font-weight: 400;
+  margin-bottom: 16px;
+  color: var(--font-color-primary);
+}
+
+.emotion-18 strong,
+.emotion-18 b {
+  font-weight: 700;
+}
+
+.emotion-19 {
   padding: 0 8px;
   overflow: hidden;
   padding: 10px 8px!important;
@@ -413,42 +565,54 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
   color: var(--font-color-primary);
   overflow-wrap: anywhere;
   word-break: break-word;
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: flex-start;
+  align-content: flex-start;
 }
 
-.emotion-18:focus-visible {
+.emotion-19:focus-visible {
   box-shadow: inset;
 }
 
-.emotion-18:last-child {
+.emotion-19:last-child {
   padding-right: 24px;
 }
 
-.emotion-18:first-child {
-  padding-left: 32px;
-}
-
-.emotion-18 * {
+.emotion-19 * {
   font-size: 13px!important;
   line-height: inherit;
 }
 
-.emotion-18>div {
+.emotion-19>div {
   height: unset;
   min-height: unset;
 }
 
-.emotion-18 *,
-.emotion-18 p,
-.emotion-18 a {
+.emotion-19>div {
+  min-height: unset;
+  max-height: unset;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+}
+
+.emotion-19 *,
+.emotion-19 p,
+.emotion-19 a {
   line-height: 20px;
 }
 
-.emotion-18>div>div>*,
-.emotion-18>div>div p {
+.emotion-19>div>*,
+.emotion-19>div>div p {
   margin: 0 0 12px;
 }
 
-.emotion-18>div>div>*:last-child {
+.emotion-19>div>div *:last-child,
+.emotion-19>div>*:last-child {
   margin-bottom: 0;
 }
 
@@ -467,437 +631,524 @@ exports[`when rendering a list-table directive renders correctly 1`] = `
         >
           <th
             class="emotion-3"
-            role="columnheader"
             scope="col"
           >
             <div
               class="emotion-4"
             >
-              <div>
-                name
-              </div>
+              name
             </div>
           </th>
           <th
             class="emotion-5"
-            role="columnheader"
             scope="col"
           >
             <div
               class="emotion-4"
             >
-              <div>
-                quantity
-              </div>
+              quantity
             </div>
           </th>
           <th
             class="emotion-5"
-            role="columnheader"
             scope="col"
           >
             <div
               class="emotion-4"
             >
-              <div>
-                size
-              </div>
+              size
             </div>
           </th>
           <th
             class="emotion-5"
-            role="columnheader"
             scope="col"
           >
             <div
               class="emotion-4"
             >
-              <div>
-                status
-              </div>
+              status
             </div>
           </th>
           <th
             class="emotion-5"
-            role="columnheader"
             scope="col"
           >
             <div
               class="emotion-4"
             >
-              <div>
-                tags
-              </div>
+              tags
             </div>
           </th>
           <th
             class="emotion-5"
-            role="columnheader"
             scope="col"
           >
             <div
               class="emotion-4"
             >
-              <div>
-                rating
-              </div>
+              rating
             </div>
           </th>
         </tr>
       </thead>
       <tbody>
         <tr
+          aria-hidden="false"
           class="emotion-15"
+          data-selected="false"
+          id="lg-table-row-0"
         >
           <td
-            class="emotion-16"
+            class="body-cell emotion-16"
             role="rowheader"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 journal
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 25
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 14x21,cm
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 A
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 brown, lined
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 9
-              </div>
+              </p>
             </div>
           </td>
         </tr>
         <tr
+          aria-hidden="false"
           class="emotion-15"
+          data-selected="false"
+          id="lg-table-row-1"
         >
           <td
-            class="emotion-16"
+            class="body-cell emotion-16"
             role="rowheader"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 notebook
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 50
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 8.5x11,in
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 A
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 college-ruled,perforated
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 8
-              </div>
+              </p>
             </div>
           </td>
         </tr>
         <tr
+          aria-hidden="false"
           class="emotion-15"
+          data-selected="false"
+          id="lg-table-row-2"
         >
           <td
-            class="emotion-16"
+            class="body-cell emotion-16"
             role="rowheader"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 paper
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 100
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 8.5x11,in
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 D
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 watercolor
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 10
-              </div>
+              </p>
             </div>
           </td>
         </tr>
         <tr
+          aria-hidden="false"
           class="emotion-15"
+          data-selected="false"
+          id="lg-table-row-3"
         >
           <td
-            class="emotion-16"
+            class="body-cell emotion-16"
             role="rowheader"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 planner
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 75
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 22.85x30,cm
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 D
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 2019
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 10
-              </div>
+              </p>
             </div>
           </td>
         </tr>
         <tr
+          aria-hidden="false"
           class="emotion-15"
+          data-selected="false"
+          id="lg-table-row-4"
         >
           <td
-            class="emotion-16"
+            class="body-cell emotion-16"
             role="rowheader"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 postcard
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 45
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 10x,cm
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 D
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 double-sided,white
-              </div>
+              </p>
             </div>
           </td>
           <td
-            class="emotion-18"
+            class="body-cell emotion-19"
           >
             <div
               class="emotion-17"
+              data-state="entered"
             >
-              <div>
+              <p
+                class="emotion-18"
+              >
                 2
-              </div>
+              </p>
             </div>
           </td>
         </tr>