trying new approach

Author: zamoore

packages/components/src/components/hds/table/index.hbs

@@ -13,6 +13,7 @@
   <thead class="hds-table__thead">
     {{#if @columns}}
       <Hds::Table::Tr
+        @sortOrder={{if (eq this.sortBy @selectedItemKey) this.sortOrder}}
         @selectionScope="col"
         @isSelectable={{@isSelectable}}
         @onSelectionChange={{this.onSelectionAllChange}}
@@ -78,6 +79,7 @@
               "hds/table/tr"
               selectionScope="row"
               isSelectable=@isSelectable
+              onClickSort=(fn this.setSortBy @selectedItemKey)
               onSelectionChange=this.onSelectionRowChange
               didInsert=this.didInsertRowCheckbox
               willDestroy=this.willDestroyRowCheckbox

packages/components/src/components/hds/table/index.ts

@@ -23,6 +23,7 @@ import type {
   HdsTableSortingFunction,
   HdsTableThSortOrder,
   HdsTableVerticalAlignment,
+  HdsTableModel,
 } from './types';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
 import type { HdsTableTdArgs } from './td.ts';
@@ -50,7 +51,8 @@ export interface HdsTableArgs {
     isFixedLayout?: boolean;
     isSelectable?: boolean;
     isStriped?: boolean;
-    model: Array<Record<string, unknown>>;
+    model: HdsTableModel;
+    selectedItemKey?: string;
     onSelectionChange?: (selection: HdsTableOnSelectionChangeArgs) => void;
     onSort?: (sortBy: string, sortOrder: HdsTableThSortOrder) => void;
     selectionAriaLabelSuffix?: string;
@@ -190,7 +192,11 @@ export default class HdsTable extends Component<HdsTableArgs> {
   }
 
   @action
-  setSortBy(column: string): void {
+  setSortBy(column?: string): void {
+    if (column === undefined) {
+      return;
+    }
+
     if (this.sortBy === column) {
       // check to see if the column is already sorted and invert the sort order if so
       this.sortOrder =

packages/components/src/components/hds/table/th-selectable.hbs

@@ -4,13 +4,18 @@
 }}
 
 <Hds::Table::Th class="hds-table__th--is-selectable" @scope={{@selectionScope}} ...attributes>
-  <Hds::Form::Checkbox::Base
-    id={{this.checkboxId}}
-    class="hds-table__checkbox"
-    checked={{@isSelected}}
-    aria-label={{this.ariaLabel}}
-    {{did-insert this.didInsert}}
-    {{will-destroy this.willDestroyNode}}
-    {{on "change" this.onSelectionChange}}
-  />
+  <div class="hds-table__th--is-selectable__inner-wrapper">
+    <Hds::Form::Checkbox::Base
+      id={{this.checkboxId}}
+      class="hds-table__checkbox"
+      checked={{@isSelected}}
+      aria-label={{this.ariaLabel}}
+      {{did-insert this.didInsert}}
+      {{will-destroy this.willDestroyNode}}
+      {{on "change" this.onSelectionChange}}
+    />
+    {{#if @isHeaderRow}}
+      <Hds::Table::ThButtonSort @sortOrder={{@sortOrder}} @onClick={{@onClickSort}} />
+    {{/if}}
+  </div>
 </Hds::Table::Th>

packages/components/src/components/hds/table/th-selectable.ts

@@ -10,9 +10,14 @@ import { tracked } from '@glimmer/tracking';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
 import type { HdsTableScope } from './types';
 import type { HdsTableThArgs } from './th';
+import type { HdsTableTrArgs } from './tr';
 
 export interface HdsTableThSelectableArgs {
   Args: {
+    isHeaderRow?: boolean;
+    sortOrder?: HdsTableTrArgs['Args']['sortOrder'];
+    onClickSort: HdsTableTrArgs['Args']['onClickSort'];
+    // new above here
     didInsert: (
       checkbox: HdsFormCheckboxBaseSignature['Element'],
       selectionKey?: string

packages/components/src/components/hds/table/tr.hbs

@@ -6,6 +6,10 @@
 <tr class="hds-table__tr" ...attributes>
   {{#if @isSelectable}}
     <Hds::Table::ThSelectable
+      @isHeaderRow={{this.isHeaderRow}}
+      @sortOrder={{@sortOrder}}
+      @onClickSort={{@onClickSort}}
+      {{!-- new above here --}}
       @isSelected={{@isSelected}}
       @selectionScope={{@selectionScope}}
       @selectionKey={{this.selectionKey}}

packages/components/src/components/hds/table/tr.ts

@@ -6,11 +6,16 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { HdsTableScopeValues } from './types.ts';
-import type { HdsTableScope } from './types.ts';
+import type { HdsTableScope, HdsTableThSortOrder } from './types.ts';
 import type { HdsFormCheckboxBaseSignature } from '../form/checkbox/base';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export interface BaseHdsTableTrArgs {
   Args: {
+    sortOrder?: HdsTableThSortOrder;
+    onClickSort?: (sortBy?: string) => void;
+    // NEW ABOVE
     isSelectable?: boolean;
     isSelected?: false;
     selectionAriaLabelSuffix?: string;
@@ -44,12 +49,24 @@ export interface SelectableHdsTableTrArgs extends BaseHdsTableTrArgs {
 // Union type to combine both possible states
 export type HdsTableTrArgs = BaseHdsTableTrArgs | SelectableHdsTableTrArgs;
 
+function getRowContainerElement(
+  element: HTMLTableRowElement
+): HTMLElement | null {
+  let parent = element.parentElement;
+
+  while (parent && parent.tagName !== 'TABLE') {
+    if (['TBODY', 'THEAD'].includes(parent.tagName)) {
+      return parent;
+    }
+
+    parent = parent.parentElement;
+  }
+
+  return parent;
+}
 export default class HdsTableTr extends Component<HdsTableTrArgs> {
-  /**
-   * @param selectionKey
-   * @type {string}
-   * @default undefined
-   */
+  @tracked isHeaderRow = false;
+
   get selectionKey(): string | undefined {
     if (this.args.isSelectable && this.args.selectionScope === 'row') {
       assert(
@@ -60,4 +77,11 @@ export default class HdsTableTr extends Component<HdsTableTrArgs> {
     }
     return undefined;
   }
+
+  @action
+  didInsert(element: HdsTableTrArgs['Element']) {
+    const rowContainer = getRowContainerElement(element);
+
+    this.isHeaderRow = rowContainer?.tagName === 'THEAD';
+  }
 }

packages/components/src/components/hds/table/types.ts

@@ -91,3 +91,5 @@ export interface HdsTableOnSelectionChangeArgs {
     isSelected?: boolean;
   }[];
 }
+
+export type HdsTableModel = Array<Record<string, unknown>>;