AdvancedTable - add @maxHeight argument and fix the container styles (#2865)

shleewhite · web-flow · commit b724dbda7240 · 2025-05-14T11:14:26.000-07:00
diff --git a/.changeset/rotten-geese-swim.md b/.changeset/rotten-geese-swim.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`AdvancedTable` - Added `@maxHeight` argument which automatically adds a sticky header when set and sets the max height of the AdvancedTable. Also updated the container styles to constrain the Advanced Table width to the parent's width.
diff --git a/packages/components/src/components/hds/advanced-table/index.hbs b/packages/components/src/components/hds/advanced-table/index.hbs
@@ -21,6 +21,7 @@
     {{style
       grid-template-columns=this.gridTemplateColumns
       --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset
+      max-height=@maxHeight
     }}
     {{this._setUpScrollWrapper}}
   >
diff --git a/packages/components/src/components/hds/advanced-table/index.ts b/packages/components/src/components/hds/advanced-table/index.ts
@@ -132,6 +132,7 @@ export interface HdsAdvancedTableSignature {
     hasStickyHeader?: boolean;
     hasStickyFirstColumn?: boolean;
     childrenKey?: string;
+    maxHeight?: string;
   };
   Blocks: {
     body?: [
@@ -311,6 +312,16 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
     return density;
   }
 
+  get hasStickyHeader(): boolean {
+    if (this.args.maxHeight && this.args.hasStickyHeader !== false) {
+      return true;
+    } else if (this.args.hasStickyHeader && !this.args.maxHeight) {
+      assert('Must set @maxHeight to use @hasStickyHeader.', false);
+    }
+
+    return false;
+  }
+
   get valign(): HdsAdvancedTableVerticalAlignment {
     const { valign = DEFAULT_VALIGN } = this.args;
 
@@ -371,7 +382,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
   get theadClassNames(): string {
     const classes = ['hds-advanced-table__thead'];
 
-    if (this.args.hasStickyHeader) {
+    if (this.hasStickyHeader) {
       classes.push('hds-advanced-table__thead--sticky');
     }
 
@@ -411,12 +422,12 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
 
       // sticky header
       if (element.scrollTop > 0) {
-        if (this.args.hasStickyHeader) {
+        if (this.hasStickyHeader) {
           this.isStickyHeaderPinned = true;
         }
         this.showScrollIndicatorTop = true;
       } else {
-        if (this.args.hasStickyHeader) {
+        if (this.hasStickyHeader) {
           this.isStickyHeaderPinned = false;
         }
         this.showScrollIndicatorTop = false;
@@ -440,7 +451,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
       this.scrollIndicatorDimensions = getScrollIndicatorDimensions(
         element,
         this._theadElement,
-        hasStickyHeader,
+        this.hasStickyHeader,
         hasStickyFirstColumn
       );
 
@@ -452,11 +463,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
       }
     };
 
-    const {
-      hasStickyHeader = false,
-      hasStickyFirstColumn = false,
-      isSelectable = false,
-    } = this.args;
+    const { hasStickyFirstColumn = false, isSelectable = false } = this.args;
 
     this._resizeObserver = new ResizeObserver((entries) => {
       entries.forEach(() => {
diff --git a/packages/components/src/styles/components/advanced-table.scss b/packages/components/src/styles/components/advanced-table.scss
@@ -25,6 +25,8 @@ $hds-advanced-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px differenc
 
 .hds-advanced-table__container {
   position: relative;
+  display: grid;
+  align-items: start;
   width: 100%;
   height: 100%;
   // add overflow hidden and border radius so scroll shadows appear rounded in the corners
diff --git a/showcase/app/components/mock/app/main/generic-advanced-table.gts b/showcase/app/components/mock/app/main/generic-advanced-table.gts
@@ -519,95 +519,93 @@ export default class MockAppMainGenericAdvancedTable extends Component<MockAppMa
   }
 
   <template>
-    <div class="mock-app-main-generic-advanced-table-wrapper">
-      <HdsAdvancedTable
-        @columns={{this.demoColumns}}
-        @model={{this.demoModel}}
-        @hasStickyHeader={{true}}
-        @isSelectable={{true}}
-        @isStriped={{true}}
-        @onSelectionChange={{this.onSelectionChange}}
-        @hasStickyFirstColumn={{true}}
-      >
-        <:body as |B|>
-          {{! @glint-expect-error }}
-          <B.Tr @selectionKey={{get B.data "name"}}>
-            <B.Th>
-              <HdsLinkInline @href="www.google.com">
-                {{! @glint-expect-error }}
-                {{get B.data "name"}}
-              </HdsLinkInline>
-            </B.Th>
-            <B.Td>
-              <HdsLinkInline @href="www.google.com">
-                {{! @glint-expect-error }}
-                {{get B.data "project-name"}}
-              </HdsLinkInline>
-            </B.Td>
-            <B.Td>
-              <HdsLinkInline @href="www.google.com">
-                {{! @glint-expect-error }}
-                {{get B.data "current-run-id"}}
-              </HdsLinkInline>
-            </B.Td>
-            <B.Td>
-              <HdsBadge
-                @type="outlined"
-                {{! @glint-expect-error }}
-                @text={{get B.data "run-status"}}
-                {{! @glint-expect-error }}
-                @color={{get B.data "run-status-color"}}
-              />
-            </B.Td>
-            <B.Td>
+    <HdsAdvancedTable
+      @columns={{this.demoColumns}}
+      @model={{this.demoModel}}
+      @maxHeight="600px"
+      @isSelectable={{true}}
+      @isStriped={{true}}
+      @onSelectionChange={{this.onSelectionChange}}
+      @hasStickyFirstColumn={{true}}
+    >
+      <:body as |B|>
+        {{! @glint-expect-error }}
+        <B.Tr @selectionKey={{get B.data "name"}}>
+          <B.Th>
+            <HdsLinkInline @href="www.google.com">
               {{! @glint-expect-error }}
-              {{get B.data "current-run-applied"}}
-            </B.Td>
-            <B.Td>
+              {{get B.data "name"}}
+            </HdsLinkInline>
+          </B.Th>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
               {{! @glint-expect-error }}
-              {{get B.data "vcs-repo"}}
-            </B.Td>
-            <B.Td>
-              <HdsLinkInline @href="www.google.com">
-                {{! @glint-expect-error }}
-                {{get B.data "module-count"}}
-              </HdsLinkInline>
-            </B.Td>
-            <B.Td>
+              {{get B.data "project-name"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
               {{! @glint-expect-error }}
-              {{get B.data "modules"}}
-            </B.Td>
-            <B.Td>
-              <HdsLinkInline @href="www.google.com">
-                {{! @glint-expect-error }}
-                {{get B.data "provider-count"}}
-              </HdsLinkInline>
-            </B.Td>
-            <B.Td>
+              {{get B.data "current-run-id"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsBadge
+              @type="outlined"
               {{! @glint-expect-error }}
-              {{get B.data "providers"}}
-            </B.Td>
-            <B.Td>
+              @text={{get B.data "run-status"}}
               {{! @glint-expect-error }}
-              {{get B.data "terraform-version"}}
-            </B.Td>
-            <B.Td>
-              <HdsLinkInline @href="www.google.com">
-                {{! @glint-expect-error }}
-                {{get B.data "state-terraform-version"}}
-              </HdsLinkInline>
-            </B.Td>
-            <B.Td>
+              @color={{get B.data "run-status-color"}}
+            />
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "current-run-applied"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "vcs-repo"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
               {{! @glint-expect-error }}
-              {{get B.data "created"}}
-            </B.Td>
-            <B.Td>
+              {{get B.data "module-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "modules"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
               {{! @glint-expect-error }}
-              {{get B.data "updated"}}
-            </B.Td>
-          </B.Tr>
-        </:body>
-      </HdsAdvancedTable>
-    </div>
+              {{get B.data "provider-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "providers"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "terraform-version"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "state-terraform-version"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "created"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "updated"}}
+          </B.Td>
+        </B.Tr>
+      </:body>
+    </HdsAdvancedTable>
   </template>
 }
diff --git a/showcase/app/styles/mock-components/app.scss b/showcase/app/styles/mock-components/app.scss
@@ -42,10 +42,3 @@
   gap: 12px;
   margin-bottom: 12px;
 }
-
-.mock-app-main-generic-advanced-table-wrapper {
-  // TODO remove after https://hashicorp.atlassian.net/browse/HDS-4751 is done
-  display: grid;
-  height: 600px;
-  overflow: auto;
-}
diff --git a/showcase/app/styles/showcase-pages/advanced-table.scss b/showcase/app/styles/showcase-pages/advanced-table.scss
@@ -22,26 +22,17 @@ body.components-advanced-table {
     .shw-component-advanced-table-cell-content-div {
       display: flex;
       align-items: center;
-  
+
       .hds-icon {
         flex: none;
         margin-right: 5px;
       }
     }
 
-  .shw-component-advanced-table-fixed-height-wrapper {
-    height: 400px;
-  }
-
   .shw-component-advanced-table-fixed-width-wrapper {
     width: 400px;
   }
 
-  .shw-component-advanced-table-fixed-dimensions-wrapper {
-    width: 400px;
-    height: 400px;
-  }
-
   .shw-component-advanced-table-with-pagination-demo-wrapper {
     .hds-table + .hds-pagination {
       margin-top: 16px;
@@ -77,4 +68,4 @@ body.components-advanced-table {
     animation: shw-component-table-user-bounce 1s infinite ease-in-out;
   }
 
-}
+}
diff --git a/showcase/app/templates/components/advanced-table.hbs b/showcase/app/templates/components/advanced-table.hbs
diff --git a/showcase/tests/integration/components/hds/advanced-table/index-test.js b/showcase/tests/integration/components/hds/advanced-table/index-test.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@hashicorp/design-system-components": patch
 +---
++
 +`AdvancedTable` - Added `@maxHeight` argument which automatically adds a sticky header when set and sets the max height of the AdvancedTable. Also updated the container styles to constrain the Advanced Table width to the parent's width.
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`	`{{style`
`22`	`22`	`grid-template-columns=this.gridTemplateColumns`
`23`	`23`	`--hds-advanced-table-sticky-column-offset=this.stickyColumnOffset`
	`24`	`+ max-height=@maxHeight`
`24`	`25`	`}}`
`25`	`26`	`{{this._setUpScrollWrapper}}`
`26`	`27`	`>`