Skip to content

Commit 493a04c

Browse files
zamooreshleewhiteshleewhite
authored
AdvancedTable - Column reordering
Co-authored-by: shleewhite <[email protected]> Co-authored-by: Lee White <[email protected]>
1 parent 57274f9 commit 493a04c

File tree

35 files changed

+2467
-284
lines changed

35 files changed

+2467
-284
lines changed

‎.changeset/wet-files-joke.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@hashicorp/design-system-components": minor
3+
---
4+
5+
<!-- START components/table/advanced-table -->
6+
`AdvancedTable` - Added support for column reordering.
7+
- Added `@hasReorderableColumns` argument. When set to `true`, enables column reordering.
8+
- Added optional `@columnOrder` argument for setting the initial order of columns by their keys.
9+
- Added optional `@onColumnReorder` argument which accepts a callback function that is called when reordering is completed.
10+
- Added optional `@reorderedMessageText` which overrides the default message text that is rendered in the table caption when a column is reordered.
11+
<!-- END -->

‎packages/components/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,14 @@
154154
"./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
155155
"./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
156156
"./components/hds/advanced-table/th-context-menu.js": "./dist/_app_/components/hds/advanced-table/th-context-menu.js",
157+
"./components/hds/advanced-table/th-reorder-drop-target.js": "./dist/_app_/components/hds/advanced-table/th-reorder-drop-target.js",
158+
"./components/hds/advanced-table/th-reorder-handle.js": "./dist/_app_/components/hds/advanced-table/th-reorder-handle.js",
157159
"./components/hds/advanced-table/th-resize-handle.js": "./dist/_app_/components/hds/advanced-table/th-resize-handle.js",
158160
"./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
159161
"./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",
160162
"./components/hds/advanced-table/th.js": "./dist/_app_/components/hds/advanced-table/th.js",
161163
"./components/hds/advanced-table/tr.js": "./dist/_app_/components/hds/advanced-table/tr.js",
164+
"./components/hds/advanced-table/utils.js": "./dist/_app_/components/hds/advanced-table/utils.js",
162165
"./components/hds/alert/description.js": "./dist/_app_/components/hds/alert/description.js",
163166
"./components/hds/alert.js": "./dist/_app_/components/hds/alert.js",
164167
"./components/hds/alert/title.js": "./dist/_app_/components/hds/alert/title.js",

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

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,19 @@
22
Copyright (c) HashiCorp, Inc.
33
SPDX-License-Identifier: MPL-2.0
44
}}
5+
56
<div
67
class="hds-advanced-table__container
78
{{(if this.isStickyHeaderPinned 'hds-advanced-table__container--header-is-pinned')}}"
89
{{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}
10+
{{did-update this.updateTableModelColumnOrder @columnOrder}}
911
...attributes
1012
>
1113
{{! Caption }}
1214
<div id={{this._captionId}} class="sr-only hds-advanced-table__caption" aria-live="polite">
1315
{{@caption}}
1416
{{this.sortedMessageText}}
17+
{{this.reorderedMessageText}}
1518
</div>
1619

1720
{{! Grid }}
@@ -28,7 +31,12 @@
2831
{{this._setUpScrollWrapper}}
2932
>
3033
{{! Header }}
31-
<div class={{this.theadClassNames}} role="rowgroup" {{this._setUpThead}}>
34+
<div
35+
class={{this.theadClassNames}}
36+
role="rowgroup"
37+
{{this._setUpThead}}
38+
{{on "dragleave" (fn (mut this._tableModel.reorderHoveredColumn) null)}}
39+
>
3240
<Hds::AdvancedTable::Tr
3341
@selectionScope="col"
3442
@onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}
@@ -41,20 +49,25 @@
4149
@hasStickyColumn={{this.hasStickyFirstColumn}}
4250
@isStickyColumnPinned={{this.isStickyColumnPinned}}
4351
>
44-
{{#each this._tableModel.columns as |column|}}
52+
{{#each this._tableModel.orderedColumns as |column|}}
4553
{{#if column.isSortable}}
4654
<Hds::AdvancedTable::ThSort
4755
@column={{column}}
4856
@sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}
4957
@onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}
5058
@align={{column.align}}
5159
@tooltip={{column.tooltip}}
60+
@hasReorderableColumns={{@hasReorderableColumns}}
5261
@hasResizableColumns={{@hasResizableColumns}}
62+
@hasSelectableRows={{this.isSelectable}}
5363
@isStickyColumn={{this._isStickyColumn column}}
5464
@isStickyColumnPinned={{this.isStickyColumnPinned}}
5565
@tableHeight={{this._tableHeight}}
5666
@onColumnResize={{@onColumnResize}}
5767
@onPinFirstColumn={{this._onPinFirstColumn}}
68+
@onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}
69+
@onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}
70+
@onReorderDrop={{this._tableModel.moveColumnToDropTarget}}
5871
{{this._registerThElement column}}
5972
>
6073
{{column.label}}
@@ -64,7 +77,9 @@
6477
@align={{column.align}}
6578
@column={{column}}
6679
@hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}
80+
@hasReorderableColumns={{@hasReorderableColumns}}
6781
@hasResizableColumns={{@hasResizableColumns}}
82+
@hasSelectableRows={{this.isSelectable}}
6883
@isExpanded={{this._tableModel.expandState}}
6984
@isExpandable={{column.isExpandable}}
7085
@isStickyColumn={{this._isStickyColumn column}}
@@ -75,13 +90,20 @@
7590
@onClickToggle={{this._tableModel.toggleAll}}
7691
@onColumnResize={{@onColumnResize}}
7792
@onPinFirstColumn={{this._onPinFirstColumn}}
93+
@onReorderDragEnd={{fn (mut this._tableModel.reorderDraggedColumn) null}}
94+
@onReorderDragStart={{fn (mut this._tableModel.reorderDraggedColumn)}}
95+
@onReorderDrop={{this._tableModel.moveColumnToDropTarget}}
7896
{{this._registerThElement column}}
7997
>
8098
{{column.label}}
8199
</Hds::AdvancedTable::Th>
82100
{{/if}}
83101
{{/each}}
84102
</Hds::AdvancedTable::Tr>
103+
104+
{{#if this.showScrollIndicatorTop}}
105+
<div class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top" />
106+
{{/if}}
85107
</div>
86108

87109
{{! Body }}
@@ -107,6 +129,7 @@
107129
isParentRow=T.isExpandable
108130
depth=T.depth
109131
displayRow=T.shouldDisplayChildRows
132+
data=T.data
110133
)
111134
Th=(component
112135
"hds/advanced-table/th"
@@ -140,6 +163,7 @@
140163
selectionAriaLabelSuffix=@selectionAriaLabelSuffix
141164
hasStickyColumn=this.hasStickyFirstColumn
142165
isStickyColumnPinned=this.isStickyColumnPinned
166+
data=record
143167
)
144168
Th=(component
145169
"hds/advanced-table/th"
@@ -172,13 +196,6 @@
172196
/>
173197
{{/if}}
174198

175-
{{#if this.showScrollIndicatorTop}}
176-
<div
177-
class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top"
178-
{{style top=this.scrollIndicatorDimensions.top width=this.scrollIndicatorDimensions.width}}
179-
/>
180-
{{/if}}
181-
182199
{{#if this.showScrollIndicatorBottom}}
183200
<div
184201
class="hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom"

0 commit comments

Comments
 (0)