Zamoore/advanced table/column reordering 2

.changeset/wet-files-joke.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+<!-- START components/table/advanced-table -->
+`AdvancedTable` - Added support for column reordering.
+- Added `@hasReorderableColumns` argument. When set to `true`, enables column reordering.
+- Added optional `@columnOrder` argument for setting the initial order of columns by their keys.
+- Added optional `@onColumnReorder` argument which accepts a callback function that is called when reordering is completed.
+- Added optional `@reorderedMessageText` which overrides the default message text that is rendered in the table caption when a column is reordered.
+<!-- END -->

packages/components/package.json

@@ -154,11 +154,14 @@
       "./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
       "./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
       "./components/hds/advanced-table/th-context-menu.js": "./dist/_app_/components/hds/advanced-table/th-context-menu.js",
+      "./components/hds/advanced-table/th-reorder-drop-target.js": "./dist/_app_/components/hds/advanced-table/th-reorder-drop-target.js",
+      "./components/hds/advanced-table/th-reorder-handle.js": "./dist/_app_/components/hds/advanced-table/th-reorder-handle.js",
       "./components/hds/advanced-table/th-resize-handle.js": "./dist/_app_/components/hds/advanced-table/th-resize-handle.js",
       "./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
       "./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
       "./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",
       "./components/hds/advanced-table/tr.js": "./dist/_app_/components/hds/advanced-table/tr.js",
+      "./components/hds/advanced-table/utils.js": "./dist/_app_/components/hds/advanced-table/utils.js",
       "./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
       "./components/hds/alert.js": "./dist/_app_/components/hds/alert.js",
       "./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",

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

@@ -2,16 +2,19 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
+
 <div
   class="hds-advanced-table__container
     {{(if this.isStickyHeaderPinned 'hds-advanced-table__container--header-is-pinned')}}"
   {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}
+  {{did-update this.updateTableModelColumnOrder @columnOrder}}
   ...attributes
 >
   {{! Caption }}
   <div id={{this._captionId}} class="sr-only hds-advanced-table__caption" aria-live="polite">
     {{@caption}}
     {{this.sortedMessageText}}
+    {{this.reorderedMessageText}}
   </div>
 
   {{! Grid }}
@@ -28,7 +31,12 @@
     {{this._setUpScrollWrapper}}
   >
     {{! Header }}
-    <div class={{this.theadClassNames}} role="rowgroup" {{this._setUpThead}}>
+    <div
+      class={{this.theadClassNames}}
+      role="rowgroup"
+      {{this._setUpThead}}
+      {{on "dragleave" (fn (mut this._tableModel.reorderHoveredColumn) null)}}
+    >
       <Hds::AdvancedTable::Tr
         @selectionScope="col"
         @onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}
@@ -41,20 +49,25 @@
         @hasStickyColumn={{this.hasStickyFirstColumn}}
         @isStickyColumnPinned={{this.isStickyColumnPinned}}
       >
-        {{#each this._tableModel.columns as |column|}}
+        {{#each this._tableModel.orderedColumns as |column|}}
           {{#if column.isSortable}}
             <Hds::AdvancedTable::ThSort
               @column={{column}}
               @sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}
               @onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}
               @align={{column.align}}
               @tooltip={{column.tooltip}}
+              @hasReorderableColumns={{@hasReorderableColumns}}
               @hasResizableColumns={{@hasResizableColumns}}
+              @hasSelectableRows={{this.isSelectable}}
               @isStickyColumn={{this._isStickyColumn column}}
               @isStickyColumnPinned={{this.isStickyColumnPinned}}
               @tableHeight={{this._tableHeight}}
               @onColumnResize={{@onColumnResize}}
               @onPinFirstColumn={{this._onPinFirstColumn}}
+              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}
+              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}
+              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}
               {{this._registerThElement column}}
             >
               {{column.label}}
@@ -64,7 +77,9 @@
               @align={{column.align}}
               @column={{column}}
               @hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}
+              @hasReorderableColumns={{@hasReorderableColumns}}
               @hasResizableColumns={{@hasResizableColumns}}
+              @hasSelectableRows={{this.isSelectable}}
               @isExpanded={{this._tableModel.expandState}}
               @isExpandable={{column.isExpandable}}
               @isStickyColumn={{this._isStickyColumn column}}
@@ -75,13 +90,20 @@
               @onClickToggle={{this._tableModel.toggleAll}}
               @onColumnResize={{@onColumnResize}}
               @onPinFirstColumn={{this._onPinFirstColumn}}
+              @onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}
+              @onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}
+              @onReorderDrop={{this._tableModel.moveColumnToDropTarget}}
               {{this._registerThElement column}}
             >
               {{column.label}}
             </Hds::AdvancedTable::Th>
           {{/if}}
         {{/each}}
       </Hds::AdvancedTable::Tr>
+
+      {{#if this.showScrollIndicatorTop}}
+        <div class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top" />
+      {{/if}}
     </div>
 
     {{! Body }}
@@ -107,6 +129,7 @@
                   isParentRow=T.isExpandable
                   depth=T.depth
                   displayRow=T.shouldDisplayChildRows
+                  data=T.data
                 )
                 Th=(component
                   "hds/advanced-table/th"
@@ -140,6 +163,7 @@
                 selectionAriaLabelSuffix=@selectionAriaLabelSuffix
                 hasStickyColumn=this.hasStickyFirstColumn
                 isStickyColumnPinned=this.isStickyColumnPinned
+                data=record
               )
               Th=(component
                 "hds/advanced-table/th"
@@ -172,13 +196,6 @@
     />
   {{/if}}
 
-  {{#if this.showScrollIndicatorTop}}
-    <div
-      class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top"
-      {{style top=this.scrollIndicatorDimensions.top width=this.scrollIndicatorDimensions.width}}
-    />
-  {{/if}}
-
   {{#if this.showScrollIndicatorBottom}}
     <div
       class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom"