hashicorp · shleewhite · Sep 19, 2024 · Sep 19, 2024
diff --git a/packages/components/src/components/hds/table/index.hbs b/packages/components/src/components/hds/table/index.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<table class={{this.classNames}} ...attributes>
+<table class={{this.classNames}} ...attributes role={{if @isGrid "grid"}}>
   {{#if @columns}}
     <caption class="sr-only" aria-live="polite">{{@caption}} {{this.sortedMessageText}}</caption>
   {{else if @caption}}
@@ -30,6 +30,8 @@
               @align={{column.align}}
               @width={{column.width}}
               @tooltip={{column.tooltip}}
+              @isGrid={{@isGrid}}
+              @isActiveGridCell={{if (eq column.key this.currentActiveGridCell) true false}}
             >
               {{column.label}}
             </Hds::Table::ThSort>
@@ -39,6 +41,8 @@
               @width={{column.width}}
               @tooltip={{column.tooltip}}
               @isVisuallyHidden={{column.isVisuallyHidden}}
+              @isGrid={{@isGrid}}
+              @isActiveGridCell={{if (eq column.key this.currentActiveGridCell) true false}}
             >{{column.label}}</Hds::Table::Th>
           {{/if}}
         {{/each}}
@@ -88,7 +92,7 @@
               selectionAriaLabelSuffix=@selectionAriaLabelSuffix
             )
             Th=(component "hds/table/th" scope="row")
-            Td=(component "hds/table/td" align=@align)
+            Td=(component "hds/table/td" align=@align isGrid=@isGrid)
             data=record
           )
           to="body"
@@ -107,7 +111,7 @@
             selectionAriaLabelSuffix=@selectionAriaLabelSuffix
           )
           Th=(component "hds/table/th" scope="row")
-          Td=(component "hds/table/td" align=@align)
+          Td=(component "hds/table/td" align=@align isGrid=@isGrid)
           sortBy=this.sortBy
           sortOrder=this.sortOrder
         )

diff --git a/packages/components/src/components/hds/table/index.ts b/packages/components/src/components/hds/table/index.ts
@@ -49,6 +49,7 @@ export interface HdsTableArgs {
     density?: HdsTableDensities;
     identityKey?: string;
     isFixedLayout?: boolean;
+    isGrid?: boolean;
     isSelectable?: boolean;
     isStriped?: boolean;
     model?: HdsTableModel;
@@ -93,6 +94,9 @@ export default class HdsTable extends Component<HdsTableArgs> {
     undefined;
   selectableRows: HdsTableSelectableRow[] = [];
   @tracked isSelectAllCheckboxSelected?: boolean = undefined;
+  @tracked currentActiveGridCell?: string = this.args.isGrid
+    ? this.args?.columns?.[0]?.key ?? undefined
+    : undefined;
 
   get getSortCriteria(): string | HdsTableSortingFunction<unknown> {
     // get the current column

diff --git a/packages/components/src/components/hds/table/td.hbs b/packages/components/src/components/hds/table/td.hbs
@@ -2,6 +2,11 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<td class={{this.classNames}} ...attributes>
+<td
+  class={{this.classNames}}
+  ...attributes
+  role={{if @isGrid "gridcell"}}
+  tabindex={{if @isGrid (if @isActiveGridCell 0 -1)}}
+>
   {{yield}}
 </td>
diff --git a/packages/components/src/components/hds/table/td.ts b/packages/components/src/components/hds/table/td.ts
@@ -17,6 +17,8 @@ export const DEFAULT_ALIGN = HdsTableHorizontalAlignmentValues.Left;
 export interface HdsTableTdArgs {
   Args: {
     align?: HdsTableHorizontalAlignment;
+    isGrid?: boolean;
+    isActiveGridCell?: boolean;
   };
   Blocks: {
     default: [];
@@ -59,6 +61,14 @@ export default class HdsTableTd extends Component<HdsTableTdArgs> {
       classes.push(`hds-table__td--align-${this.align}`);
     }
 
+    if (this.args.isGrid) {
+      classes.push(`hds-table__td--gridcell`);
+    }
+
+    if (this.args.isActiveGridCell) {
+      classes.push(`hds-table__td--gridcell-active`);
+    }
+
     return classes.join(' ');
   }
 }
diff --git a/packages/components/src/components/hds/table/th-sort.hbs b/packages/components/src/components/hds/table/th-sort.hbs
@@ -8,6 +8,7 @@
   {{style width=@width minWidth=@width}}
   ...attributes
   scope="col"
+  tabindex={{if @isGrid (if @isActiveGridCell 0 -1)}}
 >
   <div class="hds-table__th-content">
     <span id={{this.labelId}} class="hds-typography-body-200 hds-font-weight-semibold">{{yield}}</span>

diff --git a/packages/components/src/components/hds/table/th-sort.ts b/packages/components/src/components/hds/table/th-sort.ts
@@ -31,6 +31,8 @@ export interface HdsTableThSortArgs {
     sortOrder?: HdsTableThSortOrder;
     tooltip?: string;
     width?: string;
+    isGrid?: boolean;
+    isActiveGridCell?: boolean;
   };
   Blocks: {
     default: [];
@@ -96,6 +98,14 @@ export default class HdsTableThSort extends Component<HdsTableThSortArgs> {
       classes.push(`hds-table__th--align-${this.align}`);
     }
 
+    if (this.args.isGrid) {
+      classes.push(`hds-table__td--gridcell`);
+    }
+
+    if (this.args.isActiveGridCell) {
+      classes.push(`hds-table__td--gridcell-active`);
+    }
+
     return classes.join(' ');
   }
 }
diff --git a/packages/components/src/components/hds/table/th.hbs b/packages/components/src/components/hds/table/th.hbs
@@ -2,7 +2,13 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<th class={{this.classNames}} {{style width=@width minWidth=@width}} ...attributes scope={{(or @scope "col")}}>
+<th
+  class={{this.classNames}}
+  {{style width=@width minWidth=@width}}
+  ...attributes
+  scope={{(or @scope "col")}}
+  tabindex={{if @isGrid (if @isActiveGridCell 0 -1)}}
+>
   {{#if @isVisuallyHidden}}
     <span class="sr-only">{{yield}}</span>
   {{else}}

diff --git a/packages/components/src/components/hds/table/th.ts b/packages/components/src/components/hds/table/th.ts
@@ -22,6 +22,8 @@ export interface HdsTableThArgs {
     scope?: HdsTableScope;
     tooltip?: string;
     width?: string;
+    isGrid?: boolean;
+    isActiveGridCell?: boolean;
   };
   Blocks: {
     default: [];
@@ -68,6 +70,14 @@ export default class HdsTableTh extends Component<HdsTableThArgs> {
       classes.push(`hds-table__th--align-${this.align}`);
     }
 
+    if (this.args.isGrid) {
+      classes.push(`hds-table__td--gridcell`);
+    }
+
+    if (this.args.isActiveGridCell) {
+      classes.push(`hds-table__td--gridcell-active`);
+    }
+
     return classes.join(' ');
   }
 }
diff --git a/packages/components/src/styles/components/table.scss b/packages/components/src/styles/components/table.scss
@@ -19,6 +19,11 @@ $hds-table-cell-padding-medium: 14px 16px 13px 16px; // the 1px difference is to
 $hds-table-cell-padding-short: 6px 16px 5px 16px; // the 1px difference is to account for the bottom border
 $hds-table-cell-padding-tall: 22px 16px 21px 16px; // the 1px difference is to account for the bottom border
 
+.hds-table {
+  .hds-table__td--gridcell-active {
+    background-color: red
+  }
+}
 
 // TABLE
 

diff --git a/showcase/app/templates/components/table.hbs b/showcase/app/templates/components/table.hbs
@@ -7,6 +7,39 @@
 
 <Shw::Text::H1>Table</Shw::Text::H1>
 
+<Hds::Table
+  @isGrid={{true}}
+  @model={{this.model.music}}
+  @columns={{array
+    (hash key="artist" label="Artist" isSortable=true)
+    (hash key="album" label="Album" isSortable=true)
+    (hash key="year" label="Release Year" isSortable=true)
+    (hash key="other" label="Additional Actions")
+  }}
+>
+  <:body as |B|>
+    <B.Tr>
+      <B.Td><Hds::Link::Inline @href="#showcase">{{B.data.artist}}</Hds::Link::Inline></B.Td>
+      <B.Td>
+        <div class="shw-component-table-cell-content-div">
+          <Hds::Icon @name={{B.data.icon}} @isInline={{true}} />
+          {{B.data.album}}
+        </div>
+      </B.Td>
+      <B.Td>
+        <Hds::Badge @text={{B.data.year}} @type={{B.data.badge-type}} @color={{B.data.badge-color.name}} />
+      </B.Td>
+      <B.Td>
+        <Hds::ButtonSet>
+          <Hds::Button @text="Add" @isIconOnly={{true}} @icon="plus" @size="small" />
+          <Hds::Button @text="Edit" @isIconOnly={{true}} @icon="edit" @size="small" @color="secondary" />
+          <Hds::Button @text="Delete" @isIconOnly={{true}} @icon="trash" @size="small" @color="critical" />
+        </Hds::ButtonSet>
+      </B.Td>
+    </B.Tr>
+  </:body>
+</Hds::Table>
+
 <section data-test-percy>
   <Shw::Text::H2>Data model</Shw::Text::H2>